개발메모장

개요이번에는 Turborepo 기반 모노레포에 Storybook을 붙여보자. 공통 UI 패키지를 독립적으로 개발/문서화하는 건 굉장히 중요하다. 특히 팀 단위에서 협업할 때 시각적인 UI 문서화 + 테스트 환경으로 Storybook은 사실상 필수 도구다. 프로젝트 구조my-web/├── apps/│ ├── docs/ # 문서 앱│ └── web/ # 웹 앱├── packages/│ ├── eslint-config/ # ESLint 설정│ ├── typescript-config/ # TypeScript 설정│ └── ui/ # UI 컴포넌트 라이브러리├── package.json├── turbo.json└── pnpm-w..

터보레포(Turborepo) 첫 사용기 – 모노레포 구조 탐험기 최근에 터보레포(Turborepo)로 프로젝트를 세팅해봤다.예전부터 모노레포(Monorepo)에 관심이 있었는데, 이번에 직접 구조를 뜯어보며 어떤 매력이 있는지 체험해보았다. Turborepo란?터보레포는 Vercel에서 만든 모노레포 빌드 시스템이다.여러 앱과 패키지를 하나의 저장소에서 관리할 수 있고, 빌드 캐싱과 병렬 실행 덕분에 속도가 확실히 빨라졌다. 개인사이드 프로젝트와 새로 이전할 블로그를 터보레포에 담아보자. pnpm dlx create-turbo@latest 2개의 앱이 생긴다.프로젝트 구조my-web/├── apps/ # 애플리케이션├── packages/ # 공유 패키지├── package.js..

Next.js에서 React-query를 사용하려면 React 프로젝트와는 조금 다르게 환경을 세팅해야한다. 13버전 이후부터는 RSC가 도입되어 가장 상위 모듈인 layout에서 QueryProvider로 QueryClient를 props로 내려줄 수 없기 때문. Setting app router 환경에서 사용. Next.js 애플리케이션의 엔트리 포인트 지점을 ReactQueryStreamedHydration 과 QueryClientProvider 컴포넌트로 감싸주어야 한다. app에 속하는 하위 컴포넌트들은 기본적으로 서버 컴포넌트로 동작하기 때문에, 에러가 발생할 수 있다. QueryClientProvider는 클라이언트에서 초기화되어야 하기 때문. 따라서 client 사이드에서 동작하는 prov..

Eslint 설치 먼저 프로젝트 루트 디렉토리에서 eslint를 설치한다. pnpm add eslint --save-dev eslint 초기화 eslint를 프로젝트에 적용하려면 초기화해야 한다. eslint를 초기화하려면 다음 명령어를 실행한다. npx eslint --init Prettier 설치 먼저 프로젝트 루트 디렉토리에서 prettier를 설치한다. pnpm add prettier --save-dev prettier 설정 파일 생성 프로젝트 루트 디렉토리에 .prettierrc 또는 .prettierrc.json 파일을 생성한다. { "semi": true, "printWidth": 100, "singleQuote": true, "tabWidth": 2, "trailingComma": "non..

현재 CRA(Create React App)는 더 이상 React 프로젝트를 시작하는 데 권장하는 방법이 아니다. Vite와 PNPM의 조합을 사용하여 리액트 프로젝트 템플릿을 구성해보자. VITE란? Vite는 다른 JavaScript 기반 번들러보다 10~100배 빠르다. Go로 작성되었으며 해당 종속성이 esbuild에 사전 번들로 포함되어 있기 때문이다. 또한 vite는 소스 코드를 기본 ESM으로 제공하여 개발자 생산성 향상을 위한 주문형 변환 및 로딩을 가능하게 했다. PNPM이란? PNPM은 디스크 공간을 최적화하고 설치 속도를 높이는 npm 및 원사보다 빠른 대안입니다. https://pnpm.io/benchmarks 벤치마크 페이지이다. 앱 구축 vite 및 pnpm을 사용하려면 노드 버..