CRA + typescript + yarn berry

오늘의 포스팅은 yarn berry 패키지 매니저를 이용한 프로젝트 설정 방법을 살펴보도록 하겠습니다.

 

yarn berry를 사용한 이유는 npm, yarn classic의 단점을 보완하고 pnp 방식을 이용해 배포할 경우 패키지를 install하는 시간을 줄여 build 시간을 단축시켜주기 때문입니다.

 

1. yarn 설치

npm install --global yarn

yarn --version
// 1.22.17

npm을 이용해 yarn을 global 설치를 합니다.

그 다음, 버전 체크를 통해 yarn 실제로 잘 설치 됐는지 확인합니다.

 

2. yarn을 이용해 typescript CRA 프로젝트 설치

yarn create react-app <프로젝트 명> --template typescript

패키지 매니저를 yarn berry를 사용할 예정이어서 create-react-app을 yarn을 이용해 설치했습니다.

위의 명령어를 실행할 경우 프로젝트 명의 디렉토리가 생성됩니다. 프로젝트 명에 './'을 입력할 경우 현재 위치의 디렉토리에 CRA 프로젝트가 설치됩니다.

 

3. extension 설치 (vscode)

yarn berry를 이용할 경우 ZipFS - azip file system을 설치해야 합니다.

이 extension은 zip 아카이브에서 직접 파일을 읽을 수 있도록 해줍니다.

ZipFS

이 외에 React 프로젝트를 위한 extension을 설치합니다. (eslint, prettier)

 

4. node_modules 삭제

 

5. yarn berry로 버전 업그레이드

yarn set version berry

yarn --version
// 3.3.1

yarn의 버전을 berry로 바꿔줍니다.

yarn의 버전이 3.3.1로 업그레이드 됩니다.

버전이 업그레이드 된다면 .yarn 디렉토리와 .yarnrc.yml 파일이 생깁니다.

만약 .yarnrc.yml에 nodeLinker: node_modules가 있다면 지워줘야 합니다!

 

6. yarn install

yarn install

패키지 의존성을 설치해주면 .pnp.cjs, .pnp.loader.mjs 파일이 추가됩니다.

.pnp.cjs는 패키지 의존성에 대한 정보를 관리해준다.

 

7. yarn berry typescript 설정

Yarn berry의 PnP 기능을 사용할 때, TypeScript가 작동하도록 추가적인 구성이 필요합니다. 안전상의 이유로 VSCode에서는 사용자 지정 TypeScript 설정을 명시적으로 활성화해야 합니다.

yarn dlx @yarnpkg/sdks vscode

위의 명령어를 실행하면 .vscode 디렉토리가 생성되고, 해당 프로젝트에 대한 vscode의 설정이 저장되게 됩니다.

 

8. yarn typescript plugin 설치

yarn plugin import typescript

위의 plugin을 설치하면 패키지를 설치할 경우, 해당 패키지의 '@types/' dev dependency가 자동적으로 설치되게 됩니다.

 

9. workspace 설정

command shift + P 를 누른 뒤, 'select typescript version'을 입력해서 해당 프로젝트의 typescirpt version을 선택해줍니다.

select typescript version

.yarn/sdks/typescript/lib 선택

.yarn/sdks/typescript/lib을 선택해줍니다.

 

 

결론

위와 같은 방법으로 yarn berry를 패키니 매니저로 사용하는 CRA typescript 프로젝트를 만들 수 있습니다!