FSD 아키텍처

 

• FSD 아키텍처란?
  • 기능 분할 설계 (Feature-Sliced-Design)
  • 자신보다 아래 계층의 레이어만 사용할 수 있음 (단방향 의존성)

---

장단점 

• 장점
  • 유지보수 용이, 확장성, 재사용성 높음, 원활한 협업
• 단점
  • 학습 필요, 구조 설정의 번거로움, 과잉 설계 위함, 규칙 준수 필요

구조

• 레이어 > 슬라이스 > 세그먼트

레이어

• 최상위 구조 단위
• 구성요소 : app > pages > widgets > features > entities > shared
• app : 프로젝트 진입점, 전역 설정
  • 라우팅, 글로벌, 최상위 프로바이더,
  • 슬라이스 없음, 세그먼트만 가짐
• pages: 개별 페이지
• widgets: 페이지 내에서 독립적으로 동작하는 큰 기능 단위
  • 다양한 페이지에서 재사용 가능
• features: 독립적으로 동작하는 하나의 특정한 동작을 정의
  • 여러 페이지와 위젯에서 재사용 사능한 독립적 비즈니스 로직 제공
    • model 세그먼트에 해당 레이어 전용 로직 포함할 수 있으나, 비즈니스 로직은 features 레이어에 두는 것이 좋음
• entities: 비즈니스의 핵심 데이터
  • 데이터 모델과 데이터에 대한 로직
• shared: 프로젝트 전반에서 재사용할 수 있는 유틸리티, 기본적인 컴포넌트, 스타일등을 포함하는 레이어
  • 슬라이스 없음, 세그먼트만 가짐

슬라이스

• 비즈니스 도메인이나 기능별 관련 코드들의 집합
• 각 슬라이스는 독립적

세그먼트

• 슬라이스 내부를 다시 기술적인 역할 별로 나눔
• 일반적으로 사용되는 세그먼트 이름이 존재
  • ex. ui, model, api, lib

 

 

참고

[https://velog.io/@clydehan/FSDFeature-Sliced-Design-완벽-가이드]