프로젝트를 개발하면서 **도메인 주도 설계(DDD: Domain-Driven Design)**를 도입하여 코드의 모듈화와 유지보수성을 개선했습니다.
이 글에서는 기존 프로젝트 구조의 문제점과 이를 해결하기 위해 적용한 DDD 아키텍처 기반의 폴더 구조를 소개합니다.
초기에는 폴더 구조가 단순하고, UI와 비즈니스 로직이 섞여 있는 형태였습니다.
이로 인해 코드가 복잡해지고, 유지보수가 어려웠습니다.
✔️ 주요 문제점
app/
내부에서 API 호출이 이루어지는 경우가 많음이를 해결하기 위해 DDD 아키텍처를 적용한 프로젝트 구조를 설계했습니다.
DDD 패턴을 적용하여 UI(/app/
)와 도메인 비즈니스 로직(/domains/
)을 완전히 분리했습니다.
root/
├── src/
│ ├── app/ # Next.js 라우팅 시스템 (각 도메인별 page.tsx 관리)
│ │ ├── (auth)/ # 인증 관련 도메인
│ │ │ ├── signin/ # 로그인 페이지
│ │ │ ├── signup/ # 회원가입 페이지
│ │ │ ├── account/ # 마이페이지
│ │ ├── (post)/ # 게시판 관련 도메인
│ │ │ ├── list/ # 게시글 목록 페이지
│ │ │ ├── detail/ # 게시글 상세 페이지
│ │ │ ├── update/ # 게시글 수정 페이지
│ │ │ ├── create/ # 게시글 작성 페이지
│ │ ├── layout.tsx # 공통 레이아웃
│ │ ├── api/ # Next.js API 라우트
│ │ │ ├── [...nextauth]/ # NextAuth route
│ ├── middleware.ts # Next.js 미들웨어 설정
│
│ ├── domains/ # 도메인 비즈니스 로직 관리
│ │ ├── auth/ # 인증 도메인
│ │ │ ├── _components/ # UI 컴포넌트
│ │ │ ├── _hooks/ # 커스텀 훅
│ │ │ ├── _services/ # 비즈니스 로직
│ │ │ ├── _types/ # 타입 정의
│ │ │ ├── _validations/ # 유효성 검사
│ │ │ ├── signin/ # 로그인 관련 로직
│ │ │ ├── signup/ # 회원가입 관련 로직
│ │ │ ├── account/ # 마이페이지 관련 로직
│ │ ├── post/ # 게시판 도메인
│ │ │ ├── _components/
│ │ │ ├── _hooks/
│ │ │ ├── _services/
│ │ │ ├── _types/
│ │ │ ├── list/ # 게시글 목록 로직
│ │ │ ├── detail/ # 게시글 상세 로직
│ │ │ ├── update/ # 게시글 수정 로직
│ │ │ ├── create/ # 게시글 작성 로직
│
│ ├── shared/ # 공통 모듈 (도메인 간 공유)
│ │ ├── _components/ # 재사용 가능한 UI 컴포넌트
│ │ ├── _hooks/ # 공통 훅
│ │ ├── _utils/ # 유틸리티 함수
│ │ ├── _constants/ # 상수 관리
│ │ ├── _types/ # 공용 타입 정의
│
│ ├── lib/ # 외부 라이브러리 및 설정
│ │ ├── tanstackQuery/ # React Query 설정
│ │ ├── mocks/ # MSW 관련 설정
│ │ │ ├── handlers.ts # API 핸들러
│ │ │ ├── browser.ts # 브라우저 환경에서 MSW 실행
│ │ │ ├── server.ts # Jest 테스트 환경에서 MSW 실행
│
│ ├── styles/ # 스타일 관련 파일
│ ├── tests/ # 테스트 관련 폴더
│
├── public/ # 정적 파일
├── jest.setup.ts # Jest 설정 파일
├── jest.config.js # Jest 환경 설정
├── tsconfig.json # TypeScript 설정
├── next.config.js # Next.js 설정
└── .env # 환경 변수 파일