Project : create next-app With Yarn Berry

팀원들과 package manager를 무엇을 쓸 건지 정하다가
여태 까지 yarn으로 CRA를 해와서 yarn을 사용을 하되....

yarn의 업그레이드 버전인 yarn berry로 migration 하기로 결정했다.

Yarn Berry migration

이유

yarn berry에서 제공하는 기능으로 zero install이라는 특징이 가장 큰 장점이다.
PnP 시스템 도입으로 node_modules 폴더가 사라지면서,

기존 npm , 일반 yarn 으로 boiler plating 하여 만들어진 프로젝트보다 지금 우리가 만든 프로젝트와 이전 프로젝트 초기 폴더의
용량을 비교했을 때 각 팀원들 마다 다르지만, 최소 4배~8배 정도 줄어드는 것을 확인 할 수 있었다.

그리고.

성능 향상으로 패키지를 설치와 빌드 속도가 훨씬 빠르다.

• 패키지라 함은 여러 api 이다.

migration 시작

먼저 yarn berry로 migration 하고 싶으면

yarn create next-app --typescript

이후 프로젝트 이름 입력하라는 창에 입력 후 , 여러 설정을 거치면 프로젝트가 생성된다.


그 이후에 yarn berry로 yarn 버전을 업데이트 하면 된다.
우선

yarn -v #1.22.21

yarn 버전 확인 이후

yarn set version stable # yarn 최신버전 업뎃
yarn set version berry # yarn berry로 업뎃

# 위 명령어 둘중 하나 선택해서 migration하면 되는데...

전역이 아닌 지역적으로 설치하는 이유는

전역으로 yarn berry로 설정 시 내가 여태까지 yarn version 1.22.21 로 생성한 프로젝트와 충돌 예방을 하기 위함이다.

yarn berry 로 migration(=업뎃) 이 후

yarn 
yarn install

둘중 yarn 패키지를 install 하면 된다.

만약에 node_modules 폴더가 생성된다면,

package.json 폴더에 아래 코드를 입력한다.

"packageManager": "yarn@3.1.1"

위 코드는 yarn 최신 버전 "yarn@4.0.2" 이 아직 도입 초기여서 그런지 오류가 나는데,
가장 호환이 잘 되는 버전 3으로 내려주는 것이다.

그리고 난 후 아래 명령어를 입력하여 yarnrc.yml 파일을 생성하여 위에서 말한 pnp 시스템 도입으로 node_modules를 대체 시킨다.

echo 'nodeLinker: "pnp"' >> .yarnrc.yml

이 이후에, yarn typescript 설정을 해주자

yarn plugin import typescript
yarn add -D typescript
yarn

위 명령어를 순서대로 입력하면 된다.

여기서 가장 중요 한것은 내 작업 환경이 Vs Code이다.

이 vscode 에디터가 압축파일을 알아서 찾게 하기 위한 명령어를 입력해야 하는데.

yarn dlx @yarnpkg/sdks vscode

위 명령어를 입력해 줘야 한다 .

이유는 yarn berry는 zip 파일로 라이브러리들을 관리하는데 이러한 파일들을 vscode 에디터가 찾기 위함이다.

익스텐션 설치

Zips - a zip file system 이 것도 같이 설치해주자

ctrl+shift+p 입력 후 뜨는 검색창에 select typescript version 을 입력 후 클릭한 다음

Use Workspace version을 클릭한다.

그리고 마지막으로

yarn dev

명령어를 입력하면 yarn berry로 migration 한 nextjs가 보인다.