이전 포스팅에서 디자인 시스템을 구성하기 위해 vanilla-extract를 선택했다. 이번에는 실제로 vanilla-extract를 사용하여 디자인 시스템을 구성해보자.우선, 내가 직접 디자인을 할 능력이 안돼서, 피그마로 제공되는 디자인을 가져와서 구성해보자.굳이 여러개 찾아볼 필요가 있을까 싶어서, MUI에서 Preview로 제공되는 디자인을 가져와서 구성해보자.MUI Design Systemvanilla-extract로 theme 구성하기theme위를 참고해서 theme을 구성해보자.color palette를 보면 크게 아래와 같이 나뉜다.text : 텍스트의 기본 색상primary : 주요 요소(브랜드) 색상, 버튼, 링크, 강조 요소 등에 사용secondary : 보조 색상, 부차적인 요소, ..

우선은 css 라이브러리를 선택해야하는데 나중에 서버사이드 렌더링을 위한 프로젝트가 있을 때, 문제가 생길지도 몰라서 CSS-in-JS 는 피하고싶다.그러면 선택지는 매우 줄어드는데 사실 가장 유명한건 tailwindCSS이다.하지만 tailwindCSS도 방식이 마음에 들지 않는다... className에 css를 작성하는것, 쓰다보면 익숙해지겠지만 기존의 css가 아닌 새로운 키워드들을 학습해야한다.대안으로 Css Modules, Sass 등이 있다.CSS Modules vs SassCSS Modules:장점:지역 범위 스타일링: 클래스 이름 충돌 방지기존 CSS 문법 사용: 학습 곡선 낮음컴포넌트 기반 개발에 적합빌드 시 최적화: 사용하지 않는 스타일 제거 가능단점:동적 스타일링에 제한적글로벌 스타..

디자인 시스템을 만들었으니 이를 사용하는 방법을 알아보자.1. button 만들기export const Button = () => { return Button;};간단하게 위처럼 버튼을 만들고 vite 환경으로 만든 프로젝트에서 사용해보자.apps/test/package.json{ ... "dependencies": { "@packages/ui": "workspace:*" } ...}위처럼 디펜던시를 추가하고, 빌드를 하게되면 디자인 시스템 패키지가 빌드되어 프로젝트에 적용된다.2. 디자인 시스템 패키지 사용하기$ pnpm install$ pnpm @packages/ui:buildimport { Button } from "@packages/ui";export const App = () =>..

title: 디자인 시스템 importdate created: 2024-10-04date modified: 2024-10-04tags: [pnpm, monorepo, side project, design system]links: []디자인 시스템을 만들었으니 이를 사용하는 방법을 알아보자.1. button 만들기export const Button = () => { return Button;};간단하게 위처럼 버튼을 만들고 vite 환경으로 만든 프로젝트에서 사용해보자.apps/test/package.json{ ... "dependencies": { "@packages/ui": "workspace:*" } ...}위처럼 디펜던시를 추가하고, 빌드를 하게되면 디자인 시스템 패키지가 빌드되어 프..

title: UI 패키지 만들기date created: 2024-10-03date modified: 2024-10-03tags: [pnpm, monorepo, side project]links: []모노레포에서 공통 UI를 담당할 패키지를 만들어보자.1. 패키지 구조 설정$ mkdir packages$ cd packages$ mkdir ui$ cd ui$ pnpm init하위 프로젝트 명령어를 위해 root package.json에 스크립트를 지정해주자.--filter 옵션을 사용하면 특정 패키지에 대한 명령어를 실행할 수 있다.{ "name": "monorepo", "version": "1.0.0", "description": "", "scripts": { "ui": "pnpm --filt..

예전에도 몇번 다루었던 모노레포를 제대로 구성해보지도 못했어서, 이번에는 앞으로 만들 모든 사이드프로젝트를 하나의 모노레포로 관리해보기 위해서 모노레포를 구성해보고자 한다. 익숙한 yarn 대신 pnpm을 사용해서 구성해보자. 1. pnpm 설치pnpm을 설치하는 방법은 여러가지가 있는데 그 중 brew와 npm을 통한 설치 방법 둘 중 고민했다. npm을 통한 설치: Node.js와 긴밀히 연동되며, 주로 Node.js 프로젝트와 작업할 때 편리한 방식이다. 하지만 Node.js 버전을 여러 개 관리할 때는 불편할 수 있다.Homebrew를 통한 설치: Node.js 버전과 무관하게 시스템 전역에서 pnpm을 사용할 수 있으며, macOS 시스템과 통합된 패키지 관리가 가능하다. 여러 버전의 Node...

구독 채널의 최신 영상을 가져오고싶은데, youtube API에 구독자의 최신 영상을 한 번에 가져오는 방법은 없는 듯 하다. Subscriptions: list 는 현재 내가 구독중인 채널의 정보를 받아올 수 있다. 생각하고 있는 로직은 Subscriptions: list를 통해 구독 채널 정보 리스트를 받아온 다음, 그 안에 있는 채널 id를 사용하여 해당 채널의 최신 영상을 받아오는 방법을 생각하고 있다. export const getSubscriptionsList = async () => { const accessToken = getAccessToken(); const params = { part: "snippet", mine: true, maxResults: 5, }; try { const re..

20230705 며칠동안 바빠서 chat gpt 프로젝트를 진행 못했다가 진행하려니 자꾸 에러 메세지가 날아왔다. cors 문제 해결과정을 포스팅하려고 했는데, cors 문제 해결한 다음에도 계속 에러가 나오길래 뭐지 했는데, chat gpt api 무료 사용기간이 초과돼서 그런거였다.... 그냥 재미로 하는 side project에 돈을 쓰고싶지는 않은데 ... 무료 credit도 얼마 써보지도 못하고 끝나버렸다... 빨리빨리 할 걸 .... 나중에 여유가되면 유료 결제하고 한 번 해봐야겠다. ChatGPT 채팅을 웹으로 배포해보자. 프론트엔드 구성 vite를 사용해서 프로젝트 빌드를 구성하고, 질문을 받을 수 있는 인풋 제어 컴포넌트를 만들었다. import { useState } from "reac..