Feature-Sliced Design이란?

FSD는 프론트엔드 프로젝트의 구조를 체계적으로 관리할 수 있게 해줍니다.

핵심 원칙

1. 레이어 구조

src/
├── app/        # 앱 초기화, 라우팅
├── pages/      # 페이지 컴포넌트
├── widgets/    # 독립적인 UI 블록
├── features/   # 사용자 시나리오
├── entities/   # 비즈니스 엔티티
└── shared/     # 공유 코드

2. Public API

각 슬라이스는 `index.ts`를 통해 공개 API를 제공합니다.

// src/entities/post/index.ts
export { PostCard } from './ui/PostCard';
export { getPosts } from './api/postsActions';
export type { Post } from './model/types';

실전 예제

엔티티 구조

src/entities/post/
├── api/           # Server Actions
├── model/         # 타입, 상수
├── ui/            # UI 컴포넌트
└── index.ts       # Public API

의존성 규칙

상위 레이어는 하위 레이어만 import 가능합니다:

// ✅ 가능
import { Post } from '@/entities/post';

// ❌ 불가능
import { SomePage } from '@/pages/home';

장점

• 확장성: 새로운 기능 추가가 쉬움
• 유지보수성: 명확한 구조로 코드 이해도 향상
• 팀 협업: 역할 분담이 명확함

결론

FSD는 처음엔 복잡해 보이지만, 프로젝트가 커질수록 그 진가를 발휘합니다. 중대형 프로젝트라면 꼭 고려해보세요!