Feature-Sliced Design (FSD)

https://feature-sliced.design/

 

1. 소개

Feature-Sliced Design(FSD)는 대규모 프론트엔드 애플리케이션을 기능 중심(Feature-Driven) 으로 구조화 하는 아키텍쳐 방법론이다.

핵심 철학
파일을 기술(components, hooks) 기준이 아니라 비즈니스 기능 기준으로 나눈다.

 

아래와 같이 기술 중심으로 설계할 경우

/components
/hooks
/pages
/utils
/store

이 구조는 프로젝트가 커질수록 아래의 문제가 발생한다.

• 컴포넌트 하나를 구성하는 요소들이 여러 폴더에 산재됨
• 기능 하나를 수정하기 위해 여러 폴더를 오가야함
• 재사용 경계가 모호
• 기능 단위 분리가 어려움

 

대규모 프로젝트의 핵심은 갈수록 복잡해지는 의존성 문제를 어떻게 풀어낼것인가에 있다.

FSD는 이를 해결하기 위해

1. 상위에서 하위로 순방향 참조를 가진 레이어를 구성하고
2. 기능 중심으로 구조를 설계하여
3. 구조를 무너뜨리지 않고, 순환참조를 방지하며, 확장성을 유지할 수 있다.

---

2. 구조

FSD는  레이어(Layer), 슬라이스(Slice) 그리고 세그먼트(Segments)으로 프로젝트를 구성한다.

---

2-1. 레이어(Layer)

각 레이어는 의존성이 단방향이다.

아래 레이어는 상위 레이어를 몰라도 되지만,

상위 레이어는 하위 레이어를 사용할 수 있다.

app → pages → widgets → features → entities → shared

 

 

종류

총 7개로 구성된다.

1. App - 앱을 실행하는 모든것 (라우팅, 진입점, 글로벌 스타일, provider 등)
2. Process(deprecated) - 복잡한 페이지 내부 시나리오
3. Pages - 전체 페이지 또는 중첩된 라우팅 방식의 페이지 일부
4. Widgets - 큰 독립형 기능 덩어리나 UI, 전체 use case를 제공
5. Features - 사용자에게 비즈니스 가치를 제공하는 행동 단위
6. Entities - 비즈니스 엔티티 (User, Product 등)
7. Shared - 재사용 가능한 기능

---

1) app - 앱 초기화 레이어

역할

• 라우팅 설정
• 전역 스타일
• 전역 Provider
• 스토어 세팅

예:

app/
  providers/
  router/
  index.tsx

---

2) pages - 페이지 단위

• URL 단위 화면
• 여러 widget을 조합하여 페이지를 구성한다.

예:

pages/
  login/
  profile/
  dashboard/

---

3) widgets - 복합 UI 블록

• 여러 feature + entity를 조합 하여 UI 블록을 구성한다.
• 독립적인 화면 블록

예:

widgets/
  header/
  sidebar/
  post-list/

---

4) features - 사용자 액션 단위

• 사용자가 할 수 있는 동작 단위

예:

• 로그인 하기
• 게시글 좋아요 누르기
• 댓글 작성하기

features/
  auth/
  add-comment/
  like-post/

---

5) entities - 비즈니스 도메인 객체

• 실제 데이터 모델 단위

예:

• User
• Post
• Comment

---

6) shared - 공통 코드

 

• UI kit
• 유틸 함수
• API 클라이언트
• 공통 타입

 

shared/
  ui/
  lib/
  api/
  config/

---

2-2. Slices (슬라이스)

• 각각의 레이어를 기능 단위(Slice)로 나눈것
• 코드를 비즈니스 도메인별로 분할함으로써, 폴더명을 자유롭게 설정 가능
• Slice 간에는 상호 참조가 불가능해야한다. (높은 응집력, 낮은 결합)

예 : features 레이어의 auth 슬라이스

features/
  auth/
    ui/
    model/
    api/
    lib/

---

2-3. Segments(세그먼트)

사실상 해당 레이어를 구성하는 최소 단위이며, 이름은 다음과 같이 어느정도 표준화되어있다.

• ui : UI 디스플ㄹ레이와 관련된 모든것 (UI 컴포넌트, 날짜 포맷터, 스타일 등)
• api : 백엔드 상호작용 코드
• model : 데이터 모델 (스키마, 인터페이스, 저장소, 비즈니스 로직)
• lib : 이 슬라이스의 다른 모듈들이 필요로 하는 라이브러리 코드
• config : 구성 파일과 기능 플래

대부분의 앱에서는 위 세그먼트만으로 충분하지만, 필요에 따라 추가구성을 할 수 있다.