1. FSD 구조란?
FSD(Feature-Sliced Design)는 기능 단위 중심(feature-oriented)으로 애플리케이션 구조를 나누는 프론트엔드 아키텍처 패턴입니다.
FSD는 기능 중심(도메인 중심)으로 코드를 구성이 되어있습니다
src/
├── app/
├── entities/
├── features/
├── shared/
├── widgets/
├── pages/
2.FSD 구조 원칙
FSD는 다음과 같은 원칙을 따릅니다:
기능(Feature) 단위로 분리
하위 계층은 상위 계층을 참조하지 않는다 (단방향 참조)
UI보다 도메인을 우선!
3.폴더 구조 예시
├── app/ # 앱 진입점 및 글로벌 레이아웃, provider, 글로벌 스타일 및 타입 선언 등록
│ ├── layout.tsx # 루트 레이아웃 (App Router용)
│ ├── page.tsx # 기본 홈 라우트
├── pages/ # 페이지들을 포함(404 페이지 컴포넌트, home 페이지 컴포넌트 등 )
│ ├── home # 루트 레이아웃 (App Router용)
│ ├── 404
├── shared/ # 전역 공통 모듈 (UI, lib, config, axios 관련 설정 등)
│ ├── comps/ # 재사용 가능한 UI 컴포넌트
│ │ └── LanguageSwitcher.tsx
│ └── lib/ # 전역 유틸리티, 설정, 외부 연결 등
├── entities/ # 도메인 단위의 최소 단위 (ex. User, Post 등)
├── features/ # 사용자 행동 단위 기능 (ex. 좋아요, 로그인 등)
├── widgets/ # 페이지 구성 요소 (여러 feature를 조합한 UI(header, navigation, layout))
│ └── Header/
│ └── ui/
│ └── MainHeader.tsx4. FSD 계층 간 의존성 규칙
각 계층간 의존성 규칙
| Layer | Can use | Can be used by |
|---|---|---|
app | shared, entities, features, widgets, pages, processes | - |
processes | shared, entities, features, widgets, pages | app |
pages | shared, entities, features, widgets | processes, app |
widgets | shared, entities, features | pages, processes, app |
features | shared, entities | widgets, pages, processes, app |
entities | shared | features, widgets, pages, processes, app |
shared | - | entities, features, widgets, pages, processes, app |
레이어설명
app/: 전역 상태, 라우팅, 테마 등 초기 설정
pages/: entities, features, widgets으로부터 구성된 페이지
widgets/: 여러 feature를 조합한 블록 단위의 UI
features/: 사용자의 주요 행위나 비즈니스 로직 단위
entities/: DB 모델, 상태 등 핵심 객체 중심
shared/: 버튼, 인풋, 스타일, 훅, 유틸 등 재사용 가능 자산
사용 후기
- 항상 프로젝트별로 폴더 구조를 생각하였는데, 보다 명확한 구조가 있어서 편리했고, 유지보수성은 확실히 도움이 될거같다는 생각이 들었습니다.
- 단점으로는 러닝커브가 존재해서 FSD구조에 대한 이해가 필요 할 것으로 보입니다
