[React] vite를 이용하여 프로젝트 시작하기

Vite를 이용해서 React 프로젝트를 시작하는 예시입니다.

 

Vite 이란?

Vite은 한마디로 웹 빌드 툴입니다. 아래 링크에서 자세한 내용을 확인할 수 있습니다.

Vite | Next Generation Frontend Tooling

 

Vite을 사용하면, 빠른 HMR이 지원되어 변경한 코드를 바로 확인할 수 있으며, 운영환경에 배포될 에셋들을 최적화시킬 수 있습니다. Vite은 frontend framework 를 관리해주는 빌드 툴이라고 생각하면 될거 같습니다.

Vite은 react 뿐 아니라 vanilla, vue 등의 template도 지원합니다. 여기서는 react에 focus하도록 하겠습니다.

 

 

React 프로젝트 시작하기

Vite를 이용해서 프로젝트를 시작하려면, node.js 가 설치되어 있어야 합니다. 18이상을 지원한다고 되어 있는데, 저는 LTS 버전인 22버전을 사용했습니다.

 

아래 명령어를 실행합니다.

npm create vite@latest

 

먼저 프로젝트 이름을 지정합니다. 저는 그냥 enter를 입력해서 "vite-project" 라는 이름으로 진행하겠습니다.

 

다음은 framework를 선택합니다. Arrow Key (up, down)을 이용해서 이동가능하고, 여기서는 React를 선택합니다.

 

 

마지막으로 variant를 선택합니다. 저는 TypeScript를 선택했습니다.

 

프로젝트가 생성이 되었습니다.

아래와 같은 메시지가 나올 것입니다.

 

처음에 프로젝트 이름을 vite-project로 지정했기 때문에, 같은 이름으로 프로젝트 폴더가 생성되었습니다.

 

아래 명령으로 프로젝트 폴더로 이동합니다.

cd vite-project

 

그리고, 필요한 모듈을 설치해 줍니다. (npm install 과 같은 명령어 입니다.)

npm i

 

모듈이 설치되면, 아래 명령어로 실행합니다.

npm run dev

 

아래와 비슷한 화면이 나오면서 실행되면 정상입니다.

 

웹 브라우저를 열어서 주소창에 http://localhost:5173 을 입력합니다. 그러면 아래와 같은 기본 웹 앱이 나옵니다.

 

가운데, count is 0 라고 되어 있는 버튼을 누르면 카운트가 올라갑니다.

 

 

vscode 사용하기

vscode 사용자의 경우, vite-project 폴더에서 다음과 같이 입력합니다. 그러면 vscode 프로그램이 현재 프로젝트 폴더를 열어줍니다.

code .

 

아래와 같이 나옵니다.

 

 

이제부터 vscode를 이용하여 프로젝트를 편집할 수 있습니다.