왜 Vite 인가 (그리고 Vite 가 아닌 것)

Vite 는 dev server + 프로덕션 번들러. 그게 제품의 전부야. 마법처럼 느껴지는 이유는, 개발 중에는 번들러인 척을 그만뒀기 때문이야.

2-mode 트릭

옛 React 툴링 — Create React App, webpack 기반 스타터 — 은 개발용이랑 프로덕션용에 같은 번들러 썼어. 파일 저장할 때마다 webpack 이 chunk 그래프 다시 짜고 Babel 로 코드 또 돌렸어. 중간 크기 프로젝트의 cold start 가 15~60초. hot reload 가 '빠르다'는 건 전체 재시작 대비 빠르단 뜻일 뿐.

Vite 는 모드를 쪼개:

Dev: 네이티브 ES module 을 브라우저가 직접 import 하고, Vite dev server 가 필요할 때마다 서빙. 번들링 안 함. 소스 파일은 요청 들어올 때 transform. Cold start = Node 프로세스 시작 + 첫 import 체인 시간 — 보통 1초 이하.
Build: vite build 가 내부적으로 Rollup 써. 진짜 번들러 — tree-shaking, code splitting, minify, CSS extract. 이 결과물을 배포해.

이 트릭이 먹히는 이유: 브라우저들이 이미 네이티브 ESM 지원한 지 몇 년 됐어. Dev 에선 코드가 (TS/JSX 만 벗긴) 작성한 그대로. Prod 에선 최적화된 모양.

Vite 가 아닌 것

Vite 는 프레임워크 아냐. 라우팅, 데이터 페칭, auth, 배포 스토리 — 안 줘. 위에 직접 조립: 라우팅 = React Router, 데이터 = TanStack Query / SWR / native fetch, 스타일 = Tailwind v4, auth = auth 라이브러리. 앱 모양 결정권은 본인 손에.

파일 구조에도 의견 없어. app//pages/ 같은 강제 디렉토리 없음. src/ 안은 원하는 대로.

Vite vs Turbopack vs webpack vs esbuild

이름들 들어봤을 거야. 빠른 지도:

esbuild — Go 기반 JS/TS 번들러/transformer. Vite 가 내부적으로 dependency pre-bundling + TS stripping 에 esbuild 써.
webpack — 클래식. CRA 가 이 위에 있었음. 레거시 많이 굴려. 어떤 규모에서도 Vite 보다 느려.
Turbopack — Vercel 이 Rust 로 쓰는 번들러, Next.js dev server (점점 프로덕션 빌드도) 의 동력. Next.js 외부에선 안 써 — Vite 프로젝트에서 찾지 마.
Vite — Dev = 네이티브 ESM + Prod = Rollup. 프레임워크 무관. 2026년 SPA 의 디폴트.

Vite 는 React 전용 아냐. 같은 Vite 바이너리가 Vue, Svelte, Solid, 바닐라 TS, Tauri 의 프런트엔드도 빌드해. @vitejs/plugin-react 플러그인이 위에 React-specific 동작 (Fast Refresh, JSX 처리, dev-only React 자동 import) 얹어.

설정 전체

제대로 동작하는 Vite + React + TS config 가 여덟 줄. 숨은 마법 없어 — 보이는 게 도는 거의 전부.

Code

vite.config.ts — 최소형, cwkPippa 가 쓰는 dev-server proxy 포함·ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    // /api 요청을 :8000 의 FastAPI 백엔드로 전달.
    // cwkPippa 의 프런트엔드가 dev 에서 Python 백엔드랑 대화하는 방식 그대로야.
    proxy: {
      "/api": "http://localhost:8000",
    },
  },
});

`npm run dev` 가 실제로 돌리는 것 (package.json scripts)·json

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  }
}

Exercise

npm create vite@latest hello-vite -- --template react-ts 실행 후 cd hello-vite && npm install && npm run dev. Dev URL 열고 src/App.tsx 수정해서 브라우저에 반영되는 시간 재 봐. 그다음 vite.config.ts 열어서 위 코드의 /api proxy 추가 — 백엔드 없어도 config 가 로드되는지 확인.

Hint

vite.config.ts 수정에 dev server 가 재시작 안 되면 죽이고 다시 띄워. Vite 가 config 파일 watch 하지만 malformed 면 조용히 죽을 수 있어.

왜 Vite 인가 (그리고 Vite 가 아닌 것)

2-mode 트릭

Vite 가 아닌 것

Vite vs Turbopack vs webpack vs esbuild

설정 전체

Code

External links

Exercise

Progress

댓글 0