CLI 프로젝트 생성(scaffolding) 기능 구현을 위한 Configuration 문서입니다.
- **main 브랜치**: Vue 3.x + Vite
- **staging 브랜치**: Vue 2.x + Webpack
## 기술 스택 비교
| 카테고리 | main (Vue 3.x) | staging (Vue 2.x) |
|---------|----------------|-------------------|
| **프레임워크** | Vue 3.5 | Vue 2.6.14 |
| **빌드 도구** | Vite 7 | Webpack 5 |
| **언어** | JavaScript + TypeScript | JavaScript + TypeScript (혼용) |
| **상태 관리** | Vuex 4 + `vuex-persist` | Vuex 3 + `vuex-persistedstate` |
| **라우터** | vue-router 4 | vue-router 3 |
| **UI 프레임워크** | Tailwind CSS 4 | Bootstrap 4 + bootstrap-vue 2 |
| **CSS 전처리** | SCSS + Tailwind + PostCSS | SCSS + PostCSS (autoprefixer) |
| **i18n** | vue-i18n 11 (Composition API) | vue-i18n 8 (Options API) |
| **테스트 (단위)** | Vitest 4 | Vitest (vite-plugin-vue2) |
| **테스트 (E2E)** | Playwright | Playwright |
| **린팅** | ESLint 9 (flat config) | ESLint 9 (flat config) |
| **포맷팅** | Prettier 3 | Prettier 3 |
| **모니터링** | Sentry (`@sentry/vue` 10) | Sentry (`@sentry/vue` 7) |
| **폰트** | Pretendard | Pretendard |
| **WASM** | vite-plugin-wasm | webpack syncWebAssembly |
| **패키지 매니저** | pnpm | npm (package-lock.json) |
| **Git Hooks** | Husky + lint-staged | Husky + lint-staged |
| **번들 분석** | rollup-plugin-visualizer | - |
| **Babel** | 불필요 (Vite/esbuild) | @babel/preset-env + 플러그인 |
| **Composition API** | 네이티브 지원 | @vue/composition-api 백포트 |
## CLI 프로젝트 생성 시 체크리스트
### Vue 3.x (main) 프로젝트 생성 시 필요한 파일
1. `package.json` (dependencies, devDependencies, scripts)
2. `vite.config.js` (플러그인, 별칭, 빌드 설정)
3. `tsconfig.json` (경로 별칭, 타입)
4. `eslint.config.mjs` (flat config)
5. `.prettierrc.json`
6. `postcss.config.js` (tailwind + autoprefixer)
7. `tailwind.config.js` (커스텀 테마)
8. `index.html` (루트)
9. `vitest.config.js`
10. `playwright.config.mjs`
11. `.npmrc` (pnpm 설정)
12. `pnpm-workspace.yaml`
13. `.env.example`
14. `src/main.js`, `src/i18n.js`, `src/plugins/`
### Vue 2.x (staging) 프로젝트 생성 시 필요한 파일
1. `package.json` (dependencies, devDependencies, scripts)
2. `webpack.config.cjs` (loaders, 플러그인, 별칭)
3. `babel.config.js` (프리셋, 플러그인, 별칭)
4. `tsconfig.json` (경로 별칭, 타입)
5. `eslint.config.mjs` (flat config)
6. `.prettierrc.json`
7. `postcss.config.js` (autoprefixer only)
8. `public/index.html` (webpack 템플릿)
9. `vitest.config.js` (vite-plugin-vue2)
10. `playwright.config.mjs`
11. `.env.example`
12. `src/main.js`, `src/i18n.js`, `src/vue-shim.d.ts`