좌충우돌 yarn berry 도입해보기

🐕 yarn berry

yarn berry, yarn2 , yarn3.~~ 등 여러가지 이름으로 불리지만

결국 다 같은 것을 지칭한다고 볼 수 있습니다.

yarn berry가 왜 좋은지 yarn berry를 왜 사용하는지는 이미 구글에

yarn berry를 검색하는 것만으로도 같은 내용으로 도배되어있는 자료들을 찾아볼 수 있으니

굳이 서술하지는 않겠습니다.

 

yarn berry를 도입하려고 한 이유는 다음과 같습니다.

1. yarn berry의 zero install과 pnp(plug and play)가 너무나도 매력적이었기 때문에

2. npm install의 느린 속도에 진절머리가 나서

3. 조금 오만하지만.. npm은 어느정도 익숙해졌다는 생각이 들어서

4. yarn이 2020년부로 유지보수 모드에 들어가서(몰랐음;)

 

반면 yarn berry의 매력적인 부분을 알고도 시도하지 않은 이유도 당연히 있습니다.

1. 사용자,역사가 npm 만큼 많고 길지 않다보니 레퍼런스를 찾기가 힘들어서

2. 초기 셋팅이 좀.. 귀찮아서(실제로도 이 세팅때문에 크게 고생했음;;)

3. 1과 연계되는 이유로 예상못한 트러블이 발생했을때 잘 고쳐낼 자신이 없어서 

 

실제로도 yarn berry를 시도하자마자 만나는 너무 많은 에러들 때문에

수많은 블로그와 레퍼런스들을 보면서 맞짱 뜬 끝에

보일러플레이트를 간단하게 사용하는 정도까지는 해결할 수 있었습니다.

 

도움이 되었던 레퍼런스들은 아래 레퍼런스에 링크를 걸어두도록할게요

---

👻우선 설치해두어야 할 것

https://yarnpkg.com/getting-started/migration

Migration

yarn 공식 문서에서는 Editor support에 대한 항목이 있습니다.

그냥 vscode 쓸거면 이 아래에 있는거 다 하라는 소리입니다.

먼저 1번 ZipFS vscode extension을 설치할것을 말하고 있습니다.

이거 설치해주시면 됩니다. extension 설치는 쉬우니까요..

 

2. make sure that typescript , eslint, prettier.... 

이부분은 그리 신경쓰지 않아도 괜찮습니다. 대충 네 extension 설정 파일들이 다 탑레벨에 잘 있는지 확인하라는 뜻

 

3. Run yarn dlx @yarnpkg/sdks vscode

yarn dlx @yarnpkg/sdks vscode

yarn berry로 마이그레이션하려는 프로젝트 경로에서 시도하시면 됩니다

 

4. skip

 

5. For Typescript don't forget to select Use Workspace Version in VSCode

이거 설정 안해주면 TSX 파일에서 무수한 빨강줄 향연을 확인할 수 있습니다.

그리고 제 시간을 잡아먹은 가장 큰 원인 중 하나입니다.

---

🥶 yarn dlx가 무슨 명령어임?

위에서 yarn dlx @yarnpkg/sdks vscode라는 명령어를 이용했습니다.

dlx는 무엇인지.. 초면인데.. 공식문서를 확인해보면

yarn global 대신 사용하라고 권고하고 있는 명령어입니다.

 

시스템에 전역적으로 설치할 필요 없이 패키지 실행파일을 실행할 수 있는 명령이라고하며

yarn global을 사용하여 전역적으로 패키지를 설치하면 버전 충돌 , 다른 시스템에서 프로젝트 환경 재현에 어려움

등의 문제가 발생할 수 있기때문에 yarn global 대신에 쓰라고 추천하는 명령어라고 합니다.

 

대충 취지는 알겠으니 이제 쓰면 되겠네요

---

🌞yarnrc.yml

yarn 1 에서는 .yarnrc를 사용했지만 yarn 2는 .yarnrc.yml로 이름이 변경되었습니다.

변경한 이유는 공식문서에 따르면 프로젝트가 yarn 1을 사용하는지

아니면 yarn 2를 사용하는지 좀 더 쉽게 감지할 수 있고

yarn 1과 yarn 2 프로젝트를 혼합해서 작업할 때 설정을 좀 더 쉽게할 수 있어서 바꿨다고하네요

---

😋변경된 명령어

대체로 큰 결은 비슷한 모습입니다.

upgrade가 up으로 바뀌었고 기존에 그냥 사용하던 명령어들 앞에 npm을 붙여줘야하며

global을 dlx로 대체한 정도가 눈에 띄네요

 

가장 자주 그리고 많이 사용될 것을 보면 yarn create 명령어를 yarn dlx create로 대체하라는 문구입니다.

