Feature-Sliced Design: 확장 가능한 프론트엔드 아키텍처

tutorial

FSD 아키텍처 완벽 가이드. 레이어, 슬라이스, 세그먼트 구조로 유지보수하기 쉬운 대규모 프론트엔드 프로젝트를 설계합니다.

럿지 AI 팀

2025-01-12

15min read

레이어

FSD 구조

세그먼트

레이어당

모듈 독립성

유지보수성

FSD 7개 레이어

app/앱 초기화, 프로바이더

providers, styles

processes/비즈니스 프로세스 (선택)

checkout, onboarding

pages/라우팅 페이지

home, profile, settings

widgets/독립적 UI 블록

Header, Sidebar, Card

features/사용자 시나리오

auth, search, cart

entities/비즈니스 엔티티

user, product, order

shared/공용 유틸리티

ui, lib, api, config

슬라이스 세그먼트

ui/

컴포넌트

model/

로직/상태

api/

API 호출

lib/

유틸 함수

config/

설정 값

Import 규칙

상위 레이어→하위 레이어만 import

✓ features → entities, shared

✓ widgets → features, entities, shared

✗ entities → features (금지!)

✗ shared → 상위 레이어 (금지!)

FSD 장점

☑명확한 코드 구조

☑의존성 방향 통일

☑기능별 모듈화

☑팀 협업 용이

☑점진적 도입 가능

☑확장성 높음

FSD 아키텍처 심화 학습

FSD 공식 문서

#FSD

#Architecture

#Frontend

#Design Patterns

#Scalability