프론트엔드에서 React와 TypeScript를 사용할 때는 일반적으로 백엔드의 DDD 설계를 그대로 적용하지는 않습니다. 이유는 DDD가 주로 도메인 로직과 복잡한 비즈니스 규칙을 다루는 데 중점을 두고 있기 때문입니다. 프론트엔드에서는 UI와 상태 관리가 주된 관심사이며, DDD보다는 모듈화와 상태 관리 중심의 설계가 더 적합합니다.
DDD와 유사한 도메인 중심 설계 아이디어를 일부 차용하여, 기능별로 폴더를 구성하는 방식이 적합합니다.
plaintext
코드 복사
src/
├── assets/ # 이미지, 폰트, SVG 등 정적 파일
├── components/ # 재사용 가능한 공통 컴포넌트
│ ├── Button/
│ │ ├── Button.tsx # Button 컴포넌트
│ │ └── Button.test.tsx # Button 테스트 파일
│ └── Modal/
├── features/ # 도메인별 기능 (DDD와 유사한 개념)
│ ├── product/ # Product 관련 도메인
│ │ ├── components/ # 도메인 전용 컴포넌트
│ │ ├── hooks/ # 커스텀 훅
│ │ ├── pages/ # Product 관련 페이지
│ │ ├── services/ # API 호출 로직
│ │ ├── types/ # 타입 정의 (TypeScript 인터페이스 등)
│ │ └── productSlice.ts # 상태 관리 파일 (Redux or Context)
│ └── user/
├── hooks/ # 공통 커스텀 훅 (e.g., useFetch, useDebounce 등)
├── layouts/ # 페이지 레이아웃 컴포넌트
│ └── MainLayout.tsx
├── pages/ # 라우팅에 사용되는 최상위 페이지 컴포넌트
│ ├── Home.tsx
│ ├── ProductDetail.tsx
│ └── NotFound.tsx
├── routes/ # React Router 설정 파일
│ └── AppRoutes.tsx
├── services/ # 공통 API 호출 로직 (e.g., Axios 인스턴스)
│ ├── apiClient.ts # Axios 설정
│ ├── productApi.ts # Product 관련 API
│ └── userApi.ts # User 관련 API
├── store/ # 전역 상태 관리 (Redux, Context API 등)
│ ├── index.ts # Redux store 설정
│ └── slices/ # Redux 슬라이스
│ ├── productSlice.ts
│ └── userSlice.ts
├── styles/ # 글로벌 스타일 및 테마 파일
│ ├── GlobalStyle.ts
│ ├── theme.ts
├── types/ # 전역 타입 정의
│ ├── index.ts
│ ├── api.d.ts # API 응답 관련 타입
│ └── models.d.ts # 데이터 모델 타입
├── utils/ # 유틸리티 함수 (e.g., 날짜 포맷, 로컬스토리지)
│ └── formatDate.ts
├── App.tsx # 최상위 컴포넌트
├── index.tsx # ReactDOM 렌더링
└── react-app-env.d.ts # TypeScript 환경 파일
components/
features/
product
, user
등 주요 비즈니스 단위를 기준으로 구성합니다.services
), 상태 관리(productSlice.ts
), 타입 정의(types
) 등을 모아 둡니다.hooks/
useFetch
, useDebounce
, useLocalStorage
등.pages/
Home
, ProductDetail
, NotFound
.services/
features
폴더 안에 작성합니다.store/
slices/
폴더에 상태 관리를 위한 슬라이스를 정의합니다.styles/