project-structure

Project Structure

프로젝트 폴더 구조를 업계 표준에 맞게 정리하는 스킬입니다.

Core Principles

"바탕화면에 코드를 두지 않는다" "분류 기준을 섞지 않는다"

Safety Rules

명령어	상태	대안
rm -rf	🔴 금지	_legacy/로 이동
rm	🔴 금지	_legacy/로 이동
mv to _legacy/	✅ 허용	기본 정리 방식
mkdir	✅ 허용	새 구조 생성

정리 방식

# ❌ NEVER: 삭제
rm -rf old-folder

# ✅ ALWAYS: 레거시 폴더로 이동
mkdir -p _legacy
mv old-folder _legacy/old-folder_$(date +%Y%m%d)

---

Part 1: 개발 루트 디렉토리

권장 루트 위치

~/dev        # 가장 추천
~/code
~/workspace
~/git

컨텍스트(목적) 중심 구조 (추천)

~/dev/
├── work/              # 회사 업무
│   ├── company-a/
│   │   ├── backend-api/
│   │   └── frontend-ui/
│   └── company-b/
├── personal/          # 개인/사이드 프로젝트
│   ├── my-blog/
│   └── todo-app/
├── study/             # 강의/책 실습
│   ├── algorithm-101/
│   └── react-course/
├── open-source/       # Fork/기여 프로젝트
│   └── some-lib/
├── playground/        # 일회성 테스트 (샌드박스)
│   └── test-script.py
└── dotfiles/          # 개인 설정 파일 버전관리

호스트(Source) 중심 구조 (Go 스타일)

~/dev/
├── github.com/
│   ├── my-username/
│   │   └── project-a/
│   └── other-user/
│       └── awesome-lib/
├── gitlab.com/
│   └── company-group/
│       └── company-project/
└── bitbucket.org/

---

Part 2: 프로젝트 내부 구조

기본 프로젝트 스캐폴딩

project-name/
├── src/              # 실제 소스 코드
├── assets/           # 이미지, 폰트, 정적 파일
├── config/           # 설정 파일
├── docs/             # 문서화 자료
├── scripts/          # 빌드/배포 스크립트
├── tests/            # 테스트 코드
├── dist/             # 빌드 결과물 (Git 제외)
├── _legacy/          # 정리된 레거시 코드
├── .gitignore
├── .env.example      # 환경변수 예시 (.env는 Git 제외)
├── README.md
└── LICENSE

---

Part 3: 프론트엔드 아키텍처 패턴

Pattern A: Next.js App Router + Colocation

라우트(페이지) 기준으로 폴더 생성, 필요한 파일을 같은 폴더에 배치

app/
├── (marketing)/           # Route Group (URL에 미반영)
│   ├── page.tsx
│   ├── components/        # 이 라우트 전용 컴포넌트
│   │   └── Hero.tsx
│   └── styles.css
├── dashboard/
│   ├── layout.tsx
│   ├── page.tsx
│   ├── loading.tsx
│   ├── error.tsx
│   └── components/
│       ├── DashboardHeader.tsx
│       └── DashboardStats.tsx
├── api/
│   └── users/
│       └── route.ts
└── globals.css
lib/                       # 공용 유틸리티
components/                # 전역 공용 컴포넌트

적합한 경우: Next.js 기반 프로젝트

---

Pattern B: Bulletproof React (Feature-based)

기능(Feature) 단위로 묶어서 유지보수 용이한 구조