Yarn berry (yarn pnp) 환경으로 React + Typescript 프로젝트 세팅하기

Yarn Berry

들어가며

Yarn berry (yarn pnp)에 대해 알게 되어 리액트 프로젝트를 yarn berry 환경으로 세팅해보게 되었습니다. 이 과정에서 여러가지 삽질을 하게 되었는데, yarn berry를 이용하여 리액트 프로젝트를 세팅하고자 하는 분들에게 도움이 되고자 세팅 방법을 공유하고자 합니다. (현 시점 22년 3월 1일 기준으로는 잘 동작합니다 ㅎ;)

문서 하단에 해당 환경으로 세팅 할 수 있는 쉘 스크립트도 공유 드렸으니, 해당 쉘 스크립트를 복사해서 사용하셔도 좋습니다.

 

Yarn Berry란?

yarn berry는 node_modules 사용 시 생기는 여러가지 문제점 (비효율적인 의존성 검색, 비효율적인 설치, Phantom dependency 등) 을 PnP(Plug n Play) 방식으로 개선한 새로운 패키지 관리 시스템입니다. 

패키지 파일을 압축하기 때문에 프로젝트 용량도 줄어들고, 해당 압축 된 패키지들을 git에 그대로 업로드하는 방법(zero install) 을 이용하여 배포 시간을 엄청나게 단축(패키지 인스톨하는 시간)할 수 있는 장점이 있습니다. 

이 문서는 Yarn Berry에 대한 설명보다는 프로젝트 세팅에 초점이 맞춰져 있기 때문에 Yarn Berry에 대한 자세한 내용은 다른 좋은 문서들을 참고해보시면 좋을 것 같습니다. 

아래는 토스 기술 블로그의 아티클인데 잘 정리되어 있어 공유 드립니다.

https://toss.tech/article/node-modules-and-yarn-berry

node_modules로부터 우리를 구원해 줄 Yarn Berry

 

세팅을 해봅시다.

1. Create React App + Typescript

리액트 프로젝트를 하나 하나 세팅 할 수도 있지만 귀찮기 때문에 Create React App을 활용합니다. (여기서는 my-app이란 프로젝트로 생성하겠습니다.)

yarn create react-app my-app --template typescript

2. node_modules와 yarn.lock 파일 삭제

CRA를 사용했기 때문에 모든 패키지가 설치되어 있습니다. node_modules를 삭제하고 yarn.lock 파일도 삭제해주세요.

rm -rf node_modules
rm -rf yarn.lock

npm 을 사용하여 package-lock.json 파일이 있다면 이 파일을 삭제해주세요.

 

3. Yarn 버전 세팅

Yarn 버전을 berry 로 세팅해줍니다. 

yarn set version berry

명령어를 입력하고 나면 .yarn 디렉토리와 .yarnrc.yml 파일이 생성됩니다.

 

4. 패키지 설치

yarn 혹은 yarn install 명령어로 패키지를 설치해줍니다.

yarn

설치를 하고 나면 기존과는 다르게 node_modules 디렉토리가 생기지 않고, 패키지들은 모두 .yarn/cache 안에 zip 파일로 설치된 것을 볼 수 있습니다.

 

5. 타입스크립트 플러그인 

타입스크립트 플러그인을 Import 해줍니다. 이 플러그인은 자체 types를 포함하지 않는 패키지를 추가할 때 @types/ 패키지를 package.json폴더에 종속성으로 자동으로 추가해줍니다. 설치 하지 않아도 상관 없지만 설치하면 편하고 유용하기 때문에 설치해줍니다.

yarn plugin import typescript

 

6. VSCode 설정

VSCode에서 해당 프로젝트를 편집할 때 정상적으로 로드하기 위해 확장프로그램과 SDK 설치가 필요합니다. 

먼저 ZipFS 라는 확장 프로그램을 설치해줍니다.

ZipFS

필수는 아니지만 압축되어있는 패키지의 코드를 살펴보기 위해 해당 확장 프로그램이 필요합니다.

그리고 아래 명령어를 입력하여 sdk 를 설치해줍니다.

yarn dlx @yarnpkg/sdks vscode

그리고 아래와 같은 메시지가 뜨면 Allow를 눌러줍니다.

 

7. jest-dom 재설치

여기까지 진행하고 yarn start 를 하면 테스트 파일에서 에러가 나는데요. 이 경우 jest-dom을 재설치 해주면 해결됩니다. 

yarn remove @testing-library/jest-dom
yarn add -D @testing-library/jest-dom

8. gitignore 세팅

마지막으로는 .gitignore 파일 세팅이 남았는데요. 두 가지 선택지가 있습니다. 바로 zero install을 사용할 것이냐 사용하지 않을 것이냐 입니다. 제로 인스톨은 패키지 파일들을 모두 git에서 형상관리를 해서 jenkins 같은 툴을 이용하여 배포를 할 때 배포시간을 단축하는 방법입니다. 패키지 파일들이 모두 형상관리 되기 때문에 git clone을 한 시점에 의존성 패키지들이 모두 설치되고 배포시간이 극단적으로 단축됩니다. 아래와 같이 .gitignore 파일에 추가해주세요.

 

• 제로 인스톨 사용 시

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

• 제로 인스톨 미사용 시

.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

 

세팅이 완료되었습니다! yarn start를 해서 정상적으로 실행되는 지 확인해보시면 됩니다.

 

마치며 (스크립트 공유)

프로젝트 세팅을 할 때 새로운 환경을 적용하게 되면 항상 삽질을 한 번씩은 하게 되는 것 같습니다. 저 같은 경우에는 한 번 했던 삽질을 하지 않기 위해 이런 기록도 기록이지만 세팅하는 과정을 쉘 스크립트로 작성해놓고 사용하는 것도 좋은 방법인 것 같습니다. 위 과정을 쉘 스크립트로 작성한 github 링크를 공유 드리니 해당 스크립트를 사용하시는 것도 좋을 것 같습니다.

 

• GitHub 링크

https://github.com/yeo311/create-react-app-with-yarn-berry 

GitHub - yeo311/create-react-app-with-yarn-berry: create react app with yarn berry. (with typescript)

https://github.com/yeo311/create-react-app-with-yarn-berry/blob/main/create-react-app-with-yarn-berry.sh

GitHub - yeo311/create-react-app-with-yarn-berry: create react app with yarn berry. (with typescript)

 

참조 문서

https://toss.tech/article/node-modules-and-yarn-berry

https://haranglog.tistory.com/28