Vite 기반 프로젝트 구조

Vite 기반 프로젝트 구조

• 1. 기본 디렉터리 구조
• 2. 주요 디렉터리 및 파일 설명
  • public/
  • src/
  • index.html
  • vite.config.ts
  • tsconfig.json, tsconfig.node.json
• 3. 추천 확장 구조 (실무 적용 시)
• 결론
• Keywords

Vite는 빠르고 간결한 프론트엔드 개발 환경을 제공하는 빌드 도구로, React + TypeScript 프로젝트에서도 널리 사용되고 있습니다. 이 글에서는 Vite를 기반으로 한 프로젝트의 기본 구조를 소개하고, 각 디렉터리 및 파일의 역할을 정리합니다.

---

1. 기본 디렉터리 구조

Vite + React + TypeScript 프로젝트를 생성하면 다음과 같은 구조가 생성됩니다:

my-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts

---

2. 주요 디렉터리 및 파일 설명

public/

• 정적 파일 위치 (favicon, 이미지 등)
• 빌드시 그대로 루트에 복사됨

src/

• 모든 소스 코드가 포함되는 핵심 디렉터리
• 구조 분리 예시:
  • assets/: 이미지, 스타일 등 정적 리소스
  • components/: 재사용 가능한 UI 컴포넌트
  • App.tsx: 루트 컴포넌트
  • main.tsx: 앱 초기화 및 DOM 렌더링

index.html

• 앱의 HTML 엔트리 포인트
• Vite는 이 파일을 기준으로 빌드 수행

vite.config.ts

• Vite 설정 파일 (플러그인, 경로 별칭 등 커스터마이징 가능)

tsconfig.json, tsconfig.node.json

• TypeScript 설정 파일
• tsconfig.node.json은 개발 도구용 설정 포함

---

3. 추천 확장 구조 (실무 적용 시)

실무에서는 다음과 같이 구조를 확장할 수 있습니다:

src/
├── hooks/             # 커스텀 훅
├── pages/             # 라우팅 단위 페이지
├── services/          # API 호출 모듈
├── stores/            # 전역 상태 관리 (예: Zustand, Recoil)
├── types/             # 공통 Type 정의
├── utils/             # 유틸리티 함수 모음

---

결론

Vite는 단순하지만 유연한 프로젝트 구조를 제공합니다. 기본 구조를 이해하고, 실무에 맞게 디렉터리를 세분화하여 사용하면 더욱 효율적인 개발 환경을 구축할 수 있습니다.

---

Keywords

Vite, React, TypeScript, 프로젝트 구조, 디렉터리 설명, 프론트엔드 설정, vite.config.ts, tsconfig.json, React 컴포넌트 구조, 실무 프론트엔드