Vite + React 프로젝트 생성부터 구조까지 한눈에 보기

React 프로젝트를 처음 시작할 때 가장 먼저 하는 일은 바로 개발 환경을 세팅하는 것입니다.
최근에는 Webpack보다 더 빠르고 간편한 Vite를 사용하는 경우가 많습니다.

이번 글에서는 Vite를 이용해 React 프로젝트를 생성하는 방법부터 디렉토리 구조와 주요 파일의 역할까지 한눈에 정리해보겠습니다.

---

✅ 1. Vite + React 프로젝트 생성 명령어

터미널을 열고 아래 명령을 입력하세요:

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

my-app은 원하는 프로젝트 이름으로 바꿔도 됩니다.

이후 순서:

cd my-app
npm install
npm run dev

• npm install: 필요한 패키지 설치
• npm run dev: 개발 서버 실행 (기본 주소: http://localhost:5173)

🧱 2. 생성된 디렉토리 구조

프로젝트를 생성하면 아래와 같은 구조가 만들어집니다:

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

각 디렉토리와 파일의 역할을 알아볼까요?

---

🗂️ 3. 주요 파일과 폴더 설명

🔹 index.html

• 실제로 브라우저에 로딩되는 HTML 파일
• 여기서 <div id="root"></div>가 React 앱의 시작점이 됩니다

🔹 package.json

• 프로젝트의 의존성, 스크립트(npm run dev, npm run build 등) 관리
• 설치된 라이브러리 정보도 이 파일에 저장됨

🔹 vite.config.js

• Vite의 설정 파일
• 개발 서버 포트 변경, alias 설정 등 환경 구성을 여기에 작성함

🔹 public/

• 정적 파일 저장소 (이미지, 폰트, favicon 등)
• 이 폴더 안의 파일은 가공 없이 그대로 제공됨

🔹 src/

• 우리가 실제로 작업하는 소스코드 폴더
• 컴포넌트, 스타일, API 등 모든 코드가 이 안에 들어감

🔸 src/main.jsx

• React 앱의 진입점
• App.jsx를 HTML의 #root에 렌더링하는 역할을 함

 

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

 

🔸 src/App.jsx

• 우리가 만드는 첫 React 컴포넌트
• 보통 이곳에서 라우터, 전역 상태관리 등을 설정하게 됩니다

function App() {
  return (
    <div>
      <h1>Hello, React + Vite!</h1>
    </div>
  )
}

export default App

📦 4. 개발 서버 확인

npm run dev

 

위 명령어를 실행한 뒤 브라우저에서 http://localhost:5173을 열면,
“Hello, React + Vite!”라는 문구가 보이면서 성공적으로 개발 환경이 시작된 것을 확인할 수 있습니다.

---

💡 정리하자면

항목	설명
개발 서버 실행	npm run dev
진입점	main.jsx → App.jsx → index.html의 #root
구성 요소	public, src, vite.config.js, package.json 등
강점	빠른 속도, 간단한 설정, React와 잘 맞는 구조

 

---

✨ 마무리하며

Vite + React는 입문자부터 실무 개발자까지 모두가 만족할 수 있는 효율적인 개발 환경을 제공합니다.
이 구조를 이해하면 앞으로 React 프로젝트를 시작할 때 막힘 없이 진행할 수 있습니다.

다음 글에서는 npm run build 명령어로 배포용 빌드 파일을 어떻게 생성하는지 설명드릴게요!

궁금하신 내용은 댓글로 남겨주세요 😊