Yarn Berry란?

Node js 를 위한 새로운 패키지 관리 시스템
https://github.com/yarnpkg/berry

NPM의 문제점

비효율적인 의존성 검색

require.resolve.paths() 

라이브러리를 찾기 위해 디렉토리를 순회 시 패키지를 바로 찾지 못할 수록 느린 I/O 호출이 반복됨

환경에 따라 달라지는 동작

상위 디렉토리가 어떤 node_modules를 포함하고 있는지에 따라 의존성을 호출 여부가 불분명함

비효율적인 설치

node_modules는 매우 큰 공간을 차지

유령 의존성 (Phantom Dependency)

NPM과 Yarn v1에서는 디스크 공간을 아끼기 위해 원래 트리의 모양을 오른쪽 트리처럼 변경

이렇게 끌어올리기에 따라 직접 의존하고 있지 않은 라이브러리를 require() 할 수 있는 현상

PnP(Plug’n’Play )

Yarn v1은 package.json 파일을 기반으로 의존성 트리를 생성하고, 디스크에 node_modules 디렉토리 구조를 생성 (이미 패키지의 의존성 구조를 완전히 알고 있음)

하지만 node_modules 파일 시스템을 이용한 의존성 관리는 깨지기 쉬움

pnp는 근본적으로 안전하게 의존성을 관리

동작 방식

.yarn/cache 폴더에 의존성 정보 저장
.pnp.cjs 파일에 의존성을 찾을 수 있는 정보 기록

/* react 패키지 중에서 */
["react", [
  /* npm:17.0.1 버전은 */
  ["npm:17.0.1", {
    /* 이 위치에 있고 */
    "packageLocation": "./.yarn/cache/react-npm-17.0.1-98658812fc-a76d86ec97.zip/node_modules/react/",
    /* 이 의존성들을 참조한다. */
    "packageDependencies": [
      ["loose-envify", "npm:1.4.0"],
      ["object-assign", "npm:4.1.1"]
    ],
  }]
]],

ZipFS (Zip Filesystem)

pnp 시스템에서 각 의존성은 Zip 아카이브로 관리됨

• 용량 절약 ( 400 MB >> 120 MB )
• 의존성 탐색 용이

Zero Install

Yarn Berry에서 의존성을 버전 관리에 포함하는 것

clone, blanch check out시 yarn install 필요가 없어서 CI시간 절약

Setting TypeScript with Editor SDK

Yarn berry의 PnP 기능을 사용할 때, TypeScript가 작동하도록 추가적인 구성이 필요
안전상의 이유로 VSCode에서는 사용자 지정 TypeScript 설정을 명시적으로 활성화해야함

패키지들이 zip 아카이브로 관리되기 때문에 기존의 방식으로는 정상적으로 타입 호출 불가

1.Editor SDK 설정을 하기 전에 먼저 VSCode에서 zipfs을 설치

yarn dlx @yarnpkg/sdks vscode

2. .vscode, .yarn/sdks 가 추가됨

3. Select Typescript version

command + shift + p키 (맥북 기준)를 눌러 TypeScript 버전 선택..을 검색해 Use Workspace Version을 선택해 workspace의 typescript sdk로 변경

---

Reference

https://toss.tech/article/node-modules-and-yarn-berry
https://haranglog.tistory.com/28