[React] vite로 react 프로젝트 설치

vite로 react 프로젝트 설치

1. vite란?

빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구이다.
https://vitejs-kr.github.io/
(기본적으로 vite는 Node.js가 설치 되어 있어야 한다. 노드 설치: https://nodejs.org/ko/download/) 

Vite

 

2. Create React App 대신 사용하는 이유

CRA는 Javascript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린 편이다. 코드의 양이 많아질수록 느린 속도를 체감할 수 있다. 위의 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 vite를 사용한다. 
*Esbuild: Go언어로 작성된 Javascript 빌드툴, 속도가 빠름.

3. (초간단) vite로 react 프로젝트 설치

1. npm init vite
     npm init vite를 실행하고, 순차적으로 선택하고 셋팅하면 된다. 

2. 프로젝트 이름 설정
3. 프레임워크 설정 (vanilla, vue, react, preact, lit svelte)
4. variant 설정 (typescript를 선택할 것인지 여부)

 

React framework에 Typescript를 선택했다.

5. cd 프로젝트 이름

6. npm install

7. npm run dev

 

기본으로 설정되어있는 vite-project로 만들어졌기 때문에 vite-project 폴더로 들어가서 npm install을 진행하고, npm run dev로 프로젝트를 실행한다.

8. 위 과정을 거치면 react에 vite 빌드 도구를 활용한 페이지를 확인할 수 있다.