[Vue.js] Vue 프로젝트 구조 이해하기

Vue3에서는 컴포넌트를 더욱 직관적이고 간결하게 만들기 위해 <script setup> 문법이 도입되었습니다.

이 글에서는 Vue 3에서 <script setup> 문법을 사용하는 프로젝트 구조와 각 파일의 역할을 설명하겠습니다😉

 

1. Vue 프로젝트 파일 구조 ( Vite 기반 )

Vite를 사용하여 Vue 3 프로젝트를 생성하면 아래와 같은 폴더 및 파일 구조가 만들어집니다.

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── index.html
├── package.json
└── vite.config.js

 

기본적으로는 위와 같은 폴더구조가 나오지만, 이전 글에서 vue를 생성하셨더라면, 아래와 같이 나올 것입니다.

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── stores/
│   ├── views/
│   ├── App.vue
│   ├── main.js
├── .eslintrc.cjs
├── .prettierrc.json
├── index.html
├── package.json
└── vite.config.js

 

 

 

• node_modules 폴더: 폴더는 프로젝트에서 사용하는 모든 npm 패키지와 그 의존성들이 저장되는 폴더입니다.
• src 폴더: 주요 애플리케이션 코드가 저장되는 곳입니다.
• public 폴더: 정적 파일이 위치하는 곳으로, 애플리케이션의 기본 HTML이나 이미지, 폰트 파일 등을 여기에 넣습니다.
• vite.config.js: Vite의 설정 파일로, 프로젝트의 빌드 및 개발 서버 구성을 관리합니다.
• eslintrc.cjs: eslintrc.cjs 파일은 ESLint의 설정 파일로, JavaScript 및 Vue 파일에서 코드 품질을 유지하고 일관성을 높이기 위해 사용됩니다.
• prettierrc.json: prettierrc.json 파일은 Prettier의 설정 파일로, 코드 포매팅 규칙을 정의합니다.
• package.json: package.json 파일은 프로젝트의 기본 정보를 정의하며, npm 패키지 관리 시스템과 상호작용하는 데 필요한 정보를 담고 있습니다.

 

 

 

 

2. main.js 파일

main.js는 Vue.js 애플리케이션의 진입점( entry point ) 역할을 하는 파일입니다. Vue 애플리케이션이 실행될 때 가장 먼저 이 파일이 실행되며, 애플리케이션의 초기 설정이 이루어지는 곳입니다. Vue 인스턴스를 생성하고 이를 특정 DOM 요소에 마운트( Mount )하는 역할을 합니다.

 

3. App.vue 파일

App.vue는 프로젝트의 루트 컴포넌트로, 애플리케이션 전체의 레이아웃이나 주요 구조를 담당합니다.

Vue 3의 <script setup>을 사용하면 코드가 더욱 간결해집니다.

 

<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <MyComponent />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MyComponent from './components/MyComponent.vue';

const title = ref('Hello Vite + Vue 3!');
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

 

 

• <template>: 컴포넌트의 HTML 구조를 정의합니다.
• <script setup>: 컴포넌트 로직을 작성하는 부분으로, Vue의 ref, reactive 같은 상태 관리 기능을 쉽게 사용할 수 있습니다.
• <style>: 컴포넌트에 대한 스타일을 지정하는 부분입니다.

ref, reactive란?

ref : 기본 데이터 타입(문자열, 숫자 등)이나 객체를 반응형으로 만들기 위해 사용하는 API입니다.
reactive : 객체를 반응형으로 만들기 위해 사용하는 API입니다. reactive를 사용하면 모든 속성이 반응형이 됩니다.

 

// ref
import { ref } from 'vue';

const count = ref(0); // count변수를 반응형 변수로 만듭니다.

function increment() {
  count.value++; // 값을 변경 하면 UI에 자동 반영됩니다.
}

// reactive
import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello, Vue!'
});

function increment() {
  state.count++; // 값을 변경 하면 UI에 자동 반영됩니다.
}

 

4. Vite의 역할

Vite는 빠른 개발 환경을 제공하는 빌드 도구로, 프로젝트를 생성할 때 기본적인 설정을 최소화하면서 빠른 번들링과 HMR(Hot Module Replacement) 등을 지원합니다.

• 빠른 빌드: Vite는 네이티브 ES 모듈을 기반으로 하여 빠른 빌드 속도를 자랑합니다.
• HMR 지원: 변경된 파일만을 빠르게 리로드하는 기능을 제공해 개발 속도를 향상시킵니다.

 

HMR이란?

모듈 교체를 통해 애플리케이션의 상태를 유지하면서 변경된 모듈을 즉시 업데이트 할 수 있는 개발 도구입니다.
주로 웹 개발에서 사용되며, 특히 Vue.js와 Vite와 같은 JavaScript 프레임워크 및 빌드 도구에서 지원합니다.