Desegmentation

WIP

이 글은 작성 중입니다

이 글의 발행을 앞당기려면 다음을 수행할 수 있습니다:

📢 의견을 공유해주세요 글에서 (댓글/이모지 반응)
💬 관련 자료를 모아주세요 채팅에서 주제와 관련된 자료
⚒️ 기여하기 다른 방식으로

🍰 Stay tuned!

상황

프로젝트에서 동일한 도메인의 모듈들이 서로 연관되어 있음에도 불구하고, 프로젝트 전체에 불필요하게 분산되어 있는 경우가 많습니다.

├── components/
|    ├── DeliveryCard
|    ├── DeliveryChoice
|    ├── RegionSelect
|    ├── UserAvatar
├── actions/
|    ├── delivery.js
|    ├── region.js
|    ├── user.js
├── epics/
|    ├── delivery.js
|    ├── region.js
|    ├── user.js
├── constants/
|    ├── delivery.js
|    ├── region.js
|    ├── user.js
├── helpers/
|    ├── delivery.js
|    ├── region.js
|    ├── user.js
├── entities/
|    ├── delivery/
|    |      ├── getters.js
|    |      ├── selectors.js
|    ├── region/
|    ├── user/

문제점

이는 높은 응집도 원칙을 위반하며, Changes Axis의 과도한 확장을 초래합니다.

무시했을 때의 결과

delivery 관련 로직 수정 시 여러 위치의 코드를 찾아 수정해야 하며, 이는 Changes Axis를 불필요하게 확장합니다
user 관련 로직을 이해하려면 프로젝트 전반의 actions, epics, constants, entities, components를 모두 찾아봐야 합니다
암묵적 연결로 인해 도메인 영역이 비대해지고 관리가 어려워집니다
불필요한 파일들이 쌓여 문제 인식이 어려워집니다

해결 방안

도메인이나 use case와 관련된 모듈들을 한 곳에 모아 배치합니다.

이를 통해 모듈 학습이나 수정 시 필요한 모든 요소를 쉽게 찾을 수 있습니다.

이 접근은 코드베이스의 탐색성과 가독성을 높이고, 모듈 간 관계를 더 명확하게 보여줍니다.

- ├── components/
- |    ├── DeliveryCard
- |    ├── DeliveryChoice
- |    ├── RegionSelect
- |    ├── UserAvatar
- ├── actions/
- |    ├── delivery.js
- |    ├── region.js
- |    ├── user.js
- ├── epics/{...}
- ├── constants/{...}
- ├── helpers/{...}
  ├── entities/
  |    ├── delivery/
+ |    |      ├── ui/ # ~ components/
+ |    |      |   ├── card.js
+ |    |      |   ├── choice.js
+ |    |      ├── model/
+ |    |      |   ├── actions.js
+ |    |      |   ├── constants.js
+ |    |      |   ├── epics.js
+ |    |      |   ├── getters.js
+ |    |      |   ├── selectors.js
+ |    |      ├── lib/ # ~ helpers
  |    ├── region/
  |    ├── user/

상황​

문제점​

무시했을 때의 결과​

해결 방안​

참고 자료​

상황

문제점

무시했을 때의 결과

해결 방안

참고 자료