Welcome | Feature-Sliced Design
↑ FSD에 대한 설명↑
홍풍 프로젝트를 처음 시작할 때는 빠른 검증을 위해서 빌드하고 테스트를 수행하려다 보니까 MVP 형식으로 진행했다고는 하지만, 새로 개선하려고 하면 이제 손을 대기가 힘든 스파게티 코드가 되어버렸다.
초기에는 기능을 빠르게 구현하는 것에만 집중했기 때문에, 컴포넌트들이 서로 얽혀있고 의존성이 복잡하게 얽혀있었다. 새로운 기능을 추가하려고 해도 어디서부터 시작해야 할지 모르겠고, 기존 코드를 수정하면 다른 부분에서 예상치 못한 오류가 발생하는 일이 잦았다.
사실 지금 FSD 구조보다 더 쓰레기 같던 것이 이전 디렉토리 구조였다. 파일들이 아무렇게나 흩어져 있고, 컴포넌트와 로직이 뒤섞여 있어서 코드를 찾는 것조차 어려웠다.
결국 리팩토링에 착수했는데, 이전과 같은 부작용을 겪고 싶지 않아서 디렉토리 아키텍처를 찾는 중 FSD를 소개하는 유튜버의 쇼츠를 보고 이를 학습하게 됐다.
Feature-Sliced Design(FSD)은 프론트엔드 애플리케이션을 위한 아키텍처 방법론이다. 핵심 아이디어는 애플리케이션을 기능단위인 레이어로 나누고 도메인 단위(slices), 그 하위 단위(segments)로 나누는 것이다.
FSD는 다음과 같은 레이어로 구성된다
| 레이어 | 설명 |
|---|---|
| app | 라우팅, 전역 스타일, 앱 초기화 |
| pages | 실제 라우팅되는 페이지 단위 |
| widgets | 페이지를 구성하는 큰 단위의 UI 조합 |
| features | 특정 기능의 상태 관리와 이벤트 처리 |
| entities | 도메인 모델과 데이터 구조 |
| common | 유틸리티, UI 컴포넌트, API 클라이언트 |
이렇게 나누면 각 레이어가 명확한 책임을 가지게 되고, 상위 레이어는 하위 레이어에만 의존할 수 있어서 의존성 방향이 일관되게 유지된다.
각 도메인에 해당한다.