이전 포스팅에서 디자인 시스템을 구성하기 위해 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...

Flutter에는 많은 상태관리 패키지들이 존재한다. 그 중 Riverpod에 대해서 알아보자. Riverpod는 Provider의 anagram(철자 바꾸기)이다. Riverpod는 Flutter/Dart의 반응형 캐싱 프래임워크로 선언적 프로그래밍과 반응형 프로그래밍을 사용하여 애플리케이션 로직의 상당 부분을 처리한다. https://riverpod.dev/ko/docs/introduction/getting_started Getting started | Riverpod Try Riverpod online riverpod.dev 설치 공식문서 상 아래와 같은 의존성들을 주입해주어야한다는데, 굳이? 다 필요한가 싶긴하다. 예측일뿐 아직 뭐가 뭔지 모르니 우선 다 설치해주자. flutter pub add ..

Firebase란? Firebase는 Google의 모바일 앱 개발 플랫폼이다. 여러가지 개발 시간 단축 및 확장 가능한 인프라가 포함되는 웹 및 모바일 애플리케이션 구축을 위한 백엔드 플랫폼이다. Firebase는 간편한 애플리케이션 구축, 애플리케이션 릴리즈 및 모니터링, 사용자 참여 및 애플리케이션 프로모션을 쉽게 추적을 제공한다. 여러가지 인프라 중 Firebase에서 제공하는 Firebase Cloud Massage(이하 FCM)을 알아보자. FCM이란? FCM은 메시지를 안정적으로 무료 전송할 수 있는 크로스 플랫폼 메시징 솔루션이다. FCM을 사용하면 새 이메일이나 기타 데이터를 동귀화할 수 있음을 클라이언트 앱에 알릴 수 있다. 이런 알림 메시지를 통해 사용자를 유지하고 재참여를 유도할 수..