Yarn Berry PnP를 NPM대신 사용하면 좋은 이유

출처 : https://bun.sh/

위 사진은 Bun 홈페이지에 있는 성능 측정 내용이다.  10월쯤에 번에 대해서 알게 되었고, 이 과정에서 Yarn보다 npm이 빠르다는 인식이 생겼었는데, 토스에서는 Yarn Berry를 이용해서 package를 관리한다.

출처  : 토스 채용

그래서 이 이유에 대해서 궁금했었는데 이번 패스트캠퍼스 최적화 유지보스 강의에서 Npm 대신 Yarn을 쓰는 이유에 대해서 전 토스증권 출신인 강사님의 강의를 통해 듣게 되어서 공유하고자 게시글을 쓰게 되었습니다.

 

 

강사님이 설명하신 이유는 Npm을 사용하지 않는 이유는 아래 3가지 입니다)

- 무겁고 복잡한 node_modules
- 비효율적인 설치 (다른 버전의 패키지 중복 설치
- 비효율적인 의존성 검색

 

 

비효율적인 설치 

 Npm에선 node_modules 내의 여러 패키지들이 동일한 라이브러리에 버전이 다른 경우 중복된 라이브러리를 설치하기 떄문에 일어난다고 했습니다. 파일시스템을 통해 의존성을 관리하기 떄문에, 이러한 구조는 패키지를 찾을 때 비효율적인 구조를 만듭니다.

비효율적인 의존성 검색

 아래의 그림과 같이  Npm에서는 중복되는 라이브러리의 경우에는 hoist를 통해서 아래와 같이 평탄화를 해서 최소한의 설치를 하려고 합니다. 하지만 이럴려면 pakage.json에 명시되지 않은 의존성에 대해서도 접근하게 되는데 이를 유령 의존성이라고 합니다. 이럴 경우 의존성 관리 시스템을 혼란스럽게 만듭니다.

 

 

이를 Yarn Berry 의 Plug N Play 방식(PNP)으로 관리할 경우 아래와 같은 장점이 있습니다.

- 효율적인 의존성 검색
- 엄격한 의존성관리
- CI 시간 단축

 

공식 문서에서 언급하는 장점들을 덧붙여 설명하면 , (https://yarnpkg.com/features/pnp)

 

1. Yarn Berry는 Node_modules를 생성하지 않기 때문에  Node_modules폴더를 순회하지 않고 대신 PNP.CJS에 패키지의 위치와 버전 정보를 기록하여 관리합니다. 

  >> 많은 시간들이 입출력 작업을 통해 파일을 이동시킬 때, 시간을 많이 소모하게 되는데 이에 비해 빨라집니다. 

        ex) npm  : disk ,  pnpm :  symlinks / hardlinks 

2. Disks를 통해 설치파일들을 공유합니다.

Yarn PnP는 같은 패키지 생성물을 프로젝트들 끼리 디스크에서 재사용 가능하게 해줍니다 (1번과 연계된 장점)

 

3. 완벽하고 올바른 호이스팅 

전형적인 node_modules는 호이스팅을 통해 최적화를 해서 크기를 줄일려고 하는데, 몇몇 의존성 패턴은 안전한 호이스팅을 예방하고, 패캐지 복제와 여러 인스턴스화를 만드는 문제가 있다고 한다. ( 이를 어떻게 해결했는지는 못 찾겠네요 ㅠ)

 

4. 유령 의존성 보호

Yarn은 모든 패키지와 해당 종속성의 목록을 보관하기 때문에 문제를 해결하는 동안 설명되지 않은 종속성에 대한 액세스를 방지할 수 있으며, 이러한 문제가 '코드베이스에 깊이 침투하거나 배포 시점에 애플리케이션의 안정성을 위협하기 전'에 전에 신속하게 식별하고 수정할 수 있게 해줍니다.
다른 패키지 관리자들이 정상적으로 작동하는 것처럼 보일 때, 관련 없는 종속성을 추가, 업그레이드 또는 제거하면서 이상한 파손이 발생하기 시작할 때까지 오류가 보고될 수 있습니다. 이로 인해서 Yarn PnP를 채택할 때, 꺼릴 수 있지만, 이는 후에 생길 문제를 미리 해결하는 것 입니다.

 

5. 시멘틱 에러 처리

기존 에러 처리를 좀 더 세밀하게 해줍니다. ( 첫 번째가 기존에러)

 

 

6. 프로젝트를 클론한 후 패키지에 접근할 필요없이 바로 사용가능한 Zero Install이 가능해집니다.

공식문서에는 없는 내용이지만, 강사님이 설명해주신 부분입니다.

 

성능적으로는 pnpm이 가장 장점을 가지고 있으나 이런 원시적인 측정방법보단, 구조적인 이유로 채택했으면 좋겠다고 하네요.

 

 

사용방법은

$ npm install -g yarn

 

강의에서는 CRA를 통해 프로젝트 생성 했습니다.

$ yarn create react-app 프로젝트이름 --template typescript

 

이후
프로젝트에서

 

Yarn Berry(PnP)를 적용 시켜줍니다.

$ yarn set version berry"

 

이후 위의 명령어를 입력하면 yarnrc.yml 파일이 생기는데 해당 파일에서  pnp 적용해줍니다.

yarnPath: .yarn/releases/yarn-4.0.2.cjs
nodeLinker: pnp

 

다음으로 pnp방식을 사용하기로 했으니 패키지를 설치해줍니다.(.pnp.cjs 와  .pnp.loader.mjs 이 생김)

$ yarn install

 

설치시 zip파일이 생김

Yarn Berry 와 IDE 통합 - ZipFS Plugin 설치

 

설치가 완료되면 하단의 명령어 입력을 통해서 vscode가 타입스크립트를 인식할 수 있도록 해줍니다.

아래 명령어를  치면 사진과 같은 게 뜰건데 바로 Allow해주면 node_modules를 없애도 타입스크립트 인식이 됩니다.

 

 

yarn dlx @yarnpkg/sdks vscode

 

늦게 누르면 위에 창이 사라지는데 그럴 경우는

아니면 ctrl ( 맥은 command) + p  를 입력하고  TypeScript 검색후 작업 영역 버전 사용하면 됩니다.

생성된 파일들을 .gitignore에 등록 ( Questions & Answers | Yarn (yarnpkg.com))

 

하고 Jest 타입에러를 잡으면 됩니다.

$ yarn remove @testing-library/jest-dom

$ yarn add -D @types/testing-library__jest-dom @testing-library/jest-dom