Yarn berry?

제가 Yarn berry(yarn2)를 알게 된건 토스의 채용 공고에서 였습니다

다 한번씩 들어본것들인데 Yarn berry는 처음보는거라 찾아봤는데
생각 이상으로 사용할만한 가치가 충분하더라고요!!

그래서 오늘은 간단하게 소개하고 단점도 알아보고
쉽윈 사용법까지 알려드리겠습니다!

사용이유

일단 소개하기 전에 Yarn berry를 사용하는 이유는 뭘까요?

우리가 javascript로 개발하면서 매번 다운 받는 여러 라이브러리나 프레임워크는
생각보다 큰 용량을 잡아먹습니다.

하지만 Yarn berry를 사용하면 용량이 반의 반으로 엄청나게 줄어듭니다!
실제 비교샷을 보여드리겠습니다

NPM 사용시

Yarn Berry 사용시

사실 용량보다 더 중요한 이유가 많긴 하지만
딥한 부분은 파고들기 귀찮으니 가볍게 이정도만 알아보고 다음으로 넘어가죠

단점

이렇게 좋아보여도 꽤나 큰 단점이 있습니다

1. 처음 해보는 사람에게는 설정이 너무 어렵다

제가 맨 처음에 맨땅에 해딩할때
이유를 알기 힘든 버그가 너무 많이 나더라고요

지금은 다 해결했지만 그때에는 찾아보는데 정말 힘들었죠...
(Ctrl + s 누르면 에러나는 버그도 있었어요 ㅋㅋㅋㅋ)

2. 호환이 안되는 부분이 너무 많다

사실상 모든 곳에서 호환이 깔끔하게 안된다고 보면 됩니다
뭐만하면 추가 설정 해줘야 하는부분이 많습니다

제가 React만 쓰다보니 React에서 생기는 버그만 아는데
Vue에서도 버그가 많이 생기는것같더라고요

하지만 React에서 생기는 버그는 제가 다 해결법을 알려드릴테니 걱정마세요!

손쉬운 사용법

자 이제 위에서 말씀드린 단점을 해결해줄 명령어를 알려드리겠습니다!

아래 명령어만 복붙하면 바로 사용해볼 수 있습니다!

CMD용 명령어
set savedir=%cd% && cd C:\Users\%username% && del .yarn yarn.lock package.json && cd %savedir% && del /p yarn.lock .yarnrc.yml package-lock.json && npm install -g yarn && yarn set version berry && yarn install && yarn add react-is && yarn add @yarnpkg/sdks -D && yarn dlx @yarnpkg/sdks vscode

Bash용 명령어
cd $HOME && cd - && rm -f yarn.lock .yarnrc.yml package-lock.json && npm install -g yarn && yarn set version berry && yarn install && yarn add react-is && yarn add @yarnpkg/sdks -D && yarn dlx @yarnpkg/sdks vscode

간단하게 명령어를 설명드리면
먼저 home 디랙토리에있는 몇몇 파일을 제거 해줘야 합니다
이게 있으면 오류가 생기더라고요

그리고 Yarn을 최신 버전으로 업데이트하고
yarn의 버전을 yarn berry용 버전으로 변경합니다

그리고 package.json에 있는 디펜던시를 다운받고
react-is라는 Yarn berry와 React를 호환 해줄수있는 라이브러리를 다운받습니다

그리고 그 뒤에 있는 yarn add @yarnpkg/sdks -D && yarn dlx @yarnpkg/sdks vscode
이 명령어는 javascript라면 실행 해줄 필요가 없는데
typescript가 호환 되도록 해주는 명령어 입니다

이 명령어가 전부 실행하면 무언가를 허용하겠냐는
팝업?이 오른쪽밑에 뜨는데 이걸 Allow 해주면 됩니다

여기까지 똑같이 따라해주면 오류없이 Yarn berry를 사용해볼수있습니다

마무리

여기까지 Yarn berry에 대해 말씀드렸는데

솔찍히 사용해보면서 느낀게 npm보다 빠르고
무게도 가벼워서 관리도 편하고 등등..

꽤나 편리한 부분이 많습니다

큰 단점이였던 부분도 해결법을 만들었으니
다들 한번 사용해보시는걸 추천드립니다!

끝까지 봐주셔서 감사합니다!