yarn berry 프로젝트 생성하기

yarn berry를 사용하는 이유

yarn berry를 사용하는 이유에 대해 알아봤으니

yarn berry를 이용해 프로젝트를 생성해보자.

 

yarn을 global로 설치해준다

npm install -g yarn

 

CRA 기반 프로젝트를 생성해준다.

yarn create react-app <프로적트 폴더명> --template typescript

CRA(보일러 플레이트)기반 타입스크립트 프로젝트를 생성한다.

node_modules 폴더는 필요가 없으니 삭제해주도록한다.

 

yarn berry 버전으로 변경

yarn set version berry

4버전 이상으로 변경되었으면 berry버전으로 변경된게 맞다.

 

.yarnrc.yml 에 pnp 명시

nodeLinker: pnp

위와 같이 작성 후 yarn install 해준다.

 

.yarn 폴더에 cache 폴더가 생성된 것을 확인할 수 있다

 

만약 install 후에 cache 폴더가 생기지 않았다면?

.yarnrc.yml에 파일에 아래 설정을 추가해주자!

enableGlobalCache: false

yarn 버전이 올라가면서 enableGlobalCache 설정의 default값이 true로 바껴서 생긴 이슈라고 한다.

위와 같이 fasle로 설정해주면 cache폴더가 잘 생성된다.

 

tsx 파일을 확인해 보면 왜 빨간줄이 많이 생기지?

tsx파일을 확인해보면 파일이 깨지는 것을 볼 수 있다.

typescript파일도 zip파일로 관리되고있는데 현재 vscode는 zip파일을 읽을 줄 모른다!!

이를 해결하기 위해 ZipFS 플러그인을 설치해준다.

yarn dlx @yarnpkg/sdks vscode

플러그인 설치 후 위의 명령어를 입력해준다.

 

설치 후에는 .vscode라는 폴더가 생성 되고 하단에

이런 팝업이 뜨면 Allow를 클릭해준다.

 

만약 팝업을 놓쳤다면?

일단 아무 tsx 파일을 클릭해서 열어주고

cmd + shift + p 명령어 입력 후 검색창에

> select typeScript version

위와 같이 입력해준다.

Use Workspace Version을 선택해준다.

그럼 워크스페이스 버전에 맞는 타입스크립트 버전을 사용하도록 허용해준 것이다.

 

Zero-install 설정하기

Questions & Answers | Yarn

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

.gitignore 파일에 위의 내용을 추가해준다.

 

App.test.tsx 파일에서 나는 오류 해결하기

yarn remove @testing-library/jest-dom

yarn add -D @types/testing-library__jest-dom @testing-library/jest-dom

@testing-library/jest-dom 해당 라이브러리 삭제 후 다시 설치해준다.

그러면 타입에러가 사라지게된다.