FSD
프론트엔드 애플리케이션의 구조를 잡는 아키텍처 방법론
개념
레이어, 슬라이스, 세그먼트 순서로 계층 구조로 이루어짐
레이어
- App: 앱을 실행하는 모든 것 - 라우팅, 진입점, 전역 스타일, 프로바이더
Processes: 더 이상 사용되지 않음- Pages: 전체 페이지 또는 중첩 라우팅에서 페이지의 주요 부분
- Widgets: 독립적으로 작동하는 대규모 기능 또는 UI 컴포넌트, 보통 하나의 완전한 기능
- Features: 제품 전반에 걸쳐 재사용되는 기능 구현체로, 사용자에게 실질적인 비즈니스 가치를 제공하는 동작
- Entities: 프로젝트가 다루는 비즈니스 엔티티
- Shared: 재사용 가능한 기능, 특히 프로젝트/비느지스의 특성과 분리되어 있을 때 (반드시 그럴 필요는 없음)
- App과 Shared는 다른 레이어들과 달리 슬라이스를 가지지 않으며, 직접 세그먼트로 구성됨
- 한 레이어의 구성 요소는 반드시 아래에 있는 레이어의 구성 요소만 알 수 있고 임포트 할 수 있음
슬라이스
- 비즈니스 도메인별로 코드를 분할
세그먼트
- 목적에 따라 코드를 그룹화
- 표준화되지 않았지만 일반적인 이름들
- ui: UI와 관련된 모든 것
- api: 백엔드 상호작용
- model: 데이터 모델
- lib: 슬라이스 안에 있는 다른 모듈이 필요로 하는 라이브러리 코드
- config: 설정 파일과 기능 플래그
장점
- 균일성
- 변경과 리팩토링에 대한 안정성
- 로직 재사용을 통제
- 비즈니스와 사용자 요구에 대한 지향성
use-funnel
개념
- step: 각 화면
- context: 각 step에서 입력한 값을 저장한 상태
- history: 전체 step의 이동과 context의 변경 기록