코딩 요정 버터링

yarn classic(v1) 에서 yarn berrey(v4) 마이그레이션 하기 본문

프론트엔드 개발

yarn classic(v1) 에서 yarn berrey(v4) 마이그레이션 하기

butter-ring 2023. 12. 22. 16:52

들어가기전에 앞서...

 기존 회사에서 관리하는 프로젝트들은 패키지 매니저를 yarn classIc을 사용하였다.

여기서 yarn classic 은 yarn 의 1.x 버전이라고 보면 된다.

 

 본격적인 마이그레이션 방법에 대해 설명하기 전 왜 yarn berry 로 버전 업을 했는지에 대해서 설명하려고한다.

굳이 볼 필요는 없다.

yarn classic과 차이점

  • yarn berry는 종속성을 설치하고 해결하기 위해 PnP(Plug'n'Play)라는 기능을 사용한다. 특히, node_modules 폴더를 사용하지 않는 것이 주요 차이점 중 하나이다. node_modules은 폴더(파일 시스템)을 이용하여 의존성을 검색하며 굉장히 비효율적으로 동작하는데, 이는 yarn classic 뿐만 아니라 npm에서도 해당되는 문제이다.
  • node_modules의 비효율적인 설치는 큰 용량을 차지할 뿐만 아니라 디렉토리 구조를 만들기 위해 많은 I/O 작업이 필요하다는 문제가 있다. 서로가 서로를 의존하는 복잡한 의존성 때문에 디렉토리 구조가 깊어지고 설치가 유효한지 검증하기도 어렵다.
  • Ghost Dependency 문제도 존재했는데, npm과 yarn classic에서는 node_modules의 중복 설치 문제를 해결하기 위해 호이스팅(hoisting) 기법을 사용하는데, 이로 인해 직접적으로 의존하고 있지 않은 라이브러리를 require할 수 있는 현상을 Ghost Dependency 또는 유령 의존성이라고 부른다. yarn berry에서는 nohoist 옵션을 기본으로 활성화하여 이러한 hoisting을 방지하고 있다.

Plug'n'Play(PnP)

 yarn berry는 Plug'n'Play(PnP)를 사용하여 위에서 언급한 문제들을 해결했다.

 yarn berry에서는 node_modules 폴더가 없다. 대신에 .yarn의 하위 경로에 .zip으로 압축하여 의존성을 저장하고 .pnp.cjs 파일을 생성하며, 이를 사용함으로써 패키지를 찾기 위한 반복적이고 비효율적인 I/O로부터 해방되며 의존성 검증도 쉬워져 Ghost Dependency 문제를 해결했다.

 이를 통해 yarn berry는 프로젝트의 의존성 관리와 빌드 프로세스를 효율적으로 개선하고, 불필요한 복잡성을 간소화하는데 기여했다.

classic to berry

마이그레이션 방법

  1.  node 18 이상의 버전
  2.  corepack enable 이라는 명령어 사용을 통해 Corepack 을 활성화 시키기
  3.  프로젝트 디렉토리로의 이동
  4.  yarn set version berry 명령어 실행
  5.  .npmrc.yarnrc 의 내용을 .yarnrc.yml 파일로 옮겨준다.
  6.  yarn install 을 실행

 

세팅에 참고하면 좋을 것들

  • VSCODE 기준 code completion/hinting 을 사용시 typescript가 개빌/빌드 환경에 존재해야함. (사용여부와 상관없이)
  • eslint, prettier, typescript 등을 지원하는 ide 가 잘 작동되려면 아래의 명령어 실행이 필요함.
yarn dlx @yarnpkg/sdks vscode

 

 

Comments