---

이전 포스팅을 통해 npm, yarn의 차이점과 Yarn Berry가 등장하게 된 배경을 소개했습니다.

이어서 본 포스팅에서는 Yarn berry 환경으로 React, TypeScript 프로젝트를 세팅하는 방법에 대해서 소개하겠습니다.

1. Create React App + Typescript

React 프로젝트의 복잡한 세팅 과정을 생략하고자 Create React App을 활용하여 프로젝트를 생성합니다.

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

2. node_modules, yarn.lock 파일 삭제

CRA(Create React App)를 통해 자동으로 생성된 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. 타입스크립트 플러그인

TypeScript 플러그인을 Import합니다.

yarn plugin import typescript

이 플러그인은 자체 types를 포함하지 않는 패키지를 추가할 때 @types/ 패키지를 package.json폴더에 종속성으로 자동으로 추가합니다.

해당 과정을 생략해도 상관 없지만 편하고 유용한 부분이 많아 설치를 권장합니다.

6. VSCode 설정

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

먼저 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 사용여부에 따라 두 가지 선택지가 존재합니다.

zero install은 앞선 포스팅에서 설명했듯 패키지 파일들을 모두 git에서 형상관리 하여 jenkins 같은 툴을 사용하여 배포시 배포시간을 단축하는 방법입니다.

패키지 파일들이 모두 형상관리 되기 때문에 git clone을 한 시점에 의존성 패키지들이 모두 설치되고 배포시간이 극단적으로 단축됩니다.

아래와 같이 .gitignore 파일에 추가합니다.

zero install 사용

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

zero install 미사용

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

해당 단계까지 마무리하면 세팅이 완료됩니다.

이제 yarn start 명령어를 통해 정상적으로 실행되는지를 확인합니다.

---

참고 자료

node_modules로부터 우리를 구원해 줄 Yarn Berry
Yarn berry에서 React + Jest + Cypress + TypeScript + Github Actions CI/CD를 세팅해보자