yarn berry3 으로 React + typscript 프로젝트 세팅하기
npm? yarn?
npm과 yarn모두 node환경에서 자바스크립트 패키지를 관리해주는 도구이다.
yarn은 기존 npm의 단점이였던 속도, 안정성, 보안성 등을 보완하여 facebook에서 출시했다.
의존성파일을 순차적으로 설치하던 npm과 달리 yarn은 병렬적 설치를 진행해서 설치와 빌드 속도를 높였고
yarn.lock 을 통해 의존성트리를 고정시켰다.
현재는 npm도 몇차례의 업데이트를 통해 이러한 단점들을 보완한 상태이다.
하지만 yarn도 업데이트를 하며 이전보다 더 개선된 기능들이 추가되었다.
pnp 전략을 도입하면서 node_modules 없이 의존성 관리를 zip파일로 할 수 있게 되었고,
의존성을 버전관리에도 포함시킬 수 있게 되면서 저장소를 복제 해온 뒤에 의존성을 설치할 필요가 없어졌다.
나는 지금 컴퓨터용량이 포화상태인지라.. node_modules 없이도 작은 용량으로 프로젝트를 생성할 수 있다는 말에
yarn berry를 사용해보기로 했다.!!
yarn berry는 현재 3버전까지 업데이트 되어있는 상태이다.
0. yarn 설치 (기존에 설치되어있다면 필요X)
npm install -g yarn@latest
1. CRA + typescript 프로젝트 설치
yarn create react-app <프로젝트명> --template typescript
** 또는 npx create-react-app <프로젝트명> --template typescript 한 뒤,
node_module 폴더와 package.lock.json 파일을 지우는 방법도 있다.
* 기존의 프로젝트에 타입스트립트 추가하는 경우
yarn add typescript @types/node @types/react @types/react-dom @types/jest
추가 후, 기존의 파일들 확장자 ts 또는 tsx로 변경
2. yarn berry 세팅
yarn set version berry
명령어 적용 후, yarnrc.yml과 .yarn/releases/yarn-berry.jsyarn-(버전명).cjs 생성됨
yarn unstall 또는 yarn
3. .gitignore 에 추가
### yarn ###
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
4. ZipFS 설치하기(vscode extension)
zip아카이브를 확인해서 필요한 의존성을 찾을 수 있도록 해준다.
3.Typescript를 위한 설정(1) - VSCode SDK
yarn dlx @yarnpkg/sdks vscode
설치 된 후 뜨는 알림창에 '허용' 선택
(자동으로 뜨지 않으면, vscode 재시작 또는)
1) ctrl + shift + p
2) "typescript 버전 선택" 검색
3) 작업 영역 버전 사용 선택
4.Typescript를 위한 설정(2) - Typescript Plugin 설치
패키지를 설치할 때 @types/* 패키지를 자동으로 찾아주는 플러그인
yarn plugin import typescript
추가 오류
-styled-components & react-is 오류
-node_modules 자동생성
-기타