프로젝트 구조 가이드

1. 개인/소규모 프로젝트 구조

project-root/
 ┣ index.html
 ┣ src/
 ┃ ┣ components/
 ┃ ┣ pages/
 ┃ ┣ hooks/
 ┃ ┗ main.tsx
 ┣ vite.config.ts
 ┣ tsconfig.json
 ┗ tailwind.config.js

✅ 특징

• 최상위에 바로 index.html + src 폴더
• 모든 설정 파일(vite, tsconfig, tailwind)도 루트에 존재
• 구조가 단순해서 빠르게 시작하기 좋음

👍 장점

• 러닝커브 낮음 → 혼자 개발하거나 작은 토이 프로젝트에 최적
• 설정 파일 경로가 단순 → 초기 설정 속도가 빠름

👎 단점

• 백엔드/멀티앱 확장에 불리함
• src 폴더에 모든 게 몰리다 보니 점점 커지면 관리가 힘들어짐

2. 실무(풀스택/중규모 팀) 구조

project-root/
 ┣ client/              # 프론트엔드
 ┃ ┣ index.html
 ┃ ┣ src/
 ┃ ┣ tsconfig.json
 ┃ ┗ tailwind.config.js (여기 두는 경우도 있음 / root 혹은 client 하나만 존재)
 ┣ server/              # 백엔드 (Express/Nest 등)
 ┃ ┣ src/
 ┃ ┗ tsconfig.json
 ┣ vite.config.ts       # 프론트 빌드 설정
 ┣ tailwind.config.js   # 전역 Tailwind 설정
 ┣ tsconfig.json        # 공용 TS 설정
 ┗ package.json

✅ 특징

• client / server 분리
• 공용 설정(tsconfig.base.json, eslint, prettier 등)은 루트에 두고, 각 폴더에 세부 tsconfig 추가
• 프론트는 Vite, 백엔드는 Express/Nest 등으로 따로 관리 가능

👍 장점

• 프론트/백 분리로 협업 시 책임 구분이 명확
• 풀스택 환경에 적합 (API 서버 + 웹앱 동시 관리)
• 확장성 높음 (추후 admin/ 모바일 앱 등 추가하기 좋음)

👎 단점

• 구조가 단순 프로젝트엔 오버킬
• 설정 파일 중복될 수 있음 (tsconfig 여러 개)

3. 대규모/모노레포 구조

project-root/
 ┣ apps/
 ┃ ┣ web/           # 메인 웹앱
 ┃ ┣ admin/         # 어드민 웹앱
 ┃ ┗ server/        # 백엔드
 ┣ packages/
 ┃ ┣ ui/            # 공용 UI 컴포넌트
 ┃ ┗ utils/         # 공용 유틸
 ┣ tsconfig.base.json
 ┣ vite.config.ts (혹은 여러 개)
 ┗ package.json

✅ 특징

• apps: 실제로 실행되는 앱 (web, admin, server 등)
• packages: 여러 앱이 공용으로 쓰는 라이브러리

👍 장점

• 여러 앱/팀 동시 개발 가능
• 공용 코드 재사용 극대화 (ui, utils)
• Turborepo, Nx, pnpm workspaces와 궁합 좋음

👎 단점

• 러닝커브 높음 (워크스페이스 관리, 빌드 파이프라인 등 필요)
• 작은 프로젝트에는 과한 구조

✅ 정리 – 왜 이렇게 나누는 게 좋을까?

• 개인/소규모 → 단순함 = 속도
• 실무/중규모 → client/server 분리 = 협업 & 확장성
• 대규모 → 모노레포 = 다수 앱 & 공용 패키지 관리