[React] yarn berry를 이용한 프로젝트 초기세팅 방법

1. 리액트 프로젝트 생성하기(CRA)

타입스크립트를 사용하는 경우, 뒤에 --template typescript 를 추가로 붙여주면 된다.

// yarn을 사용할 경우
yarn create react-app 프로젝트이름

// npm 5.2이상일 경우
npx create-react-app 프로젝트이름

// npm 5.1 이하인 경우(비추천)
npm install -g create-react-app
create-react-app 프로젝트이름

 

2.  Yarn Berry 적용하기

프로젝트를 생성하고 나면 기본적으로 node_modules와 yarn.lock(package.lock.json)이 생성된 프로젝트가 만들어진다.

yarn berry를 사용하기 위해서는, node_modules와 yarn.lock파일을 삭제해 주어야 한다.

 

해당 파일들을 삭제한 뒤, yarn set version berry를 입력하면 해당 프로젝트의 버전이 berry로 적용되며,

 .yarnrc.yml과 .yarn 이라는 파일이 생성되게 된다.

yarn set version berry로 실행하게 되면 yarn 4.1.0으로 버전이 설정되어 캐시폴더를 사용할 수 없어서,
임의로 3.8.0으로 다운하여서 실행하였습니다.

 

이렇게 버전을 바꾸고 yarn install을 입력하게 되면 .pnp.cjs가 패키지의 위치가 저장되고  패키지들이 .yarn/cache폴더안에 압축파일 형태로 저장되게 된다. 

하지만 종종 yarn install을 실행하게 되면 node_modules가 설치되는 모습을 볼 수 있다.

yarnrc파일 내부에 nodeLinker: node-modules로 되어있다면, 해당 내용을 지워주면
node_modules가 계속 생성되는 버그를 없앨 수 있다.

 

이후, 압축파일을 읽어올 수 있도록 확장프로그램을 설치해 주어야한다.

 

 

이후 파일을 눌러서 코드를 확인해보면, 코드에 빨간 밑줄이 그어져 있는것을 볼 수 있다.

 

해당 오류를 해결하기 위해서는 아래의 코드를 실행시켜 프로젝트에 맞는 타입스크립트 버전을 적용해주어야 한다.

yarn dlx @yarnpkg/sdks vscode

 코드를 실행시키면 아래 allow할건지 물어보는 창이 뜨게 되는데, allow를 눌러 적용하거나, 

cmd+shift+p 를 누르고 version을 sdk버전으로 설정해주면 된다.

 

 

그리고 yarn berry의 장점중 하나인 zero-install의 사용여부를 설정하기 위해서 gitnore를 다르게 설정해야한다.

 

zero-install 사용

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

 

zero-inatall 미사용

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

 

 

4.eslint 세팅

현재 진행하는 프로젝트는 eslint를 이용하기 때문에 관련된 설정을 추가로 진행하여야 한다.

 

1. eslint설치 및 실행

// 현재 프로젝트에 eslint 설치
yarn add -D eslint 

// eslint 실행
npx eslint --init

 

위의 과정대로 eslint 설치를 실행하게 되면 몇가지 질문이 뜨게된다.

프로젝트의 세팅에 맞게 선택하게 되면 자동으로 eslint를 설치하고 .eslintrc.json이라는 파일이 생성되게 된다.

 

이후 각 프로젝트의 세팅에 맞춰 추가적인 package와 rules를 설정해주면 eslint의 설정도 완료되게 된다.

 

오류

아래와 같이 Failed to parse source map from ~ 이라는 에러가 발생하게되었다.

해당 오류는 CRA와 Webpack 5버전과의 충돌로 인해 발생한다. 

 

이와 같은 오류를 고치기 위해서는 package.json의 start에 GENERATE_SOURCEMAP=false를 추가해주면 해결된다.