티스토리 뷰
Why monorepo?
- 컴포넌트 재사용
- 중복코드 방지
Lerna와 Yarn workspaces를 활용한 패키지 관리
Why berry?
- 파일의 크기를 줄인다.
- monorepo 설정 가능
- zero install
- 패키지 중복설치 방지, 유령의존성 발생 x
node_modules로부터 우리를 구원해 줄 Yarn Berry
yarn berry 설정하기
nextjs 설치
프로젝트 repo로 이동 후 yarn berry ver 다운로드
yarn set version berry
yarn 프로젝트 시작
yarn init
typescript 설치하기
// root directory에서 실행
yarn add -D typescript
package json에 package 추가하기
// apps 디렉토리를 만들어서 nextjs를 apps 디렉터리에서 관리하게 설정하였다.
"workspaces": [
"apps/*"
]
nextjs 설치하기
yarn dlx create-next-app@latest --typescript
yarn berry로 migration 하기
// root directory에서 실행
echo 'nodeLinker: "pnp"' >> .yarnrc.yml
# yarn typescript 플러그인 설정
yarn plugin import typescript
yarn add -D typescript
yarn
# 타입/모듈 추론을 위한 yarn berry의 vscode 세팅
yarn dlx @yarnpkg/sdks vscode
typescript 버전 설정하기
yarn berry는 typescript를 인식을 하지 못해 직접 버전을 설정해주어야한다.
// 5번에서 설치한 sdk를 설정해준다
// tsx 파일에서 해당 커맨드 실행 할 것
ctrl + shift + p (command + shift + p
typescript 버전 선택하기
Use workspace sdk 로 변경한다
nestjs 설치
- 프로젝트 repo로 이동 후 yarn berry ver 다운로드
yarn set version berry
- yarn 프로젝트 시작
yarn init
- nestjs 설치하기
yarn dlx @nestjs/cli new project-name
에러가 발생 할 수 있다.
echo 'nodeLinker: "node-modules"' >> .yarnrc.yml
먼저 nodemodules로 설치 한 후
나중에 폴더를 모두 이동시킨후
nodeLinker: pnp로 바꾸어서 다시 설치
// 추후 어떤 에러가 발생할진 모르겠다;;
- yarn berry로 migration 하기
// root directory에서 실행
# yarn typescript 플러그인 설정
yarn plugin import typescript
yarn add -D typescript
yarn
# 타입/모듈 추론을 위한 yarn berry의 vscode 세팅
yarn dlx @yarnpkg/sdks vscode
- typescript 버전 설정하기
yarn berry는 typescript를 인식을 하지 못해 직접 버전을 설정해주어야한다.
// 5번에서 설치한 sdk를 설정해준다
// tsx 파일에서 해당 커맨드 실행 할 것
ctrl + shift + p (command + shift + p
typescript 버전 선택하기
Use workspace sdk 로 변경한다
reference
Yarn berry에서 React + Jest + Cypress + TypeScript + Github Actions CI/CD를 세팅해보자
yarn berry로 workspace(monorepo) 구성하기
monorepo 없이 설치하기
- next 설치 (or 프레임워크 먼저설치)
- node modules, lock 파일 제거
- berry 버전 설치
- yarnrc.yml 파일에서 node linker제거 (제거 안하면 계속 node module파일 생성됨)
- yarn
- yarn dev
'프론트엔드' 카테고리의 다른 글
lint 설정하기 (0) | 2023.03.11 |
---|---|
캐시(cache) (0) | 2023.03.10 |
브라우저 최적화 -Reflow, Repaint (0) | 2023.03.09 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- suspense 장점
- React useCallback
- 백준 22862
- React useMemo
- 서비스 디자인 패턴
- storybook scss이슈
- react suspense
- serverless nestjs
- 서버사이드 error handling
- 불량 사용자 자바스크립트
- CSS
- useCallback과 useMemo 사용
- 선언적 UI
- 미로탈출 명령어
- 백준 1600번
- 가장 긴 짝수 연속한 부분 수열
- nextjs 에러핸들링
- node 버전 마이그레이션
- nestjs 배포하기
- node version yarn berry
- 자바스크립트
- storybook scss import
- serverless 배포
- nextjs errorboundary
- 1600 파이썬
- 에러핸들링
- storybook react is not defiend 해결
- javascript
- 표현 가능한 이진트리
- 관심사 분리하기
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
글 보관함