Vue 프로젝트 폴더 구조 정리

백엔드만 다루던 개발자가 프론트엔드를 맡게 되는 순간, 가장 먼저 마주하게 되는 건 낯선 디렉토리 구조입니다.
Vue를 기반으로 한 프로젝트를 진행하게 된다면, 기본적인 구조를 이해하고 역할을 파악하는 것이 중요합니다.
이 글에서는 Vue 프로젝트에서 자주 쓰이는 폴더 구조와 그 안의 역할들을 정리합니다.

 

1. 기본 구조 예시

src/
├── assets/
├── components/
├── views/
├── router/
├── store/         ← Pinia/Vuex 상태 관리
├── services/      ← API 호출 모듈
├── utils/         ← 유틸 함수 모음
├── composables/   ← Composition API용 공통 로직
├── layouts/       ← 공통 레이아웃 (예: 헤더 + 사이드바)
├── App.vue
└── main.js

 

 

2. 폴더별 역할 설명

📁 assets/

• 이미지, CSS, 폰트 등 정적 리소스를 저장하는 곳입니다.
• 예: logo.png, global.css

📁 components/

• 재사용 가능한 UI 조각들을 정의합니다.
• 예: 버튼, 카드, 모달 등
• Atomic Design을 따르는 경우 atoms/, molecules/, organisms/로 나눌 수 있습니다.

📁 views/

• 실제 페이지 단위 컴포넌트입니다.
• 라우터와 연결되는 화면들을 이곳에 구성합니다.
• 예: HomeView.vue, LoginView.vue, DashboardView.vue

📁 router/

• Vue Router 설정을 정의합니다.
• 예: index.js 안에 각 URL과 컴포넌트 매핑

// router/index.js
{
  path: '/login',
  component: LoginView
}

📁 store/

• 상태 관리 라이브러리 (Pinia/Vuex) 관련 설정을 담습니다.
• 예: authStore.js, userStore.js

📁 services/

• 백엔드 API와 통신하는 로직을 모읍니다.
• Axios 인스턴스와 각 도메인별 API 함수 정의

// services/userService.js
export function fetchUsers() {
  return axios.get('/api/users');
}

📁 utils/

• 날짜 포맷터, 숫자 변환 등 공통 유틸 함수들을 모아놓습니다.
• 예: formatDate.js, parseCurrency.js

📁 composables/

• Composition API에서 useXyz 형태로 공통 로직을 재사용하는 훅(hook)을 정의합니다.
• 예: useModal.js, usePagination.js

📁 layouts/

• 페이지 레이아웃을 담당하는 컴포넌트들입니다.
• 예: DefaultLayout.vue, AdminLayout.vue
• 일반적으로 헤더, 푸터, 사이드바 등을 포함합니다.

 

3. 파일 단위 주요 구성

• App.vue: 앱의 최상위 컴포넌트 (라우터, 레이아웃 진입점)
• main.js: Vue 앱 초기화, 플러그인 등록, 마운트 처리

// main.js
const app = createApp(App);
app.use(router);
app.use(createPinia());
app.mount('#app');

 

 

4. 추천 폴더 관리 팁

UI 컴포넌트가 많아짐	components/common/, components/chart/ 등 분류
API 많아짐	services/api/user.js, services/api/chat.js 등 분리
역할이 명확하지 않을 때	이름을 helper, lib, features 등으로 명확하게 지정
Vue Composition API 적극 사용	composables/ 적극 활용 (React의 hooks와 비슷)

 

UI 컴포넌트, 페이지 뷰, API 로직, 공통 유틸리티, 상태 관리 이 다섯 가지를 중심으로 구조를 잡아가면 됩니다.