[개발서버] Vite: 초고속 Frontend 개발 서버 & 빌드 도구

⚡️ Vite: 초고속 Frontend 개발 서버 & 빌드 도구

이 문서는 Vite에 대한 개요를 제공합니다.
Vite는 React, Vue, Svelte 등 최신 프론트엔드 프레임워크 기반 웹 애플리케이션을
빠르고 간단하게 개발하고 빌드할 수 있게 해주는 강력한 도구입니다.

Vite의 기본 흐름, 폴더 구조, 주요 기능, 그리고 Tomcat과의 비교를 통해
Vite의 역할과 장점을 한눈에 이해할 수 있습니다.

---

🚀 Vite 기본 흐름

Vite는 개발 모드와 빌드 모드 두 가지로 작동합니다.

1️⃣ 개발 모드

• npm run dev 명령어로 Vite 개발 서버를 실행합니다.
• index.html 파일이 애플리케이션의 진입점 역할을 합니다.
• ESM(ES Modules) 덕분에 필요한 파일만 즉시 가져와 빠른 응답 속도를 제공합니다.

2️⃣ 빌드 모드

• npm run build 명령어로 Rollup을 통해 모든 코드와 자원을 번들링합니다.
• 번들링된 결과물은 dist 폴더에 저장되어 배포 준비가 완료됩니다.

3️⃣ 프리뷰

• npm run preview 명령어로 빌드된 결과물을 로컬에서 간단히 테스트할 수 있습니다.

---

📂 Vite 기본 구조 예시

my-app/
├─ index.html # 진입점
├─ vite.config.js # Vite 설정 파일
├─ src/ # 소스 코드
│ ├─ main.js
│ ├─ App.tsx (React 예시)
├─ public/ # 정적 자원

yaml
복사
편집

• index.html: 애플리케이션의 진입점
• vite.config.js: Vite 설정을 정의하는 파일
• src/: 애플리케이션의 소스 코드 디렉토리
• public/: 이미지, 폰트 등 정적 자원이 위치하는 디렉토리

---

✅ Vite로 할 수 있는 것

• React, Vue, Svelte, Preact 등 최신 프레임워크 기반 SPA 개발
• 정적 사이트 제작
• 간단한 정적 서버 역할
• 별도의 백엔드 없이 프론트엔드 개발 테스트 가능

---

🔑 요약 키워드

키워드	설명
빠름	ESM 사용으로 빠른 개발 경험
간단함	설정이 쉽고 사용이 간편
최신 ESM	최신 JavaScript 표준 지원
개발자 친화적	개발 서버 & 빌드 도구 역할 모두 수행

---

⚙️ 개발 서버 역할

• npm run dev 실행 → 로컬 웹 서버 열림
• 브라우저에서 바로 애플리케이션 확인 가능
• 코드 변경 시 HMR (Hot Module Replacement) 로 즉시 반영

---

⚙️ 빌드 도구 역할

• Vue, React, TypeScript 같은 코드를 브라우저가 이해할 수 있는 표준 JavaScript로 변환
• Babel, Rollup 등을 사용해 트랜스파일, 압축, 최적화 후 dist 폴더에 저장

---

📌 예시: React + Vite

• App.jsx (JSX 문법) → 브라우저가 이해 못 함
• Vite는 Babel과 Rollup으로 App.jsx를 App.js로 변환
• 최종적으로 표준 ES Modules (JS) 로 만들어 브라우저가 읽을 수 있게 함

---

🔄 Vite 흐름 요약

개발 서버 실행 → ESM으로 빠르게 반영
빌드 시 Rollup으로 최적화 → dist로 출력 → 배포

---

✏️ 한줄 평

Front End 전용 가벼운 웹서비스를 만들 때 Vite는 정말 유용하다!