FSD(Feature-Sliced Design) 패턴

FSD(Feature-Sliced Design)

애플리케이션을 Feature(기능) 단위로 조직화하여 관리하는 방법을 말하며 layer, slice, segment의 총 3depth로 이루어져 있다.

 

Layers

7가지의 폴더로 구성하면 되고, 각 폴더마다 서로의 역할이 있어서 폴더별로 구분해서 관리해야 한다

(app, pages, widgets, features, entities, shared)

• app: 애플리케이션 로직 초기화 및 글로벌 설정(정의), 애플리케이션의 진입점 역할
• processes: 복잡한 비즈니스 프로세스 관리 (선택적)
• pages: 라우팅 가능한 화면 정의
• widgets: 재사용 가능한 UI 블록, 독립적
• features: 사용자 시나리오와 비즈니스 기능을 다룸, 선택적 레이어
• entities: 도메인 객체와 관련 로직
• shared: 공유 유틸리티 및 UI 키트

Slices 

각 레이어 내에서 특정 기능 영역이나 도메인을 나타내는 하위 디렉터리 (서비스 별로 묶여있음)

• 특정 비즈니스 도메인이나 기능을 캡슐화
• 독립적으로 개발 및 테스트 가능
• 다른 슬라이스와의 의존성을 명시적으로 관리

Segments

슬라이스 내부의 코드를 목적에 따라 더 세분화한 것 

• ui: UI 컴포넌트
• model: 비즈니스 로직 (상태 관리, 액션, 셀렉터 등)
• api: 외부 서비스와의 통신
• lib: 유틸리티 함수
• config: 설정 및 상수

참고

https://j-ho.dev/28/