폴더 구조에 대한 고민

동기

• 프로젝트가 진행됨에 따라 도메인이 복잡해져 폴더 구조 개편의 필요성을 느꼈다.

기존 폴더 구조

.
├── api
├── components
├── pages
├── atoms
├── hooks
├── configs
└── utils

• 설명
  • api : api 호출에 관한 로직이 들어있다.
  • components : 각종 컴포넌트들이 들어있다.
  • pages : 컴포넌트를 조합하여 만들어진 페이지 단위의 컴포넌트들이 들어있다.
  • atoms : 전역 상태 atoms가 들어있다.
  • hooks : 커스텀 훅 로직이 들어있다.
  • configs : 각종 설정이 들어있다 ex) axios 설정
  • utils : 각종 유틸 함수들이 들어 있다.
• 폴더 구조만 보고 이것이 어떤 역할을 하는지 알기가 힘들었다.

개선 폴더 구조

.
├── components
├── domains
│   ├── A
│   │   ├── api
│   │   ├── components
│   │   ├── atoms
│   │   ├── hooks
│   │   └── utils
│   ├── B
│   │   ├── api
│   │   ├── components
│   │   ├── atoms
│   │   ├── hooks
│   │   └── utils
│   └── C
│       ├── api
│       ├── components
│       ├── atoms
│       ├── hooks
│       └── utils
├── pages
├── atoms
├── hooks
├── configs
└── utils

• 설명
  • components : 도메인에 종속되지 않은 순수한 컴포넌트를 정의한다. 다른 프로젝트에서 해당 폴더를 떼어서 사용할 수 있을 정도의 순수성을 유지한다. ex) Button, Input
  • domains : 도메인과 연관된 요소들을 정의한다. 도메인 별로 하위 레이어로 분리하고 하위에서 다시 api/components/atoms/hooks/utils를 구분한다.(특정 도메인에 해당하는 것들을 모아둔다. => 코로케이션)
    • domains/~/api : api 호출 로직을 작성한다.
    • domains/~/components : 도메인이 주입된 혹은 연관된 컴포넌트를 작성한다. 조합 컴포넌트도 여기에 작성한다.
    • domains/~/hooks : 도메인에 연관된 커스텀 훅을 작성한다.
    • domains/~/atoms : 도메인에 연관된 전역 상태를 정의한다.
    • domains/~/utils : 도메인에 연관된 유틸 함수를 정의한다.
  • pages : 페이지 단위의 컴포넌트를 정의한다. 최대한 컴포넌트로 추상화시켜 페이지단에서는 컴포넌트만을 호출할 수 있도록 구현한다. (비즈니스 로직을 드러내지 않는다)
  • atoms : 도메인에 종속되지 않는 전역 상태를 작성한다 ex) theme, loading, alert, modal
  • hooks : 도메인에 종속되지 않은 커스텀 훅을 작성한다. ex) useInput, useBoolean
  • configs : 프로젝트에 필요한 설정들을 정의한다.
    • config/rest : axios 관련 설정과 endpoint path가 들어있다.
  • utils : 어플리케이션 전체에서 사용되는 유틸 함수를 정의한다.
• 비슷한 것들끼리 묶어두어 흐름 파악이 쉬워졌다.

고민점

• 만약 A 도메인에서 사용하고 있는 로직인데, 새롭게 D 도메인을 개발하면서 A 도메인에서 사용한 로직이 필요한 경우 A 도메인의 것을 import해서 사용할 것인가에 대한 고민
  • 2번 반복된다면 일단 import 해서 사용하고, 3번 이상 반복된다면 shared 폴더에서 관리한다.

참고 자료

• https://ahnheejong.name/articles/package-structure-with-the-principal-of-locality-in-mind/