[React] CRA 대신 Vite 로 프로젝트 세팅

Vite 사용 이유

Vite 란 무엇일까?

 

Vite
빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구

• 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공
• 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다.
  이는 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정을 제공

[출처] Vite 공식 문서

Vite

 

Create-React-App 단점

우리가 기본적으로 React 프로젝트를 만들 때, Create-React-App(일명 CRA)를 사용한다.
CRA에는 다음과 같은 단점들이 있다.

 

1. node_modules 용량 큼

CRA로 만든 프로젝트에는 node_modules 라는 폴더를 보면 엄청나게 많은 폴더와 파일이 있는 것을 볼 수 있다. 이는 엄청난 용량을 차지한다.

 

2. bundling 느림

CRA는 Webpack을 사용하는데 이는 라이브러리가 많으면 번들링이 오래 걸린다.

 

Vite 빠른 이유

CRA의 문제점을 해결하기 위해 속도가 더 빠른 Vite 를 사용한다.
더 빠른 이유는 다음과 같다

 

Esbuild(속도가 빠른 빌드툴) 사용

• 미리 bundle 만듦
• 필요한 소스코드만 건드림

=> 결론: CRA 보다 빠르다!

 

Vite 사용 방법

Vite 설치하기

터미널 창에 본인이 사용하는 패키지 매니저에 따라 Vite 를 설치한다. 나는 npm 을 사용하였다.

npm create vite@latest

or

yarn create vite

 

본인이 원하는 템플릿을 선택하면 된다.
React 프로젝트를 만들기 위해 React 를 선택했고, 다음으로 사용할 언어와 도구를 묻는다.

 

SWC
Rust 로 작성된 초고속 JavaScript/TypeScript 컴파일러

SWC 는 기존 Babel 과 완전히 호환되지 않을 수도 있지만 매우 빨라 빌드 성능이 좋다고 하여 선택하였다.

 

 

이러한 과정을 넘기고 간단하게 아래 명령어를 사용해 프로젝트를 만들 수 있다.

# npm 7+, '--'를 반드시 붙여주세요
npm create vite@latest vite-project -- --template react-swc-ts

자세한 내용 [공식 문서] 참고

 

Vite 실행하기

프로젝트를 다 생성했으면 프로젝트가 있는 폴더로 이동하고 패키지를 다운로드 받고 실행시키면 된다.

cd vite-project 

npm install

npm run dev

 

터미널창에 적혀있는 Local 주소인 http://localhost:5173/ 에 들어간다.

 

 

들어가면 정상적으로 Vite 로 만든 React 프로젝트가 실행이 되며, 기존 CRA 보다 빠른 것을 확인할 수 있다.

 

+) Vite 에서 경로 별칭 Path Alias 설정

[React] Vite 에서 경로 별칭 Path Alias 설정