- FSD(Feature-Sliced Design)는 React + Typescript를 사용하는 front-end 개발 아키텍처 중 하나이며, FDA의 feature-driven architecture에서 유래된 디자인 방법 🖼️
- FSD는 '레이어(layer)', '슬라이스(slice)', 'Segment' 개념을 통해 구성되며, 각 레이어는 특정 기능을 담당합니다. 📑
- 'App' 레이어는 애플리케이션 로직을 초기화하고 브라우저 rout, provider, global style 등의 설정을 담당합니다. ⚙️
- 'Page' 레이어는 실제 사용자가 접근하는 페이지를 구성하며, 앱 전체에 펼쳐지는 페이지들을 관리합니다. 📄
- 'Widget' 레이어는 독립적인 UI 구성 요소들을 모아서 하나로 만들어, 페이지 구성 요소로 사용하기 용이하게 만듭니다. 🧩
- 'Feature' 레이어는 사용자 시나리오, 사용 케이스 등을 기반으로 함수들을 처리하며, 유저액션에 관련된 기능들을 구성합니다. 🚀
- 'Entity' 레이어는 데이터의 본질적인 의미를 담고, 사용자 리뷰, 상품 정보 등 관심 있는 데이터에 대한 정보를 관리합니다. 📦