React Typescript + Yarn Berry + Vite 를 이용한 프로젝트 제작하기

해당 글에서 사용한 버전
node: 21.6.2
yarn: 4.1.1
react : 18.2.0
typescript: 5.2.2
vite: 5.1.6

Vite

Vite(프랑스어로 "빠른"이라는 뜻)은 최신 웹 프로젝트에 더 빠르고 효율적인 개발 환경을 제공하는 것을 목표로 하는 빌드 도구입니다. 이는 두 가지 주요 부분으로 구성됩니다.
예를 들어 매우 빠른 HMR(핫 모듈 교체)과 같이 기본 ES 모듈 에 비해 풍부한 기능 향상을 제공하는 개발 서버입니다 .프로덕션을 위해 고도로 최적화된 정적 자산을 출력하도록 사전 구성된 Rollup 과 코드를 번들로 묶는 빌드 명령입니다 .

 

한마디로 Vite는 아주 빠른속도를 자랑하는 빌드도구이다.

HMR을 사용하기 때문에, 애플리케이션을 끄지 않아도 일부 컨텐츠만 갱신할 수 있게 해준다.

 

Vite로 React-Typescript 프로젝트를 만드는 방법은 아주 간단하다.

// yarn
$ yarn create vite

// npm
$ npm create vite@latest

// pnpm
$ pnpm create vite

 

터미널에 명령어를 실행해주면 어떤 프레임워크를 사용할 것인지, 어떤 언어를 사용할 것인지, 프로젝트의 이름은 무엇인지 선택하는 화면이 나오게 된다.

 

위와 같이 선택해서 사용하는 방식이 있고, 뒤에 프로젝트이름과 템플릿을 선택해서 생성하는 방법이 있다.

이번 프로젝트 생성은 후자의 방법을 사용하도록 하겠다

yarn create vite 프로젝트명 --template react-ts

 

이후 react ts를 사용하는 아래와 같은 폴더 구조를 갖는 vite프로젝트가 생성되게 된다.

 

이러면 vite를 이용한 react프로젝트 제작은 끝난셈이다. 

하지만 우리는 Yarn Berry를 적용할 예정이기 때문에 추가로 설정해야 할 것들이 남아있다.

 

터미널을 열고 yarn의 버전을 berry로 설정한다.

이후 yarn install을 입력하게 되면 자동으로 berry의 세팅에 맞춰 모듈 설치를 시작한다.

// yarn의 버전을 berry로 설정
yarn set version berry

// 패키지 설치
yarn install

yarn set version berry 실행 후

간혹, yarn의 버전이 제대로 적용되지 않는 경우가 있는데, 그럴 경우 디렉토리의 부모폴더에 package.json이나 다른 yarn version에 대한 세팅이 있지는 않은지 확인해보도록 하자

 

여기까지 완료한 후 폴더구조를 확인하면 .pnp.cjs와 .pnp.loader.mjs가 생성되 것을 볼 수 있다.

.pnp.cjs는 패키지가 설치되어 캐싱되어있는 폴더의 path를 담고있다.

 

yarn 4버전 이상은 zero-install을 지원하지 않는다. 
zero-install 기능을 사용하기 위해서는 .yarnrc.yml에 아래 코드를 추가하기 바란다. yarn 4 version

enableGlobalCache: false​

 

이후 app.tsx파일을 눌러서 확인해보면 코드에 빨갛게 오류들이 떠있는 모습을 볼 수 있다.

Cannot find module 'react' or its corresponding type declarations. ts(2307)

 

해당 에러는, 타입스크립트의 버전이 맞지 않아서 생기는 오류이다

해결하는 방법 다음과 같다.

// 프로젝트에 맞는 타입스크립트 sdk를 사용하기 위해 입력
yarn dlx @yarnpkg/sdks vscode

 

해당 코드를 입력해주면 무언가 설치되는것을 볼 수 있을것이다.

이후 오른쪽 아래 어떤 알림창이 뜨게 되는데, 현재 워크스페이스에 방금 설치한 타입스크립트 버전을 사용하도록 설정하겠냐는 질문이다. 

Allow를 누르면 아래와 같이 빨갛게 모듈을 인식하지 못하던 문제가 해결된 것을 볼 수 있다.

 

이후 리액트를 사용하던 많은 사람들처럼 yarn start를 입력해서 프로젝트를 실행하려고 하면 start라는 스크립트를 찾을 수 없다고 한다. 

실제로 Vite를 통해 생성한 프로젝트는 dev를 통해 빌드까지만 진행을 해준다.

 

yarn start를 통해 알아서 웹페이지를 열어주는 것 까지 실행하기 위해 package.json에 아래와 같이 코드를 추가한다.

기존 package.json

start에 대한 스크립트 추가

이후 start를 실행해보면 웹페이지가 잘 열리는 모습을 확인할 수 있다.

 

 

---

 

 

추가로 발생할 수 있는 오류들

1. 버전 오류

우선 내가 프로젝트 생성을 진행한 버전을 명시한 이유는 다음과 같다.

node의 버전을 20.6.x 로 사용해서 프로젝트를 생성해본 결과, 노드의 버전이 바이트의 최신버전과 호환되지 않아 문제가 발생했다.

 

이땐, 노드의 버전은 LTS버전으로 올린 뒤 다시 실행해보길 바람.

---

2. vite.config.ts에서 발생하는 lint오류

vite.config.ts에서 eslint에 오류가 발생하는 경우가 생길 수 있다.

이는 기존에 tsconfig.json 한가지만 사용하던 방식에서 vite에서 자동으로 생성해주는

tscofing.json, tsconfig.node.json 이 두가지로 분리되는 이슈에 의해 발생한다. 

 

해결법은 .eslintrc.json의 parserOptions에 아래와 같이 project를 수정해주면 된다.

   "project": ["./tsconfig.json","./tsconfig.node.json"]