Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
label: Code smells & Issues
position: 4
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
sidebar_position: 4
sidebar_class_name: sidebar-item--wip
pagination_next: reference/index
---

import WIP from '@site/src/shared/ui/wip/tmpl.mdx'

# 크로스 임포트

<WIP ticket="220" />

> Cross-import는 Layer나 추상화가 원래의 책임 범위를 넘어설 때 발생합니다. 방법론에서는 이러한 Cross-import를 해결하기 위한 별도의 Layer를 정의합니다.

## 참고 자료

- [(스레드) Cross-import가 불가피한 상황 논의](https://t.me/feature_sliced/4515)
- [(스레드) Entity에서 Cross-import 해결 방법](https://t.me/feature_sliced/3678)
- [(스레드) Cross-import와 책임 범위 관계](https://t.me/feature_sliced/3287)
- [(스레드) Segment 간 import 이슈 해결](https://t.me/feature_sliced/4021)
- [(스레드) Shared 내부 구조의 Cross-import 해결](https://t.me/feature_sliced/3618)
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
---
sidebar_position: 2
sidebar_class_name: sidebar-item--wip
---

import WIP from '@site/src/shared/ui/wip/tmpl.mdx'

# Desegmentation

<WIP ticket="148" />

## 상황

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

```sh
├── 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와 관련된 모듈들을 한 곳에 모아 배치합니다.

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

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

```diff
- ├── 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/
```

## 참고 자료

* [(아티클) Coupling과 Cohesion의 명확한 이해](https://enterprisecraftsmanship.com/posts/cohesion-coupling-difference/)
* [(아티클) Coupling, Cohesion과 Law of Demeter](https://medium.com/german-gorelkin/low-coupling-high-cohesion-d36369fb1be9)
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
sidebar_position: 3
sidebar_class_name: sidebar-item--wip
sidebar_label: Routing
---

import WIP from '@site/src/shared/ui/wip/tmpl.mdx'

# Routing

<WIP ticket="169" />

## 상황

Page의 URL이 하위 Layer에 하드코딩되어 있는 경우가 있습니다.

```tsx title="entities/post/card"
<Card>
<Card.Title
href={`/post/${data.id}`}
title={data.name}
/>
...
</Card>
```

## 문제점

URL이 Page Layer에 집중되지 않고, 하위 Layer에 분산되어 관리됩니다.

## 무시했을 때의 결과

URL 변경 시 Page Layer 외의 여러 하위 Layer에 있는 URL과 redirect 로직을 모두 고려해야 합니다.

결과적으로 단순한 Product Card 같은 Component도 Page의 책임을 가지게 되어, 프로젝트 구조가 불필요하게 복잡해집니다.

## 해결 방안

URL과 redirect 로직은 Page Layer와 그 상위 Layer에서만 다루도록 합니다.

이를 위해 composition, props 전달, Factory 패턴 등을 활용해 URL 정보를 하위 Layer에 전달합니다.

## 참고 자료

- [(스레드) Entity/Feature/Widget에서 Routing 처리의 영향](https://t.me/feature_sliced/4389)
- [(스레드) Page에서만 Route 로직을 다뤄야 하는 이유](https://t.me/feature_sliced/3756)
Loading