Vite로 React 개발 환경 만들기 : 프로젝트 생성부터 빌드까지

 

Node.js 설치

 

Vite를 사용하기 위해서는 먼저 Node.js가 설치되어 있어야 한다.

1. nodejs.org에서 LTS 버전 다운로드 및 설치
2. 설치 후 터미널(또는 명령 프롬프트)에서 버전 확인

node -v
npm -v

 

 

 

 Vite로 React 프로젝트 생성

 

원하는 작업 폴더에서 터미널을 열고, 아래 명령어를 실행

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

• my-vite-app : 생성할 프로젝트 폴더 이름 (원하는 이름으로 변경 가능)
• --template react : React 템플릿을 사용하겠다는 의미 (TypeScript를 사용하고 싶다면 --template react-ts도 가능)

 

 

프로젝트 폴더로 이동 & 패키지 설치

 

cd my-vite-app
npm install

→ package.json에 정의된 React, React DOM, Vite 등 의존성들이 설치된다.

 

 

 

개발 서버 실행하기

// 실행코드
npm run dev

 

#성공시 나오는 화면 → 보이는 주소로 접속 가능

 

# 접속 후 보이는 화면

 

 

 

Vite React 프로젝트 구조 이해하기

my-vite-app/
├─ index.html
├─ vite.config.js
├─ src/
│  ├─ main.jsx
│  └─ App.jsx
└─ package.json

 

• index.html
  • 앱의 진입점이 되는 HTML 파일
  • root 역할을 하는 DOM 요소가 포함되어 있으며,
  • 여기에서 src/main.jsx를 불러온다.
• src/main.jsx
  • React 앱의 진입점(Entry Point)
  • ReactDOM.createRoot를 통해 App 컴포넌트를 index.html의 DOM에 마운트한다.
• src/App.jsx
  • 실제로 화면에 렌더링되는 첫 번째 React 컴포넌트
  • 이 파일에서 컴포넌트들을 가져와 조합하며 UI를 구성한다.
• vite.config.js
  • Vite 설정 파일
  • 개발 서버 포트 변경, 플러그인 추가, 별칭(alias) 설정 등을 할 때 사용한다.

 

실행 흐름 이해하기

Vite + React 앱이 동작하는 기본 흐름

브라우저 접속
→ Vite 개발 서버
→ index.html
→ <script type="module" src="/src/main.jsx">
→ main.jsx에서 App.jsx 렌더링
→ 화면에 React UI 출력

→ 브라우저는 먼저 index.html을 가져오고, 그 안에서 main.jsx를 모듈로 불러와 React 앱을 시작하는 구조