Vite와 pnpm으로 리액트 프로젝트 만들기

현재 CRA(Create React App)는 더 이상 React 프로젝트를 시작하는 데 권장하는 방법이 아니다.

Vite와 PNPM의 조합을 사용하여 리액트 프로젝트 템플릿을 구성해보자.

VITE란?

• Vite는 다른 JavaScript 기반 번들러보다 10~100배 빠르다.
• Go로 작성되었으며 해당 종속성이 esbuild에 사전 번들로 포함되어 있기 때문이다.
• 또한 vite는 소스 코드를 기본 ESM으로 제공하여 개발자 생산성 향상을 위한 주문형 변환 및 로딩을 가능하게 했다.

PNPM이란?

• PNPM은 디스크 공간을 최적화하고 설치 속도를 높이는 npm 및 원사보다 빠른 대안입니다.
• https://pnpm.io/benchmarks 벤치마크 페이지이다.

앱 구축

vite 및 pnpm을 사용하려면 노드 버전 16 이상이 설치되어 있어야 한다.

아래 명령을 실행하여 pnpm을 설치하자.

 

npm i -g pnpm

 

npm을 이용하지 않은 pnpm 설치 방법이다. https://pnpm.io/installation

Installation | pnpm

 

아래 명령어를 통해 vite를 이용해 프로젝트를 설치하자

pnpm create vite <프로젝트 이름>

 

React 프로젝트 이므로 React 선택.

 

TypeScript와 SWC(bable 및 esbuild에 대한 더 빠른 대안인) 옵션을 골라보자.

 

이제 아래명령어를 통해 프로젝트를 실행해보자

pnpm install

pnpm dev