Vite + TS: cwkPippa Frontend 패턴

"Vite 가 cwkPippa frontend 가 돌아가는 bundler-와-dev-server. 빠르고, 단순, TypeScript-native."

Vite 가 뭐

Vite (vitejs.dev) 가 2 모드 가진 build tool: dev (ESM-native, bundling 없음, 즉시 HMR) 과 prod (Rollup-based bundle, shipping 용 최적화). Next.js 같은 full framework 안 쓰는 대부분 React/Vue/Svelte 프로젝트엔 Vite 가 canonical 선택.

TypeScript 지원이 first-class. src/ 에 .ts/.tsx 파일 떨구고 import, Vite 가 esbuild 통해 transpilation 처리. 타입 체크 위임 — 별도로 tsc --noEmit 돌림.

cwkPippa frontend layout

cwkPippa 의 frontend/ 가 Vite + React 19 + TypeScript 사용:

frontend/
├── package.json
├── tsconfig.json           # strict: true, target ES2022
├── vite.config.ts          # Vite config — plugin, alias
├── index.html              # entry point
└── src/
    ├── main.tsx            # React mount
    ├── App.tsx             # top-level component
    ├── components/         # UI component
    ├── hooks/              # custom hook
    ├── lib/                # utility, api
    └── types/              # 공유 타입

npm run dev 가 HMR 있는 Vite dev server 시작. npm run build 가 production bundle 만듦. npm run typecheck 가 tsc --noEmit 돌림.

Path alias

Vite 가 tsconfig 의 paths 옵션 AND vite.config.ts 의 matching alias 통해 path alias 지원. 흔한 패턴: @ → ./src. 그다음 긴 relative path 대신 import { Button } from '@/components/Button'.

Next.js 아닌 React frontend 코드엔 Vite 가 default 2026 stack. 빠르고, TypeScript-native, configuration surface 가 이해할 만큼 작아.

Code

vite.config.ts — 전형적 setup·typescript

// vite.config.ts — React + TS 앱용 최소 config.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'node:path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 5173,
  },
});

tsconfig.json — Vite 와 쌍·json

// tsconfig.json — matching path alias.
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

Exercise

새 Vite + React + TS 프로젝트 scaffold (npm create vite@latest my-app -- --template react-ts). Path alias @ → ./src 추가. @/components/... 에서 component import. Vite dev 와 tsc --noEmit 둘 다 alias 옳게 resolve 확인.

Hint

Vite 가 vite.config.ts 에 alias 필요; TypeScript 가 tsconfig.json 의 paths 에 필요. 둘 다 동의해야 모든 게 작동. vite-tsconfig-paths plugin 이 중복 제거.

Vite + TS: cwkPippa Frontend 패턴

Vite 가 뭐

cwkPippa frontend layout

Path alias

Code

External links

Exercise

Progress

댓글 0