yarn berry 사용하기

☁️환경 ☁️

• Next.js
• TypeScript
• Eslint(prettier)
• yarn berry(pnp)
• emotion

 

 

❓ yarn berry

yarn 패키지 매니저의 새로운 버전으로 이전버전과는 구조적으로 변화와 새로운 기능을 도입.

 

• TypeScript로 작성되어 타입 체크가 되어있다.
• Table 구조로 되어있을 뿐 아니라 json 데이터 타입을 사용하기 때문에 메모리 내의 연산이 이러어저 좋은 성능을 보여준다.
• Plug n Play : 기존의 로컬 node_module 폴더 대신 패키지를 캐시 폴더에 저장하고, .pnp.cjs파일에 의존성을 찾을 수 있는 정보가 기록된다. 
•  

1. 설치하기

설치 명령어

yarn set version berry​

 

2. .yarnrc.yml 설정하기

아래 코드 추가하기

nodeLinker: pnp

yarn에서 사용하는 설정 옵션 중 하나로, yarn의 패키지 관리방식을 지정하는 것 이다. 
pnp는 Plug n Play 의 약자로,
기존의 "node_modules" 폴더 방식 대신에 보다 효율적인 패키지 관리 방식을 제공해준다.

🍀장점
● 효율성
- "node_modules" 폴더를 생성하지 않고 패키지 간의 의존성을 가상의 링크를 생성해 관리한다.
   (디스크 사용량↓ 설치속도↑)

● 격리성
- 각 패키지는 오로지 명시적으로 선언된 의존성만 접근 할 수 있다.(의존성 충돌, 미선언 의존성 버그 방지)

 

3. yarn 설치

설치 명령어

 yarn install​

 

설치를 하는 이유는 .yarnrc.yml 파일에 설정한 pnp 방식대로 module을 설치한다.

 

4. 패키지를 올바르게 인식하고 관리할 수 있도록 하기

설치 명령어

yarn dlx @yarnpkg/sdks vscode​

 

node_modules 구조를 사요하지 않기 때문에 일부 IDE나 편집기는 프로젝트의 의존성을 제대로 인식하지 못할 수 있기 때문에 @yarnpkg/sdks패키지를 이용해 yarn pnp 프로젝트의 구조와 의존성을 도와줄 수 있다.


그리고 아무 타입스크립트 파일에 들어가면 아래 이미지와 같이 버전 허용에 대한 내용이 뜨는데 Allow를 눌러주자

그리고 아래 extention을 설치해주자

ZipFS는 vscode에서 zip 아카이브에서 직접 파일을 읽을 수 있도록 도와준다.
yarn에서는 패키지들이 압축되어져 있는 상태이기 때문에 vscode에서 참조하기 위해서는 ZipFS가 필요하다.

 

5. gitignore에 코드 추가하기

# yarn
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

 

 prettier 설정하기(위 내용과 이어서 진행) 

1. prettier 설정해주기

설치명령어

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier​

 

2. .eslintrc.json 에 prettier 설정해주기

.eslintrc.json에 아래 코드 복붙

{
  "extends": ["next/core-web-vitals", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

 

3. prettier 규칙 설정해주기

가장 최상위에 .prettierrc 파일 생성 후 아래 코드 붙여넣어주기

{
	"useTabs": false,
	"printWidth": 80,
	"tabWidth": 2,
	"singleQuote": true,
	"trailingComma": "all",
	"endOfLine": "lf",
	"semi": false,
	"arrowParens": "always"
}​

 

4. eslint와 prettier가 정상작동 할 수 있도록 경로 맞춰주기

터미널에 아래 명령어 실행하기

yarn dlx @yarnpkg/sdks vscode​

 

5. ⭐`yarn build` 명령어를 이용해 초기셋팅이 잘 되었는지 확인하기⭐

 

 

⛑️ yarn 1.22로 다운그레이 하는 방법

아래 순서대로 진행

- 설정된 berry버전을 해제하고 classic 버전으로 돌아가기

yarn set version classic​

- 특정 버전으로 설정

yarn policies set-version 1.22.5

- 설치된 버전 확인하기

yarn --version