Vite 기본 폴더 구조

Vite 기본 폴더 구조

 

npm create vite@latest 명령어로 Vite 프로젝트를 생성하면 기본적으로 다음과 같은 폴더 구조가 생성됩니다.

my-vite-project/
├── node_modules/
├── public/
│   ├── favicon.ico
├── src/
│   ├── assets/
│   │   ├── logo.svg
│   ├── App.jsx (또는 App.tsx, App.vue 등)
│   ├── main.jsx (또는 main.tsx, main.js 등)
├── .gitignore
├── index.html
├── package.json
├── package-lock.json (또는 yarn.lock, pnpm-lock.yaml)
├── README.md
├── vite.config.js (또는 vite.config.ts)

📁 폴더 및 파일 설명

1. node_modules/

• 프로젝트에서 설치한 모든 npm 패키지들이 저장되는 폴더입니다.
• package.json에 정의된 의존성을 기반으로 npm install 시 자동 생성됩니다.

2. public/

• 정적 파일(예: favicon.ico, 이미지, 폰트 등)이 저장되는 폴더입니다.
• Vite는 이 폴더의 파일을 빌드 시 변경하지 않고 그대로 제공하므로, public/에 있는 파일은 / 경로에서 바로 접근할 수 있습니다.
• 예: public/logo.png → 브라우저에서 http://localhost:5173/logo.png 로 접근 가능

3. src/

• 프로젝트의 주요 소스 코드가 위치하는 폴더입니다.

📁 src/assets/

• 이미지, CSS, 폰트 등 프로젝트에서 사용하는 정적 리소스를 저장하는 폴더입니다.
• import를 통해 직접 JavaScript/TypeScript 파일에서 불러올 수 있습니다.
• 예: import logo from './assets/logo.svg'

📄 src/main.js (또는 main.tsx, main.jsx)

• 애플리케이션의 진입점(entry point) 파일입니다.
• 보통 index.html에서 이 파일을 로드하여 앱이 실행됩니다.

📄 src/App.jsx (또는 App.vue, App.tsx)

• 기본적으로 제공되는 메인 컴포넌트 파일입니다.
• React 프로젝트라면 App.jsx, Vue 프로젝트라면 App.vue 파일이 생성됩니다.

4. .gitignore

• Git에 포함되지 않을 파일을 정의하는 파일입니다. (node_modules/, dist/ 등)

5. index.html

• 프로젝트의 기본 HTML 파일입니다.
• 중요한 점은, 일반적인 웹 개발과 다르게 index.html이 public/이 아니라 프로젝트 루트에 위치한다는 것입니다.
• Vite는 index.html을 직접 처리하며, <script type="module" src="/src/main.js"></script> 같은 방식으로 JS를 로드합니다.

6. package.json

• 프로젝트의 메타데이터와 의존성을 관리하는 파일입니다.
• 주요 스크립트: 
  • npm run dev → 개발 서버 실행
  • npm run build → 프로젝트를 배포용으로 빌드
  • npm run preview → 빌드된 파일을 로컬에서 확인

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

7. vite.config.js (또는 vite.config.ts)

• Vite의 설정 파일입니다.
• 기본적으로 ESM(ES Modules) 방식의 JavaScript 또는 TypeScript 파일이며, Vite의 플러그인, 경로 별칭, 서버 설정 등을 조정할 수 있습니다.

---

✨ 요약

• public/ → 정적 파일 저장 (빌드 시 변경되지 않음)
• src/ → 주요 애플리케이션 코드 (컴포넌트, 스타일, 스크립트 등)
• index.html → 애플리케이션의 진입점
• vite.config.js → Vite 설정 파일
• package.json → 프로젝트 메타정보 및 npm 스크립트

이 폴더 구조를 기반으로 개발을 진행하면 됩니다!