정중식’ 블로그
정중식’ 블로그/
yarn Berry (PnP) 설정
yarn Berry (PnP) 설정

yarn Berry (PnP) 설정

카테고리
환경설정
날짜
2024년 06월 12일
작성자
JeongjungsikJeongjungsik
태그
yarn

왜 yarn berry 일까?

🙋‍♂️ Q: 왜 NPM을 안쓰나요?
🧑‍💻 A: 다음과 같은 사항 때문입니다.
  • 무겁고 복잡한 node_modules
  • 비효율적인 의존성 검색 (유령의존성)
  • 비효율적인 설치(다른 버전의 패키지 중복 설치)

what is pnp (Plug ‘n’ play)?

yarn2 에서의 새로운 전략 방식이다.
이 방식을 사용하면 더이상 node_modules에 패키지가 설치되지않고,
.yarn/cache 폴더에 해당 의존성 정보가 저장되며 .pnp.js파일에 의존성을 찾을 수 있는 정보가 기록된다.
 
예시
["styled-components", [
  ["npm:5.3.0", {
    "packageLocation": "./.yarn/cache/styled-components-npm-5.3.0-965f77d02b-1f94f92b5d.zip/node_modules/styled-components/",
    "packageDependencies": [
      ["styled-components", "npm:5.3.0"]
    ],
    "linkType": "SOFT",
  }]
]]
 
즉 pnp 방식의 장점으로는 다음과 같다.
  • 효율적인 의존성 검색
  • 엄격한 의존성 관리
  • CI 시간 단축 (yarn zero install로 인해서)
 
출처: https://velog.io/@altmshfkgudtjr/yarn2와-함께-Plug-n-Play를-적용해보자
출처: 패스트캠퍼스 강의

패키지 매니저 yarn berry 사용하기

전체적으로 다음 단계이다.
  1. yarn berry
  1. node linker 설정
  1. yarn install
  1. yarn berry와 IDE 통합
  1. yarn dlx @yarnpkg/sdks vscode
 

yarn berry

다음 순서를 따른다.
  • 터미널에 입력
yarn create react-app my-foler --template typescript
  • node_modules 삭제 후 터미널에 입력
yarn set version berry
.yarn/releases 파일 및 .yarnrc.yml 파일이 생성된다.
notion image

node linker 설정

  • .yarnrc.yml 파일에 nodeLinker:pnp 를 추가해준다
    • pnp방식으로 사용한다고 프로젝트가 이해하게 된다. 
yarnPath: .yarn/releases/yarn-4.2.2.cjs
nodeLinker: pnp # 추가
 

yarn install

  • 터미널에 yarn install 입력
yarn install

yarn berry와 IDE 통합

  • vscode 마켓에서 zipFS 플러그인 설치
    • vscode는 zip파일을 해석할 줄 모르기 때문에 .tsx파일을 열면 빨간줄 그어져있음
 

yarn dlx @yarnpkg/sdks vscode

  • 터미널에 다음을 입력
yarn dlx @yarnpkg/sdks vscode
  • 다음 폴더와 파일이 뜬다.
      • notion image
여기서 settings.json 부분을 보면 이렇게 설정되어있다.
{
  "search.exclude": {
    "**/.yarn": true,
    "**/.pnp.*": true
  },
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}
typescript.tsdk부분이 의미하는 바는 .yarn에있는 타입스크립트를 읽어오겠다는 의미이다.
 
여기까지의 과정을 거치면 App.tsx파일에 빨간줄이 사라졌을거임

yarn zero install

yarn의 zero install을 사용할 때 gitignore에 포함시켜야하는 파일들이있다.
자세한 사항은 yarm pkg 에서 확인 가능함 
# yarn zero install
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
 

test 파일 에러 해결하기

notion image
위의 사진과 같이 test파일에 에러가 나있다. 해결해보자.
 
터미널에 다음과 같이 입력하면 에러가 사라지는것 볼 수 있다.
yarn remove @testing-library/jest-dom
yarn add -D @types/testing-library__jest-dom @testing-library/jest-dom
 

댓글

guest