Vite를 고르는 이유와 맡지 않는 일

Vite는 개발 서버와 프로덕션 빌드 도구야. 개발할 때 빠른 이유와, 프레임워크가 아닌 까닭을 분리해서 알아보자.

개발과 배포에 서로 다른 전략을 써

Create React App이나 webpack 기반 스타터는 개발할 때도 프로젝트를 번들로 묶었어. 파일을 저장할 때마다 의존성 그래프를 다시 계산하고 코드를 변환하니 프로젝트가 커질수록 시작과 갱신이 느려졌지.

Vite의 개발 서버는 브라우저가 지원하는 ES module을 이용해 요청받은 파일만 변환해서 보내. 처음부터 전체 앱을 묶지 않으므로 보통 1초 안에 시작하고, 바뀐 모듈만 빠르게 갱신할 수 있어. 배포할 때는 vite build가 Rollup을 사용해 tree-shaking, 코드 분할, 압축, CSS 추출을 적용한 결과물을 만들어.

Vite는 앱의 구조를 정하는 프레임워크가 아니야

Vite는 라우팅, 데이터 요청, 인증, 배포 방식을 대신 정해 주지 않아. React Router, TanStack Query나 fetch, Tailwind, 인증 라이브러리처럼 필요한 부품을 직접 골라 조립해야 해. app/이나 pages/ 같은 폴더 구조도 강제하지 않으므로 src/ 안을 제품에 맞게 구성할 수 있어.

비슷해 보이는 도구와의 차이

esbuild는 Go로 만든 빠른 변환기이자 번들러야. Vite는 의존성을 미리 묶고 TypeScript 문법을 걷어낼 때 사용해.
webpack은 오래된 생태계와 강한 호환성이 있지만 개발 속도는 대체로 Vite보다 느려.
Turbopack은 Vercel이 Rust로 만드는 Next.js용 번들러야. 일반 Vite SPA에서 따로 고를 도구는 아니야.
Vite는 개발 중에는 native ESM을, 배포 빌드에는 Rollup을 사용하는 프레임워크 독립 도구야.

Vite는 React 전용이 아니야. 같은 Vite가 Vue, Svelte, Solid, 바닐라 TypeScript, Tauri 프런트엔드도 빌드해. React의 Fast Refresh와 JSX 처리는 @vitejs/plugin-react가 더해 줘.

설정이 눈에 보여

React와 TypeScript를 연결하는 기본 Vite 설정은 짧아. 어떤 플러그인이 코드를 변환하고 어떤 빌드가 배포물을 만드는지 파일에서 직접 확인할 수 있다는 점이 장점이야.

Code

cwkPippa 개발 서버 proxy를 포함한 최소 vite.config.ts·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",
    },
  },
});

<code>npm run dev</code>가 실행하는 package.json 명령·json

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

Exercise

npm create vite@latest로 React와 TypeScript 프로젝트를 만든 뒤 개발 서버와 프로덕션 빌드를 각각 실행해. 개발 중 요청되는 모듈과 dist에 만들어진 번들의 차이를 확인하고, Vite가 제공하지 않는 라우팅과 인증은 어디서 추가할지도 적어 봐.

Hint

개발자 도구의 Network 탭에서는 여러 ES module 요청이 보이고, 빌드 결과에는 해시가 붙은 JavaScript와 CSS 파일이 보여야 해.

개발과 배포에 서로 다른 전략을 써

Vite는 앱의 구조를 정하는 프레임워크가 아니야

비슷해 보이는 도구와의 차이

설정이 눈에 보여

Code

External links

Exercise

Progress

댓글 0