yarn create도 여전히 동작하기는 하지만 yarn dlx create를 권장하네요

---

🤢실제로 진행해봅시다.

mkdir yarn-berry-project
cd yarn-berry-project

프로젝트폴더를 하나 생성해줬습니다.

yarn --version

버전이 2 이상이 아니라 1.x인 경우엔 yarn 1을 사용중인 것입니다.

이 경우 yarn set version berry 명령어를 통해 버전을 업그레이드해줄 수 있습니다.

yarn set version berry

다시 버전을 확인해줍니다.

현재 기준 저는 3.5.0 버전이 인스톨되었네요

미래에는 더 많은 버전이 나와있겠지만 아무튼 1.x만 아니면 괜찮겠습니다.

명령어 안내에 따라 설치를 진행해주겠습니다.

전 보일러플레이트로 vite을 선택해줄것입니다.

npx dlx create-vite

create뒤에 - 대쉬바를 꼭 붙여줘야 오류가 발생하지 않습니다.

이후 안내에 따라 자신이 원하는대로 프로젝트를 구성해줍니다.

전 Typescript를 사용할 예정이니 Typescript도 설정해주었습니다.

이제 App.tsx를 열어보면 난리가 나 있습니다.

아까 5번에서 말한대로 workspace를 설정해주어야겠습니다.

ctrl + shift + P 명령어를 통해 명령팔레트를 열 수 있습니다.

단축키를 사용하고 싶지 않으신 분의 경우엔

보기(V) -> 명령팔레트를 통해 열어주시면 되겠습니다.

 

그후 select typescript version을 입력하여 설정을 workspace로 바꿔주면 되는데요..

저 같은 경우엔 workspace로 바꾸고싶어도 그 설정창이 나타나질 않습니다.

yarn

우선 설치를 진행하겠습니다.

yarn dlx @yarnpkg/sdks vscode

설치가 완료되면 아까 위에서 확인했던 yarn dlx @yarnpkg/sdks vscode를 실행합니다.

VScode에서는 위 명령어를 실행한 뒤 명시적으로 사용자 지정 TS 설정을 활성화해주어야하기때문에

이런 귀찮은 빨강줄을 봐야하는거네요

여기서 주의할 점이 두가지 있습니다.

1. 경로에 한글이 들어가있으면 오류가 발생할 수 있다.

괴상한 한글이 튀어나오면서 오류가 발생하는 경우 대부분 경로에 포함된 한글 문제입니다.

2. yarn dlx @yarnpkg/sdks vscode를 실행한 뒤 생성된 .yarn/sdks 디렉토리를 실제로 열어볼 것

 

2번은 제 환경에선 매우 중요했습니다.

생성된 sdks 디렉토리를 실제로 열어보기전까지는 workspace 버전 사용 창이 뜨지 않았으며

명령 팔레트에 접근해도 workspace로 설정하는 옵션이 없었기 때문입니다.

sdks 디렉토리를 뒤지다보면 죽어도 안뜨던 저 알림창이 떠줍니다. Allow를 눌러줍니다.

혹시 알림을 놓쳤다면 명령팔레트에 접근하여

select typescript version을 workspace로 설정해주면 되겠습니다.

 

요약하자면 다음과 같습니다.

yarn 버전이 이미 berry라는 가정하에서

yarn dlx create-vite
cd 프로젝트명
yarn
yarn dlx @yarnpkg/sdks vscode

위와 같은 순서로 실행해주고 ts의 경우

.yarn/sdks 디렉토리를 방문하면서 체크해주면 되겠습니다.

---

🤮 종속성 관련 명령어 모음

https://yarnpkg.com/getting-started/usage

Usage

위 링크에서 참고할 수 있습니다.

---

🐶마치며

정말 죽고싶었지만 어찌어찌 하다보니 되긴하네요..

다음 목표는 모노레포 구성해보기입니다.

https://haranglog.tistory.com/28

Yarn berry에서 React + Jest + Cypress + TypeScript + Github Actions CI/CD를 세팅해보자

https://helloinyong.tistory.com/341

[Yarn berry] pnp(Plug And Play), Zero Install을 위한 Dependency 문제 해결하기

 

https://ahnanne.tistory.com/95

vite + yarn berry(pnp) 사용할 때 node_modules가 생긴다!?

https://learn-dev.tistory.com/9

cra + typescript + yarn berry 세팅

https://yceffort.kr/2022/05/npm-vs-yarn-vs-pnpm

Home

https://elvanov.com/2664

VScode + yarn 2 + Monorepo + TypeScript 프로젝트 세팅 – Under The Pencil

---

이해했다고 생각할 때가 가장 무서울 때다.