티스토리 뷰

Why monorepo?

  • 컴포넌트 재사용
  • 중복코드 방지

Lerna와 Yarn workspaces를 활용한 패키지 관리

Why berry?

  1. 파일의 크기를 줄인다.
  2. monorepo 설정 가능
  3. zero install
  4. 패키지 중복설치 방지, 유령의존성 발생 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 설치

  1. 프로젝트 repo로 이동 후 yarn berry ver 다운로드
yarn set version berry
  1. yarn 프로젝트 시작
yarn init
  1. nestjs 설치하기
yarn dlx @nestjs/cli new project-name

에러가 발생 할 수 있다.
echo 'nodeLinker: "node-modules"' >> .yarnrc.yml
먼저 nodemodules로 설치 한 후
나중에 폴더를 모두 이동시킨후 
nodeLinker: pnp로 바꾸어서 다시 설치

// 추후 어떤 에러가 발생할진 모르겠다;;
  1. yarn berry로 migration 하기
// root directory에서 실행
# yarn typescript 플러그인 설정
yarn plugin import typescript
yarn add -D typescript
yarn

# 타입/모듈 추론을 위한 yarn berry의 vscode 세팅
yarn dlx @yarnpkg/sdks vscode
  1. 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) 구성하기

yarn berry(yarn2) 마이그레이션 방법


monorepo 없이 설치하기

  1. next 설치 (or 프레임워크 먼저설치)
  2. node modules, lock 파일 제거
  3. berry 버전 설치
  4. yarnrc.yml 파일에서 node linker제거 (제거 안하면 계속 node module파일 생성됨)
  5. yarn
  6. yarn dev

'프론트엔드' 카테고리의 다른 글

lint 설정하기  (0) 2023.03.11
캐시(cache)  (0) 2023.03.10
브라우저 최적화 -Reflow, Repaint  (0) 2023.03.09