디렉토리 구조
10.3.1. 표준 폴더 구조
src/
├── api/ # API 호출 함수
│ ├── client.ts # Axios 인스턴스 설정
│ └── user.ts # 사용자 관련 API
├── assets/ # 정적 자산 (이미지, 폰트)
├── components/ # 공통 컴포넌트
│ ├── common/ # 범용 UI 컴포넌트 (Button, Modal 등)
│ └── layout/ # 레이아웃 컴포넌트 (Header, Sidebar 등)
├── composables/ # Composable 함수
├── locales/ # i18n 번역 파일
├── plugins/ # Vue 플러그인 설정
├── router/ # Vue Router 설정
│ └── index.ts
├── stores/ # Pinia 스토어
├── styles/ # 글로벌 스타일 및 Tailwind 설정
├── types/ # TypeScript 타입 정의
├── utils/ # 유틸리티 함수
├── views/ # 페이지 컴포넌트
│ ├── user/
│ │ ├── UserListView.vue
│ │ └── UserDetailView.vue
│ └── auth/
│ └── LoginView.vue
├── App.vue
└── main.ts10.3.2. 디렉토리 원칙
views/: 라우터에 직접 연결되는 페이지 컴포넌트를 배치합니다. 접미사View를 사용합니다.components/: 여러 페이지에서 재사용되는 공통 컴포넌트를 배치합니다.- 페이지 전용 컴포넌트는 해당
views/하위에 배치할 수 있습니다. api/: 각 도메인별로 파일을 분리합니다.types/: API 응답 타입과 공용 타입을 정의합니다. 컴포넌트 전용 타입은 해당 컴포넌트 파일 내에 정의할 수 있습니다.composables/: 재사용 가능한 로직을 캡슐화합니다. 하나의 파일에 하나의 composable을 정의합니다.
10.3.3. 컴포넌트 분류 기준
| 분류 | 위치 | 기준 |
|---|---|---|
| 페이지 컴포넌트 | views/ | 라우터에 직접 연결, *View.vue 접미사 |
| 공통 UI 컴포넌트 | components/common/ | 2개 이상 페이지에서 재사용 |
| 레이아웃 컴포넌트 | components/layout/ | 페이지 레이아웃 구성 요소 |
| 페이지 전용 컴포넌트 | views/{도메인}/ | 특정 페이지에서만 사용 |
10.3.4. 파일 배치 규칙
- 한 디렉토리에 10개 이상의 파일이 존재하면 하위 디렉토리로 분류합니다.
index.ts파일은 디렉토리의 진입점으로 사용하며, re-export 용도로만 사용합니다.- 테스트 파일은 원본 파일과 동일한 디렉토리에
*.spec.ts또는*.test.ts로 배치합니다. 별도의__tests__/디렉토리도 허용합니다.