6. Vite 프로젝트 구조

Vite의 기본 프로젝트 구성

Vite는 모던 웹 개발을 위한 번들러로, 간단하고 효율적인 프로젝트 구성을 제공합니다. Vite를 사용하면 개발 환경을 빠르게 설정할 수 있으며, 이를 통해 개발자는 코드 작성에 집중할 수 있습니다. Vite의 기본 프로젝트 구조는 구성 파일, 소스 코드 폴더, 그리고 빌드 및 배포를 위한 설정을 중심으로 이루어집니다. 이 섹션에서는 Vite 프로젝트를 처음 시작할 때 기본적으로 어떻게 구성되고, 각 부분이 어떤 역할을 하는지 깊이 있게 설명하겠습니다.

1. Vite 프로젝트 초기화

Vite 프로젝트를 시작하는 가장 기본적인 방법은 npm 또는 yarn을 사용하는 것입니다. 공식적으로 제공되는 템플릿을 사용하면 간단하게 프로젝트를 구성할 수 있습니다.

프로젝트 생성 명령

# npm 사용
npm create vite@latest

# yarn 사용
yarn create vite

이 명령을 실행하면 프로젝트를 생성할 때 사용할 템플릿을 선택할 수 있으며, 여기서 React, Vue, Svelte, Vanilla JS 등 다양한 프레임워크 템플릿을 제공합니다.

2. 기본 디렉토리 구조

Vite로 프로젝트를 생성한 후, 일반적인 디렉토리 구조는 아래와 같습니다.

my-vite-project/
├── index.html
├── package.json
├── vite.config.js
├── node_modules/
├── public/
└── src/
    ├── assets/
    ├── components/
    ├── App.vue (또는 main.js depending on framework)
    └── main.js

각 파일과 디렉토리의 역할은 다음과 같습니다.

index.html

Vite는 HTML 중심의 개발을 지향합니다. index.html 파일은 프로젝트의 진입점으로, 여기서 기본적인 HTML 구조와 스크립트 로딩이 이루어집니다. 이 파일은 Vite가 직접 처리하며, 빌드 및 배포 시 이 파일을 기반으로 번들링된 자바스크립트 파일들이 포함됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

여기서 중요한 점은 script 태그에서 **type="module"**을 사용한다는 점입니다. 이는 Vite가 ES 모듈 방식을 사용하기 때문에 필요하며, 모듈 기반으로 자바스크립트 파일을 로드합니다.

package.json

package.json 파일은 프로젝트의 의존성 및 스크립트를 정의합니다. Vite는 npm 스크립트를 통해 개발 서버를 실행하거나 빌드를 수행할 수 있습니다.

{
  "name": "my-vite-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",       // 개발 서버 실행
    "build": "vite build",  // 프로덕션 빌드
    "serve": "vite preview"  // 로컬 서버에서 빌드 결과 미리보기
  },
  "dependencies": {
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "vite": "^2.0.0"
  }
}

여기서 dev 명령어를 사용하면 Vite의 개발 서버가 실행되며, build 명령어로 프로덕션 빌드를 할 수 있습니다.

vite.config.js

Vite의 설정 파일입니다. Vite는 기본적인 설정으로도 충분히 사용 가능하지만, 추가적인 최적화나 빌드 설정이 필요할 때 vite.config.js에서 이를 설정할 수 있습니다.

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

위 예시에서는 Vue 플러그인을 추가하고, @를 /src로 해석하는 **경로 별칭(alias)**을 설정하고 있습니다. 이를 통해 코드 내에서 모듈을 불러올 때, 복잡한 상대 경로 대신 간단한 별칭을 사용할 수 있습니다.

// 예시 - 별칭을 사용하여 import
import MyComponent from '@/components/MyComponent.vue'

src/ 폴더

src 폴더는 프로젝트의 소스 코드를 담고 있는 폴더입니다. 여기에는 애플리케이션의 모든 컴포넌트, 스타일, 유틸리티, 상태 관리 로직 등이 포함됩니다.

