5e. 프론트엔드 디렉토리 구성

도메인 주도 설계의 철학을 따른다. 아토믹 디자인의 컴포넌트 구분을 따른다.

• 특정 기능의 하위 디렉토리는 아래와 같이 구성한다.
  • adapters: 시스템 외부와 통신하는 객체를 정의한다. 외부 의존성을 담당한다. Container 컴포넌트가 adapters의 객체를 presentational component나 business logic에 주입해서 연결하는 역할을 한다.
  • components/molecules: html 기본 태그로 이루어진 간단한 컴포넌트
  • components/organisms: html 기본 태그와 molecule 컴포넌트로 이루어진 복잡한 컴포넌트
  • components/templates: 페이지 레이아웃을 구성하는 컴포넌트. 상태는 외부에서 주입받는다.
  • containers: 외부 의존성을 담당한다. 상태를 관리하고 상태를 presentational components나 비즈니스 로직에 주입한다. UI는 최대한 배제한다.
  • domain/application: 비즈니스 로직을 담당한다. 외부 의존성을 주입받아서 사용한다. 비즈니스 로직 특성에 따라 순수한 타입스크립트 코드나 react hook으로 작성한다. utility 성격(=core)의 의존성은 직접 의존할 수 있다.
  • domain/model: 기능의 핵심이 되는 모델을 선언한다.

src
└── feature
    ├── adapters
    │   └── apiClient.ts
    ├── components
    │   ├── molecules
    │   │   └── PresentationalComponent.tsx
    │   ├── organisms
    │   │   └── PresentationalComponentComposed.tsx
    │   └── templates
    │       └── TemplatesStatesShouldBeInjected.tsx
    ├── containers
    │   └── SomeContainer.tsx
    └── domain
        ├── application
        │   ├── businessLogic.ts
        │   └── useBusinessLogicHook.ts
        └── model
            └── DomainModel.ts