프로젝트에 yarn berry 적용하기

사내에서 개발중인 프로젝트가 여러개 있는데 어떤 프로젝트는 npm으로 또 어떤 프로젝트는 yarn classic으로 패키지 관리를 하고 있었다.

 

패키지를 많이 사용하다보니 생각보다 종종 dependency 의존성에 문제가 발생하였고 그럴 때마다 기존 패키지 파일을 날리고 다시 설치를 하는 수고를 부담했어야 했다. (시간도 오래 걸림)

 

손을 봐야겠다고 생각은 하고 있었는데 때마침 이번에 사용중인 모든 프론트 프로젝트들을 Next js (typescript)로 새로 이전하는 대규모 작업을 진행하게 되었고 이때다 싶어 팀장님께 yarn berry를 적용하자고 말씀드렸다.
팀장님께 yarn berry 관련된 포스팅 링크를 드렸고 읽어 보신 후에 적용하면 좋을 것 같다는 긍정적인 피드백을 받았다.

 

yarn berry 관련 포스팅

• 토스 테크 블로그
• 리멤버 yarn berry 도입기

리멤버 웹 서비스 좌충우돌 Yarn Berry 도입기 - DRAMA&COMPANY

node_modules로부터 우리를 구원해 줄 Yarn Berry

 

OK 사인을 받은 후 바로 적용을 시작했다.

적용 방법은 매우 간단했다.

 

yarn berry 적용하기

yarn set version berry

yarn classcic 으로 프로젝트가 세팅되어 있다면 node_modules를 삭제해주자

rm -rf node_modules

yarn berry를 세팅하면 yarnrc.yml 파일이 생성되었을 것이다.

yarnrc.yml 파일을 수정해주자

nodeLinker: pnp

# next.js에서 styled-component를 사용하기 위해 추가
packageExtensions:
  styled-components@*:
    dependencies:
      react-is: "*"

# types를 포함하지 않는 패키지를 설치할 때 @tyles/ 속성을 자동으로 추가해주는 플러그인 세팅
plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
    spec: "@yarnpkg/plugin-typescript"

 

gitignore 수정 할 때 zero install을 사용할 것인지에 대해서 고려해야한다.
zero install이란 따로 yarn install 명령어 없이 바로 실행할 수 있게 하는 방식이라고 생각하면 편할 것 같다.

CI에서 빌드하는 시간을 많이 줄여주기 때문에 나는 zero install 사용하게끔 세팅을 진행했다.

# 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

 

vscode를 사용하고 있는 경우 ide 세팅 추가하기

yarn add D @yarnpkg/pnpify
yarn dlx @yarnpkg/sdks vscode

ide에서 cannot find module 에러가 발생하면 아래처럼 Use Workspace Version으로 세팅을 수정해주면 된다.

세팅 끝!