Growth Log : by dpwls

Appearance

0828 ​

FSD ​

  • Feature Sliced Design의 약자로 Layer -> Slices -> Segments로 나눌 수 있음.
    Pasted image 20250828203522

Layers ​

  • views
    • widgets를 조합한 것, 가장 큰 단위로 페이지 구성
  • widgets
    • Entities + Features를 조합한 것
  • Features
    • 사용자 액션과 기능
  • Entities
    • 순수한 데이터 표현
  • Shared
    • 모든 레이어에서 공통으로 사용하는 순수 유틸리티

Slices ​

  • 각 Layer 내에서 도메인/기능별(user, post, comment...)로 나누는 것
  • 같은 Layer 내에선 다른 Slice를 참조할 수 없음.
    • 예를 들어 features 안에 auth와 post가 있을 때 features의 post는 features auth의 slice를 참조할 수 없음.
    • 아래와 같은 패턴이 불가능하다는 의미
js
// features/post/ui/PostForm.tsx  
import { useAuth } from '../../../auth/lib/useAuth'

// features/comment/api/commentApi.ts    
import { postApi } from '../../post/api/postApi'
  • 하지만 features post에서 entites auth를 참조하는건 가능하다.
    • 왜? entities는 features의 하위 레이어니까.

Segments ​

결론 ​

  • layer간 상위 -> 하위로 참조 가능
  • 같은 layer의 다른 slice는 참조 불가
  • 같은 slice의 다른 segment는 참조 가능
  • 왜 이런 규칙을 따르냐면 순환 의존성을 방지하기 위해서. 이 규칙을 따르기에 모듈이 독립되고 의존 관계가 명확해지는거고 이가 FSD 구조를 사용하는 이유와도 귀결.
    Pasted image 20250828220512

ETC ​

  • FSD의 app과 next.js의 app routing은 다른 개념
    • FSD의 app은 애플리케이션의 전체 설정과 초기화를 담당하는 최상위 레이어를 의미하고, Next.js의 app은 라우팅 시스템을 의미함.
  • Layers의 App과 Shared 디렉토리는 Slices 없이 곧바로 segements로 구성됨.