|
| 1 | +--- |
| 2 | +title: Slice와 Segment |
| 3 | +sidebar_position: 2 |
| 4 | +pagination_next: reference/public-api |
| 5 | +--- |
| 6 | + |
| 7 | +# Slice와 Segment |
| 8 | + |
| 9 | +## Slice |
| 10 | + |
| 11 | +Slice는 Feature-Sliced Design의 두 번째 구성 단위입니다. Slice의 주 목적은 제품, 비즈니스, Application 관점에서 코드를 체계적으로 그룹화하는 것입니다. |
| 12 | + |
| 13 | +Slice 이름은 표준화되어 있지 않고 Application의 비즈니스 도메인에 따라 결정됩니다. 예시: |
| 14 | +- 사진 갤러리: `photo`, `effects`, `gallery-page` |
| 15 | +- 소셜 네트워크: `post`, `comments`, `news-feed` |
| 16 | + |
| 17 | +Shared와 App Layer는 Slice를 포함하지 않습니다. Shared는 Business Logic을 포함하지 않고, App은 Application 전체 관련 코드만 다루기 때문입니다. |
| 18 | + |
| 19 | +### Zero 결합도과 High 응집도 {#zero-coupling-high-cohesion} |
| 20 | + |
| 21 | +Slice는 독립적이고 응집도 높은 코드 그룹이어야 합니다. 아래 그래픽은 _응집도_과 _결합도_ 개념을 시각화합니다: |
| 22 | + |
| 23 | +<figure> |
| 24 | + <img src="/img/coupling-cohesion-light.svg#light-mode-only" alt="" /> |
| 25 | + <img src="/img/coupling-cohesion-dark.svg#dark-mode-only" alt="" /> |
| 26 | + <figcaption> |
| 27 | + Image inspired by https://enterprisecraftsmanship.com/posts/cohesion-coupling-difference/ |
| 28 | + </figcaption> |
| 29 | +</figure> |
| 30 | + |
| 31 | +이상적인 Slice 특징: |
| 32 | + 1. 독립적 — 같은 Layer의 다른 Slice와 Zero 결합도 |
| 33 | + 2. 높은 응집도 — 핵심 목적 관련 코드를 포함 |
| 34 | + |
| 35 | +Slice의 독립성은 [Layer Import Rule][layers--import-rule]로 강제됩니다: |
| 36 | + |
| 37 | +> _Slice의 모듈은 하위 Layer의 다른 Slice만 Import 가능_ |
| 38 | +
|
| 39 | +### Slice의 Public API Rule |
| 40 | + |
| 41 | +Slice 내부 구조는 자유롭지만, 다른 Slice가 사용할 좋은 Public API를 제공해야 합니다. 이는 **Slice Public API Rule**로 강제됩니다: |
| 42 | + |
| 43 | +> _모든 Slice(와 Slice가 없는 Layer의 Segment)는 Public API를 정의해야 합니다._ |
| 44 | +> |
| 45 | +> _외부 모듈은 Slice/Segment의 내부 구조가 아닌 Public API만 참조 가능_ |
| 46 | +
|
| 47 | +자세한 내용은 [Public API Reference][ref-public-api]를 참고하세요. |
| 48 | + |
| 49 | +### Slice Group |
| 50 | + |
| 51 | +연관된 Slice들은 폴더로 그룹화할 수 있습니다. 단, 다른 Slice와 동일한 격리 규칙을 따라야 하며, 그룹 내 **코드 공유는 불가능**합니다. |
| 52 | + |
| 53 | + |
| 54 | + |
| 55 | +## Segment |
| 56 | + |
| 57 | +Segment는 마지막 구성 단위로, 기술적 특성에 따라 코드를 그룹화합니다. |
| 58 | + |
| 59 | +표준 Segment: |
| 60 | + |
| 61 | +- `ui` — UI 관련: Component, Date Formatter, Style 등 |
| 62 | +- `api` — Backend 통신: Request Function, Data Type, Mapper 등 |
| 63 | +- `model` — Data Model: Schema, Interface, Store, Business Logic |
| 64 | +- `lib` — Slice 내부 Library 코드 |
| 65 | +- `config` — Configuration과 Feature Flag |
| 66 | + |
| 67 | +각 Layer의 Segment 사용법은 [Layer Page][layers--layer-definitions]를 참조하세요. |
| 68 | + |
| 69 | +Custom Segment도 생성 가능하며, App과 Shared Layer에서 주로 사용됩니다. |
| 70 | + |
| 71 | +Segment 이름은 코드 목적을 명확히 해야 합니다. `components`, `hooks`, `types`같은 모호한 이름은 피하세요. |
| 72 | + |
| 73 | +[layers--layer-definitions]: /docs/reference/layers#layer-definitions |
| 74 | +[layers--import-rule]: /docs/reference/layers#import-rule-on-layers |
| 75 | +[ref-public-api]: /docs/reference/public-api |
0 commit comments