Vite

Vite는 웹 프런트엔드 개발 서버와 배포용 빌드를 제공하는 도구다. 개발 중에는 모듈을 처리하고 변경 내용을 빠르게 반영하며, 배포할 때는 브라우저가 사용할 자산을 묶고 최적화한다. Vue·React 같은 UI 프레임워크 자체와는 다른 역할이다.

개발과 배포의 두 흐름

개발 서버는 브라우저의 모듈 기능과 HMR을 이용해 편집한 부분의 변경을 전달한다. 배포 빌드는 자산 경로와 코드 분할 등을 반영한 결과물을 만든다. 따라서 개발 서버에서 보인 화면만 확인하면 운영 경로·캐시·실제 빌드에서 생기는 문제를 놓칠 수 있다.

장점은 여러 프레임워크에서 비슷한 개발 흐름을 사용하고 플러그인으로 필요한 변환을 추가하기 쉽다는 것이다. 정적 웹 앱의 시작 비용도 낮다. 한계는 라우팅·인증·데이터베이스·업무 API를 자동으로 구현하지 않는다는 점이다. 또한 TypeScript 문법을 처리하는 빌드와 타입 오류를 검사하는 단계는 구분해야 한다.

도서 목록 화면 준비

현재 Vite가 지원하는 Node.js와 pnpm을 준비한 뒤 빈 작업 위치에서 가상 도서 목록 프로젝트를 만든다. 아래 vanilla-ts는 프레임워크 없이 TypeScript를 사용하는 시작 템플릿이다. create 명령은 선택한 패키지를 내려받아 프로젝트를 생성한다.

pnpm create vite library-catalog --template vanilla-ts
cd library-catalog
pnpm install
pnpm dev

개발 서버가 표시하는 로컬 주소에서 시작 화면을 볼 수 있다. 프로젝트 루트에 다음 vite.config.ts를 만들면 /reading/ 아래에 배포할 정적 자산 경로를 지정할 수 있다. 로컬 미리보기 포트는 4330으로 정했다.

import { defineConfig } from 'vite';

export default defineConfig({
  base: '/reading/',
  preview: { host: '127.0.0.1', port: 4330 },
});

pnpm build
pnpm preview

build는 보통 dist 디렉터리에 정적 결과물을 만들고 preview는 그 결과물을 로컬에서 확인하는 용도다. 서버가 안내한 /reading/ 경로에서 이미지·스크립트가 정상 로드되는지 확인한다. preview 명령을 장기 운영용 서버라고 가정하지 않는다.

배포 전에 확인할 점

클라이언트 번들에 들어간 값은 방문자가 볼 수 있다. 프런트엔드 환경변수를 서버 비밀 저장소처럼 사용하지 말아야 한다. 브라우저용 코드에서 Node.js 파일 시스템 API를 직접 호출하는 것도 일반적으로 동작하지 않는다. 서버 기능이 필요하면 별도 API나 서버 프레임워크와 연결한다.

빌드 대상 브라우저와 자바스크립트 API 지원은 별도로 확인한다. 문법 변환이 모든 누락 API의 폴리필을 대신하지 않으며, 중첩 경로 배포에서는 base와 서버의 경로 처리도 일치해야 한다. 묶음 크기·로딩 실패·타입 검사를 개발 서버의 빠른 시작 시간과 별개로 점검하는 것이 좋다.

참고 자료