[yarn] yarn + typescript + react

 

yarn v3가 좋다는 말을 주변에서 듣고 업그레이드 할까 말까 고민을하다가 새로운 프로젝트에 한번 적용해보려고한다.

 

토스 기술 블로그에서 기존 npm의 문제점과 yarn berry를 도입한 이야기에 대해서 잘 정리 해놓았으니 읽어보자.

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

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

 

yarn berry는 npm과 100% 호환되는 yarn classic과는 다르게 Plug’n’Play (PnP)방식을 지원한다.

yarn berry는 node_modules를 생성하지 않고 .yarn/cache 디렉토리에 의존성의 정보가 저장되고, .pnp.cjs 파일에 의존성을 찾을 수 있는 정보가 기록된다.

.pnp.cjs를 이용하면 디스크 I/O 없이 어떤 패키지가 어떤 라이브러리에 의존하는지, 각 라이브러리는 어디있는지 알 수 있다.

 

 

기존의 프로젝트는 yarn v1을 사용하고 있었다.

(기존 프로젝트에서 오류가 난다면 바로 되돌릴거야..)

 

만약 yarn이 설치되어 있지 않다면 yarn을 설치

npm i -g yarn@latest

 

 

CRA

npx를 이용한 설치

npx create-react-app test-proj --template typescript 
cd test-proj

 

yarn berry는 node_module을 사용하지 않고 npm을 사용하지 않기 때문에 아래 두 파일을 지워주자.

rm -rf node_modules package.lock.json

 

yarn을 이용한 설치

처음부터 yarn berry를 사용해서 cra를 하기 위해서는 yarn berry가 설치되어 있어야한다.

yarn dlx create-react-app test-proj --template typescript

 

 

yarn berry 버전으로 변경해준다.

yarn set version berry

만약 yarn 버전을 되돌리고 싶다면

yarn set version classic

# or

yarn set version 1.22.19

내가 최근까지 사용하던 버전은 1.22.19인데 classic으로 변경하니 이상한 버전이 나왔다.

 

불안해서 그냥 이전에 쓰던 버전을 직접 입력해줬다.

 

그런다음 yarn --version을 입력하면 바뀌어있는 버전을 확인할 수 있다.

 

설정이 완료됐으면 yarn or yarn install을 해주자.

 

yarn berry를 위한 vscode 구성

yarn berry는 PnP 기능을 통해서 의존성을 관리한다. 따라서 node_modules를 이용할 때 처럼 라이브러리 구현이나 타입을 확인 하기 위해 node_module안에 있는 라이브러리 파일을 열어볼 수 없다.

이를 해결하기위해  zipfs vscode Extension이 존재한다.

 

vscode에 zpifs 확장을 설치해주자.

 

Typescript를 위한 구성

yarn berry의 PnP 기능을 사용할 때에는 Typescript가 정상적으로 작동하도록 추가적인 구성이 필요하다. 안전상의 이유로 vscode에서는 Typescript 설정을 명시적으로 활성화 해야 하고, yarn 측에서는 해당 sdk를 배포하고 있다.

yarn dlx @yarnpkg/sdks vscode

선택적으로 typescript를 이용하기 위해 별도의 타입 정의를 설치해줘야 하는 작업을 자동화 해주는 플러그인을 설치할 수 있다.

yarn plugin import typescript

그런 다음 vscode에서 typescript 파일을 연 상태에서 'cmd + shift + p' or 'ctrl + shift + p' -> 'Typescript 버전 선택'을 검색하여 '작업 영역 버전 사용'을 선택하여 typescript sdk를 사용하도록 설정해준다.