Vite와 TypeScript: 빠른 변환 뒤에 검사 붙이기

"개발 서버가 빠르게 화면을 띄워 줘도, 타입 검사는 별도로 끝까지 돌려야 해."

개발과 배포의 두 경로

Vite는 개발 중에는 빠른 모듈 갱신을 제공하고, 배포 빌드에서는 번들 결과를 만든다. TypeScript 파일을 변환해 브라우저가 실행하게 하지만 전체 프로젝트의 의미 검사를 대신하지 않으므로 tsc --noEmit 같은 별도 명령이 필요해.

npm run dev의 성공, npm run build의 성공, 타입 검사의 성공은 서로 다른 증거야. 배포 전 스크립트가 세 책임 중 무엇을 포함하는지 확인해.

전형적인 프런트엔드 경계

frontend/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── main.tsx
    ├── App.tsx
    ├── components/
    ├── hooks/
    ├── lib/
    └── types/

main.tsx는 React 루트를 붙이는 얇은 진입점, App.tsx는 큰 영역을 연결하는 조립 지점으로 두는 편이 읽기 좋아. 재사용 UI, 상태 훅, 외부 API 경계를 폴더 이름만으로 나누지 말고 의존 방향도 함께 지켜.

환경 변수와 경로 별칭

클라이언트에 노출되는 환경 변수는 번들에 들어갈 수 있어. 이름 규약이 맞는다고 비밀이 안전해지는 것은 아니므로 브라우저에 보내도 되는 값만 사용해. import.meta.env의 타입을 보강하더라도 실제 배포 값 검증은 따로 필요해.

@/ 같은 별칭은 TypeScript와 Vite가 모두 같은 경로로 해석해야 해. 한쪽 설정만 맞으면 에디터나 빌드 중 하나가 실패하지. 별칭이 너무 많아 패키지 경계를 우회하지 않는지도 살펴.

별칭 설정을 tsconfig와 Vite에 중복하고 싶지 않다면 vite-tsconfig-paths 플러그인으로 Vite가 tsconfig를 읽게 할 수 있어. 새 React+TS 프로젝트는 npm create vite@latest my-app -- --template react-ts로 만들 수 있어.

Vite는 빠른 실행 피드백을 맡고 TypeScript 검사는 프로젝트 계약을 맡아. 두 경로를 같은 CI와 대표 브라우저 확인으로 묶어야 출시 증거가 돼.

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·TypeScript 템플릿으로 작은 앱을 만들고 @ 별칭을 src에 연결해. 개발 서버와 tsc --noEmit 모두 같은 컴포넌트 import를 찾는지 확인해.

Hint

Vite와 TypeScript가 같은 별칭을 알아야 해. 각각의 설정에서 한 경로를 가리키도록 맞춰.

개발과 배포의 두 경로

전형적인 프런트엔드 경계

환경 변수와 경로 별칭

Code

External links

Exercise

Progress

댓글 0