[React] Yarn Berry

Yarn Berry 란

Yarn Berry는 Node.js를 위한 새로운 패키지 관리 시스템으로, 기존의 npm, yarn v1의 패키지 비효율적인 매니징 방법을 개선하며 빌드 시간을 단축시켜주고 개발 과정에서의 안정성을 높여준다.

Yarn Berry 세팅

1. yarn을 전역으로 다운 받는다.

$ npm install -g yarn

2. 프로젝트 루트로 이동해서 yarn berry버전으로 세팅한다.

$ yarn set version berry

3. yarn으로 패키지들을 다운로드 한다.

$ yarn install

4. yarn typescript 플러그인 설정 (선택)

• 패키지 자체 타입이 포함되어 있지 않은 경우,
• 해당 패키지를 추가할 때 자동으로 @types/패키지를 종속성에 추가한다.

$ yarn plugin import typescript
$ yarn add -D typescript
$ yarn install

❗️ 이미 npm으로 create next-app을 하셨어도 괜찮습니다 node_module과 package-lock.json만 지워주시고 진행하시면 됩니다.

여기까지만 했다면 vscode는 위의 이미지처럼 보일 것 입니다. 따라서 추가적인 설정을 해줘야한다.

5. vscode Extenstion에서 ZipFS 다운받기

• ZipFS는 vscode에서 zip 아카이브에서 직접 파일을 읽을 수 있도록 도와준다.
• npm을 사용했을 때 node_module에 압축되어있지 않은 상태로 코드가 있기에 바로 참조할 수 있지만
• yarn에서는 패키지들이 압축되어져 있는 상태이기 때문에 vscode에서 참조하기 위해서는 ZipFS가 필요하다.

6. sdk 설치

yarn dlx @yarnpkg/sdks vscode

위의 이미지와 같은 창이 뜬다면 Allow를 눌러준다.

❗️ 혹시라도 위와 같은 창이 뜨지 않는다면 아래와 같이 하면된다.
1) 커맨더 + P를 누른다 / 윈도우는 컨트롤 + 쉬프트 + P를 눌른다
2) >TypeScript: Select TypeScript Version을 입력한다.

7. zero install 설정

• .gitgnore에 아래 내용을 추가한다.

zero install 사용하기

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

zero install 사용하지 않기

.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions