리스트·상세 페이지 연결

🔐 환경변수 — 비밀값을 코드 밖으로

API 키, 데이터베이스 URL 같은 민감한 정보는 코드에 직접 넣으면 안 됩니다. GitHub에 올라가면 누구나 볼 수 있습니다. 환경변수(.env 파일)를 사용해 비밀값을 분리합니다.

// .env (프로젝트 루트)
VITE_API_URL=https://api.example.com
VITE_KAKAO_MAP_KEY=abcdef1234567890

// .env.local (로컬 개발 전용, .gitignore에 추가)
VITE_SECRET_KEY=my-local-secret

Vite에서는 환경변수 이름이 반드시 VITE_로 시작해야 클라이언트(브라우저)에서 접근 가능합니다. 보안상 VITE_ 없는 변수는 빌드에 포함되지 않습니다.

⚙️ 환경변수 사용 및 타입 처리

// 코드에서 사용
const apiUrl = import.meta.env.VITE_API_URL

async function fetchData() {
  const res = await fetch(`${apiUrl}/posts`)
  return res.json()
}

// TypeScript 타입 선언 (vite-env.d.ts)
interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_KAKAO_MAP_KEY: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

🏗️ 빌드 최적화 이해하기

npm run build를 실행하면 Vite가 최적화된 프로덕션 파일을 생성합니다:

• 트리 쉐이킹(Tree Shaking): 사용하지 않는 코드를 자동으로 제거합니다. 라이브러리를 불러와도 실제 쓰는 부분만 번들에 포함됩니다.
• 코드 분할(Code Splitting): lazy()로 가져온 컴포넌트는 별도 청크 파일로 분리됩니다.
• 미니파이(Minify): 공백, 주석 제거, 변수명 단축으로 파일 크기를 줄입니다.

npm run build   # dist/ 폴더에 프로덕션 파일 생성
npm run preview # 로컬에서 프로덕션 빌드 미리보기

빌드 결과 확인:

• dist/index.html: 진입점 HTML
• dist/assets/*.js: 분할된 JS 청크 파일들 (해시 포함 — 캐시 무효화 자동)
• dist/assets/*.css: 번들된 CSS

🚀 Vercel 배포

Vercel은 프론트엔드 앱 배포에 가장 빠른 방법입니다.

방법 1 — GitHub 연동 (권장):

1. vercel.com에서 GitHub으로 로그인
2. "New Project" → 리포지토리 선택
3. Vite를 자동 감지해 빌드 설정이 자동 입력됩니다: npm run build, 출력 폴더 dist
4. 환경변수 추가: Settings → Environment Variables → VITE_API_URL 등 입력
5. Deploy 클릭 → 1~2분 후 URL 제공

이후 main 브랜치에 push할 때마다 자동 배포됩니다.

방법 2 — CLI:

npm i -g vercel
npm run build   # 먼저 빌드
vercel --prod   # 프로덕션 배포

🌐 Netlify 배포 (대안)

npm install -g netlify-cli
npm run build
netlify deploy --prod --dir=dist

⚠️ SPA 라우팅과 404 문제

SPA를 배포하면 /posts/123 같은 URL을 직접 입력하거나 새로고침하면 404가 뜹니다. 서버가 해당 파일을 찾지 못하기 때문입니다. 모든 경로를 index.html로 보내도록 설정합니다:

// vercel.json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

// _redirects (Netlify)
/* /index.html 200

✅ 정리

• 환경변수: .env 파일 + VITE_ 접두사. import.meta.env.VITE_XXX로 접근.
• 빌드: npm run build → dist/ 폴더. 트리쉐이킹, 코드분할, 미니파이 자동.
• Vercel 배포: GitHub 연동이 가장 편리. 환경변수는 Vercel 설정에 별도 입력.
• SPA 배포 후 새로고침 404: vercel.json에 rewrite 규칙 추가.