https://emewjin.github.io/feature-sliced-design/?utm_source=substack&utm_medium=email
FSD 설명
app
- 앱 전체 설정, 스타일 및 제공자.
- 전역설정 / Provider, Router, Client 같은 HOC가 slice가 됨(예: client.tsx)
pages
- 주소별 페이지 / 각각의 주소별 페이지가 slice
- 엔티티, 기능 및 위젯에서 전체 페이지를 구성하는 구성 계층.
widget
- feature의 묶음 / 어떻게 묶을지는 재사용 여부에 따라 (기존: layout)
- 엔티티 및 기능을 의미 있는 블록으로 결합하는 구성 계층(예: IssuesList, UserProfile)
features
- 행동 / 동사가 slice, api segmanet에서는 해당 행동을 요청함
- 사용자 상호 작용, 사용자에게 비즈니스 가치를 가져다 주는 작업(예: SendComment, AddToCart, UsersSearch)
entities
- 데이터 / 데이터가 slice (기존: components)
- 비즈니스 엔티티(예: 사용자, 제품, 주문)
shared
- shared: 공유 컴포넌트 (기존: types, utils, hooks 폴더)
- 재사용 가능한 기능, 프로젝트/비즈니스의 세부 사항과 분리됨(예: UIKit, libs, API)
예시
소셜 네트워크 애플리케이션을 고려해 보겠습니다.
app/에는 라우팅, 스토어 및 글로벌 스타일의 설정이 포함되어 있습니다.
pages/에는 앱의 각 페이지에 대한 경로 구성 요소가 포함되어 있으며 대부분 구성이며 거의 논리가 없습니다.그 응용 프로그램 내에서 뉴스 피드의 포스트 카드를 고려해 보겠습니다.
widgets/에는 "조립된" 포스트 카드가 들어 있으며, 백엔드의 관련 통화에 연결되는 내용 및 대화형 버튼이 있습니다.
features/는 카드의 상호작용(예: 버튼)과 이러한 상호작용을 처리하는 로직을 포함합니다.
entities/는 컨텐츠와 대화형 요소를 위한 슬롯이 있는 카드의 셸을 포함합니다. 포스트 작성자를 나타내는 타일도 여기에 있지만 다른 슬라이스에 있습니다.
