FSD (Feature-Sliced Design)

• 계층화된 구조: App, Pages, Widgets, Features, Entities, Shared 6개 레이어
• 기능 중심 설계: 비즈니스 로직을 기능 단위로 분리하여 관리
• 확장성: 대규모 팀과 복잡한 애플리케이션에 최적화된 구조
• 재사용성: 컴포넌트와 로직의 체계적인 재사용 패턴
• 의존성 규칙: 상위 레이어만 하위 레이어에 의존하는 단방향 의존성

레이어 구조 - Layers & Slices

• Layers (계층): 수직적 책임 분리

  • App → Pages → Widgets → Features → Entities → Shared
  • 각 계층은 명확한 책임과 추상화 수준을 가짐
  • 시스템 전체의 아키텍처 일관성과 의존성 관리에 적합

• Slices (슬라이스): 수평적 기능 분리

  • 각 계층 내에서 기능별로 독립적인 모듈 구성
  • user, product, order 등 도메인별 슬라이스 분리
  • 기능별 독립 개발과 팀 단위 작업 분담에 적합

핵심 레이어 - Features & Entities

• Features: 사용자 시나리오 구현

  • 로그인, 상품 주문, 댓글 작성 등 구체적인 기능
  • UI 컴포넌트와 비즈니스 로직이 결합된 완성된 기능
  • 사용자 스토리와 직접 연결되는 기능 개발에 적합

• Entities: 비즈니스 도메인 모델

  • User, Product, Order 등 핵심 비즈니스 개체
  • 순수한 데이터 모델과 기본적인 비즈니스 규칙
  • 도메인 지식과 재사용 가능한 비즈니스 로직에 적합

상위 레이어 - Pages & Widgets

• Pages: 라우팅 단위 페이지

  • URL과 1:1 매핑되는 페이지 컴포넌트
  • 여러 위젯을 조합하여 완전한 화면 구성
  • 라우팅과 페이지 레벨 상태 관리에 적합

• Widgets: 독립적인 UI 블록

  • Header, Sidebar, ProductCard 등 재사용 가능한 UI 조각
  • 여러 Features를 조합한 복합 컴포넌트
  • 컴포넌트 재사용과 UI 일관성 유지에 적합

공통 레이어 - Shared & App

• Shared: 공통 유틸리티와 기반 요소

  • UI Kit, API 클라이언트, 유틸 함수, 상수 등
  • 프로젝트 전반에서 재사용되는 기반 코드
  • 디자인 시스템과 공통 인프라 구축에 적합

• App: 애플리케이션 진입점

  • 라우터 설정, 전역 프로바이더, 앱 초기화 로직
  • 애플리케이션 레벨 설정과 구성
  • 앱 전체 설정과 최상위 레벨 관리에 적합

의존성 관리 - Import Rules & Public API

• Import Rules: 계층 간 의존성 규칙

  • 상위 레이어만 하위 레이어를 import 가능
  • 동일 레이어 내에서는 슬라이스 간 직접 import 금지
  • 아키텍처 일관성과 순환 의존성 방지에 적합

• Public API: 명시적 인터페이스 노출

  • 각 슬라이스는 index.ts를 통해 Public API만 노출
  • 내부 구현 은닉과 인터페이스 기반 의존성
  • 모듈 간 결합도 최소화와 리팩토링 안정성에 적합