Vite로 프로젝트를 더 깊게 시작하려면 무엇부터 세팅해야 하나요?

초기세팅마스터고양이 님

문의 1 일 전

Vite로 간단히 프로젝트를 만드는 수준은 해봤는데, 실제 서비스용으로 “제대로” 시작하려면 어떤 순서로 세팅하는 게 좋은지 궁금합니다.
단순 설치 방법 말고, 초기에 잡아두면 이후에 개발·배포가 편해지는 실전 세팅 위주로 정리해 주세요.

Vite 프로젝트 생성 시 템플릿 선택 기준(React/TS 여부, SSR 필요 여부 등)
폴더 구조 추천(src 구성, assets, components, pages, api 등)
환경변수(.env)와 빌드 모드(dev/stage/prod) 구성
절대경로(alias)와 import 규칙 정리
ESLint/Prettier 세팅과 팀 규칙(세미콜론, 더블쿼트 등) 적용
API 통신(axios) 기본 구조, 프록시 설정, 에러 처리 패턴
상태관리/라우팅(React Router 등) 기본 연결
빌드 최적화(코드 스플리팅, 정적 파일, 이미지 최적화)

답변과 관련되는: Vite 프로젝트란 무엇이고, 왜 요즘 많이 쓰이나요?

1 답변

답변됨 1 일 전 빌드속도튜너장인 님

Vite로 “깊게” 프로젝트를 시작한다는 것은 단순히 앱을 띄우는 걸 넘어, 개발 규칙·환경 분리·배포까지 생각한 구조를 처음부터 잡아두는 것을 말합니다. 아래 순서대로 세팅하면 실무에서 삽질을 크게 줄일 수 있습니다.

시작 템플릿을 먼저 결정하기

React를 쓸 거면 React + TypeScript 템플릿이 가장 무난합니다. 규모가 커질수록 타입이 생산성과 안정성을 올려줍니다.
SSR이 꼭 필요하면 Vite 단독보다는 SSR 프레임워크를 고려하는 것이 일반적입니다. Vite는 주로 SPA 개발에 강합니다.
라이브러리/패키지로 배포할 목적이면 라이브러리 모드 세팅 방식이 달라집니다.

폴더 구조를 초기에 고정하기(추천 예시)

src/
- app/ (라우팅, 전역 provider, 초기 부트스트랩)
- pages/ (페이지 단위)
- components/ (재사용 컴포넌트)
- features/ (기능 단위 묶음: auth, user, dashboard 등)
- services/ (API, axios 인스턴스, 인터셉터)
- hooks/
- utils/
- assets/
- styles/
- types/
  이렇게 “기능 단위(feature)”를 만들면 프로젝트가 커져도 정리가 쉬워집니다.

환경변수와 빌드 모드 분리

.env.development / .env.staging / .env.production 식으로 나누고,
Vite는 기본적으로 VITE_ 접두사가 붙은 변수만 프론트에서 접근 가능합니다.
API Base URL, 배포 도메인, 로그 레벨 같은 값들을 모드별로 분리해둡니다.

절대경로(alias) 세팅

import 경로가 길어지는 순간 유지보수가 어려워집니다.
예: @/components, @/services 같은 규칙을 vite.config에서 alias로 고정합니다.
동시에 ESLint import 규칙도 맞추면 팀 단위로 혼란이 줄어듭니다.

ESLint/Prettier를 팀 규칙으로 고정

포맷팅은 Prettier로, 코드 품질은 ESLint로 역할을 분리합니다.
세미콜론 사용, import 더블쿼트 사용 같은 규칙은 Prettier/ESLint 설정에 반영해 자동으로 강제합니다.
Git hook(커밋 전 lint/format)까지 걸어두면 코드 스타일 논쟁이 사라집니다.

API 통신 구조(axios) 먼저 만들기

axios 인스턴스를 한 곳에서 만들고(baseURL, timeout, headers),
인터셉터로 토큰 주입, 만료 처리, 공통 에러 포맷을 통일합니다.
개발 환경에서 CORS를 피하려면 Vite dev server proxy를 설정합니다.
API 레이어를 services 폴더에 고정하면 나중에 교체·확장하기 쉽습니다.

라우팅/상태관리 기본 연결

SPA라면 React Router를 초기에 붙이고, 레이아웃 구조를 먼저 만듭니다(로그인 레이아웃, 기본 레이아웃 등).
상태관리는 규모에 따라 선택하되, 서버 상태(데이터 캐싱)는 전용 도구(쿼리 캐싱)를 쓰는 편이 효율적입니다.
전역 상태는 “정말 필요한 것만” 남기는 것이 유지보수에 좋습니다.

빌드/성능 최적화 최소 세팅

라우트 단위 코드 스플리팅(페이지 lazy load)
이미지/정적 파일 관리 규칙(assets 폴더, public 폴더 구분)
번들 분석(빌드 결과를 보고 큰 의존성 정리)
초기부터 과하게 최적화하기보다, 병목이 생기는 구간을 빠르게 잡을 수 있는 장치만 만들어두는 게 좋습니다.

배포를 염두에 둔 기본 체크리스트

환경변수 주입 방식(빌드 타임인지 런타임인지)
SPA 라우팅을 위한 서버 리라이트 설정(새로고침 404 방지)
정적 호스팅(CDN)에서 캐시 전략
Nginx/CloudFront 등에서 gzip/brotli, 캐시 헤더
CI에서 lint/test/build 순서 고정

정리하면, Vite 프로젝트를 “깊게” 시작할 때 가장 중요한 건
폴더 구조, 환경 분리, 코드 스타일, API 레이어, 라우팅/배포 준비를 초기에 고정하는 것입니다.
이 5가지를 먼저 잡아두면 이후 기능 개발 속도가 확실히 빨라집니다.

문의 1 일 전 번들형식헤매는수달 님 Vite에서 UMD 빌드는 무엇이고 언제 쓰나요?

...