[React] 리액트 - Vite로 React 프로젝트 생성 및 빌드 세팅하는 방법

 

Vite는 빠르고 가벼운 프론트엔드 빌드 도구로, 기존의 create-react-app보다 훨씬 빠르게 React 프로젝트를 설정할 수 있다. 

1️⃣ Vite로 React 프로젝트 생성하기

📌Vite 설치 및 프로젝트 생성

Vite를 사용하려면 아래 명령어를 실행

- my-project 는 프로젝트 폴더명이다. 원하는 이름으로 변경

npm create vite@latest my-project --template react

 

설치가 완료되면 아래 명령어로 프로젝트 폴더로 이동한다.

cd my-project

 

📌 의존성 설치

설치가 끝나면 Vite 개발 서버를 실행할 준비가 완료된다.

npm install

 

2️⃣ 개발 서버 실행하기

Vite의 가장 큰 장점 중 하나는 빠른 개발 서버 실행 속도이다.(추천 이유)

npm run build

실행하면 터미널에 아래와 같은 메시지가 표시된다.

✔️ local의 http://localhost:5173/ 를 열어 프로젝트를 로컬테스트 할 수 있다.

  VITE v4.0.0  ready in 100ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.0.1:5173/

 

3️⃣ Vite 프로젝트 구조

Vite로 생성된 React 프로젝트의 기본 폴더 구조

✔️ src/ 폴더에서 컴포넌트를 개발

✔️ vite.config.js에서 필요한 설정을 추가하면 된다.

my-project/
│-- node_modules/        # 설치된 패키지 폴더
│-- public/             # 정적 파일 (index.html 포함)
│-- src/                # 주요 React 코드 (컴포넌트 등)
│   │-- App.jsx         # 메인 React 컴포넌트
│   │-- main.jsx        # React DOM 렌더링
│   │-- index.css       # 기본 스타일 파일
│-- .gitignore          # Git에서 제외할 파일 목록
│-- package.json        # 프로젝트 설정 파일
│-- vite.config.js      # Vite 설정 파일

 

4️⃣ Vite 프로젝트 빌드하기

프로젝트 완성 후 빌드하여 배포한다.

✔️ 실행하면 dist/ 폴더가 생성되며, 배포할 준비가 완료된다.

npm run build

아래 명령어로 빌드된 파일을 로컬에서 확인

✔️ http://localhost:3000에서 빌드된 프로젝트를 확인할 수 있다.

npm install -g serve  # serve 패키지 설치
serve -s dist         # 빌드된 파일 실행