[yarn berry + vscode] yarn berry 적용 방법 (with vscode setting)

yarn berry? (yarn 2)

 기존 node_modules의 문제점을 개선하기 위해 출시된 yarn의 상위 버전이다.

---

next.js 애플리케이션 생성

yarn create next-app ${project name}

---

yarn version 확인

생성한 애플리케이션으로 이동하여 프로젝트의 yarn 버전을 확인한다.

yarn -v 
// 1.22.19

간혹 가다 yarn berry를 적용도 전에 2.xx.xx 이상의 버전 (Major version이 2 이상일 경우 yarn berry에 해당된다.) 으로 확인되는 경우가 있는데, 이 경우는 상위 디렉토리에서 yarn 관련 설정이 되어있을 확률이 크다.

 

해결 방법은 프로젝트의 상위 디렉토리에 존재하는 .yarnrc.yml 파일을 삭제하면 된다.

---

버전 변경 전 정리

우리는 이제 node_modules로 부터 해방이므로 과감하게 node_modules를 삭제해준다

---

yarn berry로 버전 변경

yarn set version berry

위 커멘드를 프로젝트 내부에서 입력 시, 그 프로젝트에 한하여 yarn 버전을 berry로 변경이 가능하다.

 

자세한 yarn set version 커멘드 사용법은 아래 document를 참조하길 바란다.

https://yarnpkg.com/cli/set/version

`yarn set version`

---

yarn install

의존성 설치를 다시 해줄건데 바로 yarn install 키워드를 사용하면 삭제한 node_modules 디렉토리가 생성된다.

 

그러므로 위 작업으로 생성된 .yarnrc.yml 파일을 수정한다.

 

.yarnrc.yml

yarnPath: .yarn/releases/yarn-3.3.1.cjs
nodeLinker: pnp // Add this line!

nodeLinker에 pnp를 추가하여 헛수고를 막자.

 

파일을 수정한 후, install을 한다.

yarn install

---

git ignore 설정

zero install을 사용할건지 아닌지에 따라 .gitignore 작성법이 다르다.

 

using zero install

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

 

not using zero install

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

---

vscode setting

OMG..

불러오는 모든 module들이 에러를 내뱉고 있는 모습을 볼 수 있을 것 이다..

 

당황하지 않고 침착하게 아래의 extension을 설치해준다.

 

ZipFS

그리고 아래 커멘드를 터미널에 입력한다.

yarn dlx @yarnpkg/sdks vscode

 

그 후 아래의 모달이 뜨면 Allow를 클릭한다.

modal

만약 이 모달을 놓쳤어도 괜찮다. 다른 방식도 있으니.

 

View > Command Palette(shift + ⌘ + p)로 이동 하여 TypeScript: Select TypeScript Version를 검색한다.

shift + command + p

TypeScript: Select TypeScript Version

선택하여 들어가면 아래와 같은 선택 항목이 뜹니다.

select

아래 항목(Use Workspace Version) 을 선택한다.

 

clean~

깨끗해진 import 구문들을 만날 수 있다.

 

 기존 node_modules 처럼 ⌥ option (⌘ command) + click 시 모듈 내부를 확인할 수 있다.