프로젝트에 yarn berry 적용

상현·2024년 1월 5일
1

yarn berry 도입 배경

yarn berry는 yarn의 새로운 버전으로 다음과 같은 이유로 도입을 해보았다.

  1. 성능 향상으로 패키지를 설치와 빌드 속도가 훨씬 빠르다.
  2. PnP 시스템 도입으로 node_modules 폴더가 사라졌다. 이로써 프로젝트의 용량이 획기적으로 줄었다.

프로젝트 스택

다음과 같은 기술을 사용한다고 가정하고 프로젝트를 설정하도록 하겠다.

  • NextJS
  • TypeScript
  • Prettier
  • ESLint
  • Tailwind CSS

설치

1. yarn 설치
우선 yarn이 설치되어 있지 않다면 yarn 부터 설치해주자.

npm i -g yarn

2. NextJS 설치
다음으로 NextJS 프로젝트를 설치하자.

yarn create next-app lets-go-yarn-berry

3. node_modules 삭제
global에 설정된 yarn 버전이 1.x 이라면 node_modules 폴더가 생겼을 것이다. 우린 이제 node_modules가 필요 없으므로 삭제해주자.

4. yarn 버전 확인
yarn-berry는 버전2 이상의 yarn이 yarn-berry이다. 즉, 우리가 일반적으로 알고 있던 yarn은 1.x 버전이다.
버전을 확인하고 1.x 대라면 yarn berry가 사용 가능한 버전으로 바꿔주자.

yarn -v
yarn set version berry

5. .yarnrc.yml 수정
yarn 버전을 바꾸고 나면 .yarnrc.yml이라는 파일이 생겼을 것이다. 해당 파일을 다음과 같이 수정한다.

nodeLinker: pnp
yarnPath: ".yarn/releases/yarn-berry.js"

그 후 다시 yarn 명령어를 실행해보자.

yarn

6. yarn run dev 실행
이제 설치가 정상적으로 되었다. yarn run dev를 통해 실행해보자.


에러

can't not find modules

혹시라도 Webstorm에서 모듈을 못찾겠다며 빨간줄을 내뿜는다면 다음 설정을 해보자.

  • 설정 -> Languages & Frameworks -> Node.js -> Package manager yarn(4.0.2)으로 설정

그리고 Webstorm을 껐다 켜보자...

profile
프론트엔드 개발자

1개의 댓글

comment-user-thumbnail
2024년 4월 7일

감사합니다 형님

답글 달기