src/main.js: 애플리케이션의 진입점 파일로, Vite는 이 파일을 통해 애플리케이션을 실행합니다.
src/assets/: 이미지, 폰트, 스타일과 같은 정적 자원을 관리하는 폴더입니다.
src/components/: Vue 또는 React와 같은 프레임워크에서 사용하는 재사용 가능한 컴포넌트들을 모아둔 폴더입니다.

public/ 폴더

public 폴더에는 정적 파일을 넣습니다. 이 폴더에 있는 파일들은 빌드 시 변환되지 않고, 그대로 제공됩니다. 예를 들어, favicon이나 폰트 파일 등은 이곳에 위치합니다.

3. 기본 설정 옵션

Vite는 개발 및 빌드 시 다양한 설정을 제공하며, vite.config.js 파일에서 이를 자유롭게 구성할 수 있습니다.

기본 옵션 예시

export default defineConfig({
  root: './src', // 프로젝트의 루트 디렉토리 설정
  server: {
    port: 3000,  // 개발 서버 포트 설정
    open: true   // 서버 시작 시 브라우저 자동 오픈
  },
  build: {
    outDir: 'dist', // 빌드 결과물이 저장될 디렉토리
    minify: 'terser'  // 코드를 최소화하기 위한 도구 설정
  }
})

이 예시는 개발 서버의 포트, 자동 브라우저 열기 등의 개발 설정과, 빌드 시 코드 최소화(minification)를 위한 설정을 포함하고 있습니다.

4. 플러그인 시스템

Vite는 다양한 플러그인 시스템을 지원합니다. 플러그인을 통해 컴파일러를 확장하거나, 빌드 과정에서 추가적인 작업을 수행할 수 있습니다. Vite는 Rollup의 플러그인 시스템을 기반으로 하여, Rollup 플러그인을 그대로 사용할 수 있습니다. 또한, Vite는 프레임워크 별 플러그인을 제공하여 Vue, React, Svelte와 같은 프레임워크의 최적화된 설정을 쉽게 적용할 수 있습니다.

Vue 플러그인 추가 예시

npm install @vitejs/plugin-vue

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

이처럼 플러그인을 추가하면 Vite가 해당 프레임워크 또는 특정 기능을 지원할 수 있도록 최적화됩니다.

결론

Vite의 기본 프로젝트 구성은 간결하고 모던한 웹 개발 환경을 제공합니다. 이를 통해 개발자는 불필요한 설정 작업을 줄이고, 빠른 개발 환경에서 코딩에만 집중할 수 있습니다. Vite는 프리-번들링, HMR, 빌드 성능 최적화와 같은 고성능 기능을 제공하면서도 사용이 매우 간단하여, 다양한 프로젝트에서 유용하게 활용될 수 있습니다.

'Vite' 카테고리의 다른 글

11. Vite의 플러그인 시스템 - 2 (0)	2024.10.19
10. Vite의 플러그인 시스템 - 1 (1)	2024.10.19
9. Vite의 Dev Server 동작 방식 - 2 (1)	2024.10.19
8. Vite의 Dev Server 동작 방식 -1 (0)	2024.10.19
5. Vite의 주요 특징 - 3 (2)	2024.10.19
4. Vite의 주요 특징 - 2 (0)	2024.10.19
3. Vite의 주요 특징 - 1 (0)	2024.10.19
2. Vite란 무엇인가? - 2 (0)	2024.10.19

JS 탐구생활

6. Vite 프로젝트 구조 - 1

Vite의 기본 프로젝트 구성

1. Vite 프로젝트 초기화

프로젝트 생성 명령

2. 기본 디렉토리 구조

index.html

package.json

vite.config.js

src/ 폴더

public/ 폴더

3. 기본 설정 옵션

기본 옵션 예시

4. 플러그인 시스템

Vue 플러그인 추가 예시

결론

'Vite' 카테고리의 다른 글

티스토리툴바

6. Vite 프로젝트 구조 - 1

Vite의 기본 프로젝트 구성

1. Vite 프로젝트 초기화

프로젝트 생성 명령

2. 기본 디렉토리 구조

index.html

package.json

vite.config.js

src/ 폴더

public/ 폴더

3. 기본 설정 옵션

기본 옵션 예시

4. 플러그인 시스템

Vue 플러그인 추가 예시

결론

'Vite' 카테고리의 다른 글

관련글

티스토리툴바