[소프트웨어 아키텍처]FSD

src/
├─ app/
│  ├─ auth/
│  │  ├─ page.tsx
│  │  └─ layout.tsx
│  └─ product/
│     └─ page.tsx
├─ features/
│  ├─ auth/
│  │  ├─ action/auth.action.ts
│  │  ├─ model/auth.model.ts
│  │  └─ ui/
│  │     ├─ AuthLoginForm.tsx
│  │     └─ hooks/use-auth-form.ts
│  └─ product/
│     ├─ action/product.action.ts
│     ├─ model/product.model.ts
│     └─ ui/
│        └─ ProductList.tsx
├─ entities/
│  └─ user.ts
└─ shared/
   ├─ ui/
   │  ├─ Button.tsx
   │  └─ Input.tsx
   └─ utils.ts

 

 

Feature Sliced Design(FSD)는 대규모 프론트엔드 애플리케이션을 기능(Feature) 단위로 분할하고, 각 기능 내부는 관심사(사이드 이펙트, 상태/모델, UI)별로 계층화하여 구조화하는 아키텍처 패턴입니다.

• 목표: 코드베이스가 커질수록 산만해지는 파일·폴더 구조를 명확히 정리
• 유형: 실무용 설계 가이드라인(Software Architecture Pattern)

 

이번 프로젝트를 진행하면서 전에 인턴하면서 배운 file tree를 그대로 사용해보려고 합니다.