chouung commented 3 weeks ago

yarn berry 사용하기

약 3년간 yarn classic을 사용하다가 이제서야 yarn berry로 넘어오며 yarn에 대해 알아보고 있습니다. 셋팅부터 많이 막혀서 이래저래 공부를 해보고 있습니다. 다음 글에서는 yarn berry의 기능들에 대해 좀 더 깊게 알아보려고 합니다.

yarn 이란?

yarn 1.xx
- yarn classic
- node -v 16 이상 사용 가능
- package.json yarn.lock node_modeuls 를 통해 종속성을 관리
yarn 2.x~4.x
- yarn berry
- node -v 18 이상 사용 가능
- 세 가지 설치 전략을 모두 지원
  - Yarn PnP (권장)
  - node_modules
  - pnpm

pnpm 스타일의 심볼릭 링크 방식
node_modules 폴더 대신 단일 .pnp.cjs라는 Node.js 로더 파일을 생성한다. 이 로더 파일은 프로젝트의 종속성 트리에 대한 모든 정보를 포함한다.
디스크의 모든 프로젝트에서 동일한 패키지를 재사용할 수 있다. PnP 로더는 캐시 경로를 통해 패키지를 직접 참조하므로 복잡성이 많이 제거된다.
Phantom Dependency (유령 의존성) 방지
- 해당 의존성에 없는 패키지인데 있는 것처럼 보여서 import해서 사용되는 버그를 방지할 수 있다.
프로젝트에 패키지를 매번 설치하지 않기 때문에, 설치 공간을 최소화 할 수 있다.
디스크의 모든 프로젝트에서 동일한 패키지를 재사용할 수 있다. PnP 로더는 캐시 경로를 통해 패키지를 직접 참조하므로 복잡성이 많이 제거된다.

Pnpm은 하드링크 방식이다.
- 파일의 복사본을 만들지 않고 여러 프로젝트에서 동일한 파일을 공유하게 해주는 방식
- 마치 여러 폴더에 똑같은 파일이 있는 것처럼 보이지만, 실제로는 하나의 파일만 있다.
- "콘텐츠 주소 지정 가능 저장소" 시스템을 이용 → 패키지 파일을 찾아서 그걸 여러 프로젝트에서 재사용하게 한다.

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

tsconfig나 eslint로는 수정이 안된다. yarn berry를 사용하려면 아래의 셋팅이 우선적으로 필요하다.

corepack (vs volta)

npm install -g yarn로 yarn을 설치하는 것은 권장되지 않는다. 프로젝트의 의존성(패키지들)이 고정되어야 하는 것처럼, 패키지 매니저(Yarn) 자체도 특정 버전으로 고정되어야 하기 때문이다. (Yarn 같은 패키지 매니저가 전역으로 설치되면, 시스템에 설치된 Yarn 버전이 언제든지 바뀔 수 있기 때문이다.)
Yarn 4는 최신 기능과 성능 개선을 제공하며, 이를 가장 쉽게 사용하고 프로젝트별로 일관된 환경을 유지하려면 Corepack을 사용하는 것이 권장된다.
Corepack은 Node.js에 내장되어 있고 Yarn 4와 완벽하게 호환되어, 추가 설정 없이 간편하게 최신 패키지 매니저를 사용할 수 있다.
반면, Volta는 Yarn 버전 관리에는 유용하지만, Yarn 4의 최신 기능 및 요구 사항에 맞춰진 최적의 도구는 Corepack이다.

brew install corepack
corepack enable

corepack enable
yarn -v // 2.0 이상부터 yarn berry이다. 현재 최신 버전은 4.5
yarn init -2 // 만약 여기서 yarn init-2가 안된다면 yarn.lock 빈 파일 생성 (프로젝트위 최상위로 인식하지 못하기 때문)

여기까지 했는데 모듈을 못찾는다면..

// cli
yarn set version berry
yarn
yarn dlx @yarnpkg/sdks vscode

// vscode
Reload window with command + shift + p then 'Developer: Reload Window'

node linker 기능으로 node_modules 폴더 유지하기

// .yarnrc.yml
nodeLinker: node-modules
pnpMode: loose

// cli
yarn cache clean --all
yarn install

위의 방법대로 하면 node_modules가 생성되고, 클래식한 방식대로 사용할 수 있다. ~~(..근데 그러면 yarn berry를 왜 ㅆㅓ..?)~~

snaag commented 2 weeks ago

선배! 블루베리 사주세요! 혹시... 얀베리도 같이? (ㅎㅎㅈㅅ) 안일하게 yarn 만 그냥 썼는데 이런 심도있는 고민과 글이라니 지난 날을 돌아보게되네요... 좋은 글 감사합니다 👍🏻👍🏻

k-young-passionate commented 2 weeks ago

뭔가 잠깐 node 쓸 때 yarn이 있었던 거 같은데 뭐하는지는 모르고 넘어갔었는데요, 프로젝트 & 패키지 매니저 역할을 하는군요...! 새로운 지식을 얻어갑니다 🤔

snaag commented 2 weeks ago

@chouung 2탄 언제나와여?