🤔 DDD 설계 방식, 아키텍쳐 이해하기

[aahreum]

• 안티패턴을 개선해보면서 알게된 내용을 정리했습니다.
• 관련 PR #user refactoring

---

👍 안티 패턴 개선 방향

1. 도메인(DDD) 주도 설계 방식 적용하기 (변화에 유연한 구조 만들기 → 역할 분리)

• DDD 참고 >
• 폴더 구조 참고 >
• 도메인 별로 폴더를 분리해서, 도메인 내의 응집성을 높이고 서로 다른 도메인간의 의존도를 낮추기

2. 아키텍쳐 분리

• 계층별 책임에 맞게 레이어 분리하기

---

🤯 잘 모르겠는 용어 정리

아키텍쳐(Architecture)? 뭔데?

• 코드가 섞이지 않고, 역할이 명확한 구조를 만드는 방식 (a.k.a. 청사진)
• 명확한 정답이 있는건 아님

레이어???

1. Presentation Layer (프레젠테이션 계층)

• 화면과 사용자 인터랙션만 담당함 (React 컴포넌트)

무슨 역할을 할까?

• UI 그리기
• 상태 보여주기
• 사용자 입력 처리 (onClick 등...)
• Next.js라면 서버/클라이언트 컴포넌트를 분리하기도 함 (준비된 데이터를 단순히 UI로 표현)

2. Application Layer (애플리케이션 계층)

• use case를 정의하는 계층
• 이 상황에서 어떤 동작을 해야하는가?를 결정
• 앱을 어떻게 동작시킬것인가를 결정하는 로직들 (행동대장 느낌..)
• ex) 유저 데이터를 불러오고 저장

3. Domain Layer (도메인 계층)

• 비즈니스 규칙, 정책, 순수 로직만 담당함
• UI나 기술에 의존하지 X (UI 코드 X, fetch X)
• ex) 유효성 검사

+) 아직 헷갈리는거 (날짜 포맷팅 함수 예시)

• 우리 서비스는 날짜를 이렇게 보여줘 (7일 이후 YYYY-MM-DD, 방금전, n분전..등등): 도메인 계층
• 단순히 date를 iso string으로 변환하기: 유틸함수

4. Infrastructure Layer (인프라 계층)

• 외부 시스템과 실제로 연결되는 구현부
• 기술 의존성이 있는 코드는 인프라 계층에 해당됨
• ex) axios 인스턴스, fetch wrapper, 로컬스토리지 접근, 외부 api 연동 등등

---

✨ 개선 과정

폴더 구조

📦src
 ┣ 📂app                  # Next.js Presentation Layer (UI + Routing)
 ┃ ┣ 📜layout.tsx
 ┃ ┗ 📜page.tsx
 ┗ 📂features
 ┃ ┗ 📂user
 ┃ ┃ ┣ 📂application      # Use Case (Flow)
 ┃ ┃ ┣ 📂domain           # Rules / Entities
 ┃ ┃ ┣ 📂infrastructure   # API / Storage / External
 ┃ ┃ ┗ 📂ui               # Components

호출 흐름

🎯 UI → Application → Infrastructure
Application → Domain

• UI는 Application만 호출한다
• Application은 Domain + Infra 모두 호출 가능 (Domain은 Application을 절대 호출 할 수 없음!!!!!!!!!!!!!)
• Domain은 순수 로직 → Infra, UI 사용 금지
• Infra는 Domain을 의존해도 되지만 앱 전체는 Infra에 종속되면 안 됨

그럼 공통/공용 로직은?

• shared 폴더 하위에 담아두기
• axios instance 설정은 모든 곳에서 사용하기 때문에 shared 하위 infrastructure가 적합
• 그러면 폴더 구조가 또 이렇게 변화함

📦src
 ┣ 📂app
 ┃ ┣ 📜layout.tsx
 ┃ ┗ 📜page.tsx
 ┣ 📂shared                      # 공용 레이어
 ┃ ┣ 📂ui                        # 공용 UI 컴포넌트
 ┃ ┣ 📂hooks                     # 공용 hooks
 ┃ ┣ 📂utils                     # 공용 util
 ┃ ┗ 📂infrastructure            # axiosInstance, storage 등
 ┗ 📂features
   ┗ 📂user
     ┣ 📂application
     ┣ 📂domain
     ┣ 📂infrastructure
     ┗ 📂ui

[aahreum]

/**
 * application layer에서는 useState를 쓰면 안됨 -> hook 절대 포함 X
 * application layer는 React에 대해 알지 못해야 함..... 다른 상태관리 툴도 몰라야함...... 그냥 다 몰라.. 거의 하하 유니버스..
 */

import { getUserData } from "@/features/user/infrastructure/user.api";

export const getUserProfile = async () => {
  return await getUserData();
};

application layer의 역할이 아직 좀 헷갈림...
UI가 Application만 호출해야 해서 징검다리? 역할을 위해 한번 감싸주었는데.. 뭔가 아직까지는 왜 이렇게 해야하는 건지 와닿지 않아서 아리송...
그냥 파일 하나 더 만든 느낌이라서 잘 모르겠음...