[React] Vite를 사용한 리액트 시작

Vite란?

• Vite는 프랑스어로 빠르다를 의미한다. (필자의 전공 중 하나이기도 하다)
• Vite는 빠르고 간결한 모던 웹 프로젝트 개발에 초점을 맞춰 탄생한 빌드 도구이다.
• Vite를 사용하면 쉽고 빠르고 간결하게 각종 라이브러리(프레임워크) 앱을 시작할 수 있다.
• 기본적으로 기존에 사용하던 creat-react-app으로 생성되는 프로젝트보다 빠르다.

 

지원중인 템플릿

 

JavaScript	TypeScript
vanilla	vanila-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts

 

보다시피 자바스크립트 버전과 타입스크립트 버전 모두 지원하고 있음을 확인 할 수 있다.

 

Vite 프로젝트 시작

 

npm을 이용한다면 아래 명령어로 시작이 가능하다.

npm create vite@latest

그렇다면 추후 앱의 이름과 템플릿을 지정하는 화면이 나온다.

 

혹은 한 번에 템플릿을 지정하며 진행 역시 가능하다.

npm create vite@latest first-react-app -- --template react

 

프로젝트 폴더가 생성되었음을 확인할 수 있다.

 

의존 패키지 설치

이후 생성한 프로젝트 폴더로 이동하여 npm install 명령어를 사용한다.

• cd first-react-app
• npm install

 

실행

아래 명령어를 입력하여 개발 환경으로 리액트 앱을 실행한다.

npm run dev

 

브라우저를 이용해 5173 포트로 접속하면 성공적으로 프로젝트가 시작되었음을 확인 할 수 있다.

 

리액트 시작

 

 

참고자료

https://vitejs-kr.github.io/guide/