Slice와 Segment

Slice

Slice는 Feature-Sliced Design의 두 번째 구성 단위입니다. Slice의 주 목적은 제품, 비즈니스, Application 관점에서 코드를 체계적으로 그룹화하는 것입니다.

Slice 이름은 표준화되어 있지 않고 Application의 비즈니스 도메인에 따라 결정됩니다. 예시:

• 사진 갤러리: photo, effects, gallery-page
• 소셜 네트워크: post, comments, news-feed

Shared와 App Layer는 Slice를 포함하지 않습니다. Shared는 Business Logic을 포함하지 않고, App은 Application 전체 관련 코드만 다루기 때문입니다.

Zero 결합도과 High 응집도

Slice는 독립적이고 응집도 높은 코드 그룹이어야 합니다. 아래 그래픽은 _응집도_과 결합도 개념을 시각화합니다:

Image inspired by https://enterprisecraftsmanship.com/posts/cohesion-coupling-difference/

이상적인 Slice 특징:

1. 독립적 — 같은 Layer의 다른 Slice와 Zero 결합도
2. 높은 응집도 — 핵심 목적 관련 코드를 포함

Slice의 독립성은 Layer Import Rule로 강제됩니다:

Slice의 모듈은 하위 Layer의 다른 Slice만 Import 가능

Slice의 Public API Rule

Slice 내부 구조는 자유롭지만, 다른 Slice가 사용할 좋은 Public API를 제공해야 합니다. 이는 Slice Public API Rule로 강제됩니다:

모든 Slice(와 Slice가 없는 Layer의 Segment)는 Public API를 정의해야 합니다.

외부 모듈은 Slice/Segment의 내부 구조가 아닌 Public API만 참조 가능

자세한 내용은 Public API Reference를 참고하세요.

Slice Group

연관된 Slice들은 폴더로 그룹화할 수 있습니다. 단, 다른 Slice와 동일한 격리 규칙을 따라야 하며, 그룹 내 코드 공유는 불가능합니다.

Segment

Segment는 마지막 구성 단위로, 기술적 특성에 따라 코드를 그룹화합니다.

표준 Segment:

• ui — UI 관련: Component, Date Formatter, Style 등
• api — Backend 통신: Request Function, Data Type, Mapper 등
• model — Data Model: Schema, Interface, Store, Business Logic
• lib — Slice 내부 Library 코드
• config — Configuration과 Feature Flag

각 Layer의 Segment 사용법은 Layer Page를 참조하세요.

Custom Segment도 생성 가능하며, App과 Shared Layer에서 주로 사용됩니다.

Segment 이름은 코드 목적을 명확히 해야 합니다. components, hooks, types같은 모호한 이름은 피하세요.