npm/yarn classic으로 된 기존 프로젝트에 yarn berry 적용기

npm/yarn classic으로 된 기존 프로젝트에 yarn berry 적용기
Photo by William Felker / Unsplash

사전 준비

Installation
Yarn’s in-depth installation guide.
$ corepack enable

$ yarn --version
1.22.19
$ yarn set version berry

...

$ yarn --version
3.2.4

visual studio code 기준

code completion/hinting 을 사용하려면 typescript를 사용하지 않는 프로젝트라도 typescript가 개발/빌드 환경에 존재해야 합니다.

$ yarn add -D typescript

Editor SDKs
An overview of the editor SDKs used to bring PnP compatibility to editors.
ZipFS - a zip file system - Visual Studio Marketplace
Extension for Visual Studio Code - Allows to easily inspect and modify files stored within zip archives.
필수 설치

그리고 eslint, prettier, typescript 등을 지원하는 IDE tools가 workspace에서 작동되려면 아래 명령이 필요합니다.

$ yarn dlx @yarnpkg/sdks vscode

.gitignore 설정은 아래 참고하세요.

Questions & Answers
A list of answers to commonly asked questions.

[Yarn berry] pnp(Plug And Play), Zero Install을 위한 Dependency 문제 해결하기
이번에 프로젝트 빌드 환경을 개선시키기 위해 Zero install을 적용시키려고 한다. yarn berry 환경 세팅까지는 수월했으나, PnP(Plug In Play)을 통해 Zero install을 하려고 하니 Yarn에 대한 개념이 꽤나 필요했다. 그래서 이번에 Yarn Berry의 핵심 기능인 Plug In Play가 무엇인지 간단히 설명해보고, PnP를 통해 Zero Install을 하기 위해 우리가 해결해야 할 문제가 무엇인지 설명해 보려고 한다. Zero Install Zero Install은 말 그대로 설치를 하지 않…

아래 두 가지 라이브러리 내부의 의존성끼리의 참조 문제가 발생할 경우 해결이 필요합니다. (위 문서 참조)

$ yarn install
...
➤ YN0002: │ ProjectName@workspace:. doesn't provide react-is (p66f35), requested by styled-components
오류 1
packageExtensions:
  'styled-components@*':
    dependencies:
      'react-is': '*'
해결 1 (.yarnrc.yml)
$ yarn install
...
➤ YN0060: │ ProjectName@workspace:. provides react (p4924e) with version 18.2.0, which doesn't satisfy what react-files requests
➤ YN0060: │ ProjectName@workspace:. provides react-dom (p107e0) with version 18.2.0, which doesn't satisfy what react-files requests
오류 2
{
  ...
  "peerDependencies": {
    "react": "*",
    "react-dom": "*"
  }
}
해결 2 (package.json)