Development/React
[React] vite로 react 프로젝트 설치
대범하게
2023. 4. 5. 23:59
반응형
vite로 react 프로젝트 설치
1. vite란?
빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구이다.
https://vitejs-kr.github.io/
(기본적으로 vite는 Node.js가 설치 되어 있어야 한다. 노드 설치: https://nodejs.org/ko/download/)
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를 선택할 것인지 여부)
5. cd 프로젝트 이름
6. npm install
7. npm run dev
8. 위 과정을 거치면 react에 vite 빌드 도구를 활용한 페이지를 확인할 수 있다.
* 추가적으로 ESLint, Prettier를 설정해볼 수 있다.