Table of contents
시작하기
FSD(Feature-Sliced Design) 는 프론트엔드 애플리케이션의 코드를 조직하는 규칙에 대해서 정리합니다. 이 방법론의 주요 목적은 끊임없이 변화하는 비즈니스 요구 사항에 프로젝트를 더 쉽게 이해하고 구조화하도록 하는 것입니다.
특징
- 명시적인 비즈니스 로직: 도메인 범위 덕분에 쉽게 검색 가능한 아키텍처
- 적응성: 아키텍처 구성 요소를 유연하게 교체하고 새로운 요구 사항에 맞게 추가할 수 있습니다.
- 기술부채 & 리팩터링: 각 모듈은 부작용 없이 독립적으로 수정/재작성 가능
- 명시적인 코드 재사용: DRY와 로컬 사용자 정의 간의 균형을 유지합니다.
기본사항
FSD에서 프로젝트는 레이어로 구성되며 각 레이어는 슬라이스로 구성되며 각 슬라이스는 세그먼트로 구성됩니다.
Layers
한 레이어의 모듈은 아래 층의 모듈과만 상호작용할 수 있습니다.
- app: 앱 전체 설정, 스타일, providers
- pages: entities, features, widgets 를 조합해서 전체 페이지를 구성하기 위한 계층
- widgets: 엔티티와 기능들을 의미있는 블록으로 결합하기 위한 레이어 (ex. IssueList, UserProfile)
- features: 사용자와의 상호작용 및 비즈니스 로직을 구현
- entities: 비즈니스 로직을 위한 데이터 모델 (ex. User, Product, Order)
- shared: 공통 로직을 구현
Slices
슬라이스는 비즈니스 도메인별로 코드를 분리하는 계층입니다.
도메인별로 코드를 분리함으로써 논리적으로 관련된 모듈을 서로 가깝게 유지하며 코드 베이스를 쉽게 탐색할 수 있습니다.
슬라이스는 동일한 층에서 다른 슬라이스를 사용할 수 없으며, 이는 높은 응집력과 낮은 결합도에 도움이 됩니다.
Segments
세그먼트는 기술적 목적에 따라 슬라이스 내에서 코드를 분리하는 역할입니다.
가장 일반적인 세그먼트는 ui, model (store, actions), api, lib(util/hooks) 등이 있습니다.
적합하다고 생각되는 대로 일부 세그먼트 구분을 생략하거나 추가할 수 있습니다.
Public API
목표
모듈을 사용하고 통합하는 편리함은 다음과 같은 여러 목표를 충족함으로써 달성됩니다.
- 개별 모듈의 내부 구조 변경으로부터 응용 프로그램을 보호해야 합니다.
- 모듈 내부 구조의 처리가 다른 모듈에 영향을 주지 않아야 합니다.
- 모듈의 동작에서 중요한 변화를 쉽게 감지할 수 있어야 합니다.
이러한 목표는 모듈의 기능에 대한 단일 액세스 포인트이며 모듈이 외부 세계와 상호 작용하는 “계약”을 정의하는 공개 인터페이스(Public API)를 도입함으로써 달성할 수 있습니다.
└── features/ #
├── auth-form / # Internal structure of the feature
| ├── ui/ #
| ├── model/ #
| ├── {...}/ #
├── index.ts # Entrypoint features with its public API**/**/index.ts
export { Form as AuthForm } from "./ui";
export * as authFormModel from "./model";참고 문서