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/