📁 Vue 3 디렉토리 구조와 사용 방법
기본적인 Vue 3 + Vite 프로젝트에서 디렉토리는 보통 이렇게 구성됩니다:
src/
├─ assets/
├─ components/
├─ composables/
├─ layouts/
├─ pages/ (혹은 views/)
├─ router/
├─ store/
├─ utils/
├─ types/
├─ App.vue
└─ main.ts
각 디렉토리별로 언제/어떻게 사용해야 하는지, 샘플 코드까지 포함해서 설명
1. 📁 assets/
정적 파일을 둡니다.
✔ 어떤 파일이 들어가나?
- 이미지
- 아이콘
- CSS / SCSS
- 글로벌 스타일
- 폰트
✔ 사용 예시
<img src="@/assets/logo.png" />
2. 📁 components/
재사용 가능한 UI 조각(component) 을 보관합니다.
✔ 어떤 파일이 들어가나?
- 버튼
- 입력창
- 테이블
- 모달
- 작은 카드 UI
- 재사용 가능한 form field
✔ 사용 예시
<template> <BaseButton @click="save">저장</BaseButton> </template> <script setup> import BaseButton from '@/components/BaseButton.vue' </script>
3. 📁 composables/
Vue 3의 Composition API 로직을 재사용하는 곳
useXXX.ts 형태의 파일을 넣습니다.
✔ 어떤 파일이 들어가나?
- useFetch.ts – fetch 로직 재사용
- useUser.ts – 사용자 정보 로직
- useModal.ts – 모달 상태 관리
- useCounter.ts – 카운터 상태
- useWebSocket.ts – 웹소켓 제어
✔ 사용 예시
src/composables/useCounter.ts
import { ref } from 'vue' export function useCounter() { const count = ref(0) const inc = () => count.value++ return { count, inc } }
사용:
<script setup> import { useCounter } from '@/composables/useCounter' const { count, inc } = useCounter() </script>
4. 📁 layouts/
페이지 전체의 레이아웃을 관리합니다.
(ex: 헤더 + 본문 + 푸터 구조)
✔ 어떤 파일이 들어가나?
- DashboardLayout.vue
- DefaultLayout.vue
- EmptyLayout.vue
✔ 사용 예시
<template> <DefaultLayout> <router-view /> </DefaultLayout> </template>
5. 📁 pages/ 또는 views/
라우터에 연결되는 실제 페이지 단위 컴포넌트입니다.
✔ 어떤 파일이 들어가나?
- LoginPage.vue
- DashboardPage.vue
- UserEditPage.vue
✔ 사용 예시 (router)
import { createRouter, createWebHistory } from 'vue-router' import LoginPage from '@/pages/LoginPage.vue' export default createRouter({ history: createWebHistory(), routes: [ { path: '/login', component: LoginPage } ] })
6. 📁 router/
라우터 설정 파일을 둡니다.
✔ 포함되는 파일
- index.ts
- route guards
- route metadata
✔ 간단 예제
import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [] }) export default router
7. 📁 store/
상태 관리 디렉토리입니다. 대부분 Pinia 사용.
✔ 어떤 파일이 들어가나?
- userStore.ts
- settingsStore.ts
- uiStore.ts
✔ 예시
import { defineStore } from 'pinia' export const useUserStore = defineStore('user', { state: () => ({ name: '', age: 0, }), })
8. 📁 utils/
순수 함수(헬퍼 함수)를 모아두는 디렉토리입니다.
✔ 어떤 파일이 들어가나?
- 숫자/문자 처리 함수
- 날짜 포맷 함수
- API 응답 변환 함수
- 공통 상수
✔ 사용 예시
export function formatDate(date: Date) { return date.toISOString().split('T')[0] }
9. 📁 types/
TypeScript 인터페이스, 타입 정의
✔ 포함되는 파일
- DTO
- API 응답 타입
- Model 타입
- 공통 타입 정의
✔ 예시
export interface User { id: number name: string }
10. 📁 services/ (선택)
API 통신 로직을 모아둡니다.
✔ 예시
import axios from 'axios' export const userApi = { getUser(id: number) { return axios.get(`/api/users/${id}`) } }
11. App.vue / main.ts
프로젝트의 루트 구성.
- App.vue: 레이아웃 뼈대
- main.ts: Vue 앱 실행 설정
🔥 요약 – 디렉토리별 역할
디렉토리역할
| assets | 이미지, css 등 정적 파일 |
| components | 재사용 가능한 UI |
| composables | Composition API 기반 로직 재사용(useXXX) |
| pages/views | 라우팅되는 페이지 |
| layouts | 페이지 공통 레이아웃 |
| router | 라우터 설정 |
| store | Pinia 상태 관리 |
| utils | 헬퍼 함수 |
| types | TypeScript 타입 정의 |
| services | API 통신 모듈 |