FSD

FSD(Feature-Sliced Design) 는 대규모 프론트엔드 애플리케이션을 구조화하기 위한 현대적인 아키텍처 방법론입니다.
이 방법론의 주요 목적은 프로젝트를 더 이해하기 쉽고 유지보수가 용이하도록 만드는 것입니다.

FSD의 핵심 원칙

•	기능 중심 설계: 애플리케이션을 비즈니스 기능 단위로 구성합니다.
•	계층화: 코드를 여러 계층으로 구분하여 관심사를 분리합니다.
•	단방향 의존성: 상위 계층은 하위 계층에만 의존할 수 있습니다.
•	명시적 공개 인터페이스: 각 모듈은 명확한 공개 API를 통해 상호작용합니다.
•	구성 가능성: 작은 단위의 기능을 조합하여 더 큰 기능을 만들 수 있습니다.

FSD의 구조

FSD는 다음과 같은 계층 구조로 구성됩니다:

1. 레이어: 최상위 폴더 구조로, App, Pages, 
	Widgets, Features, Entities, Shared 등이 있습니다.
2. 슬라이스: 각 레이어 내의 기능 단위입니다.
3. 세그먼트: 슬라이스 내의 구체적인 구현 요소들입니다.

FSD의 장점

•	모듈성: 기능 단위로 코드를 구성하여 재사용성과 유지보수성이 향상됩니다.
•	확장성: 새로운 기능 추가나 기존 기능 수정이 용이합니다.
•	테스트 용이성: 각 슬라이스와 세그먼트를 독립적으로 테스트할 수 있습니다.
•	팀 협업: 기능 단위로 작업을 분배하여 병렬 개발이 가능합니다.
•	코드 네비게이션: 일관된 구조로 코드 탐색이 쉬워집니다.
•	의존성 관리: 명시적인 의존성으로 코드의 예측 가능성이 향상됩니다.

레이어 (Layers)

FSD는 7개의 주요 레이어로 구성되며, 각 레이어는 최상위 폴더로 표현됩니다:

1. 📂 app: 애플리케이션 전체 설정 및 초기화 (라우팅, 진입점, 전역 스타일, 프로바이더)
2. 📂 pages: 라우팅 가능한 페이지 컴포넌트
3. 📂 widgets: 독립적으로 작동하는 대규모 기능 또는 UI 컴포넌트, 보통 하나의 완전한 기능
4. 📂 features: 제품 전반에 걸쳐 재사용되는 기능 구현체로, 사용자에게 실질적인 비즈니스 가치를 제공하는 동작
5. 📂 entities: 비즈니스 엔티티 (예: User, Product)
6. 📂 shared: 공유 유틸리티 및 UI 키트

• • App과 Shared는 다른 레이어들과 달리 슬라이스를 가지지 않으며, 직접 세그먼트로 구성됩니다.

슬라이스 (Slices)

슬라이스는 레이어 내에서 비즈니스 도메인별로 코드를 그룹화합니다. 예를 들어:

📂 features/
  📂 auth/
  📂 cart/
  📂 product-list/

세그먼트 (Segments)

세그먼트는 슬라이스 내에서 기술적 목적에 따라 코드를 분류합니다:

📂 features/
  📂 auth/
    📂 ui/
    📂 model/
    📂 api/
    📂 lib/
    📂 config/

•	ui: 렌더링 및 외관 관련 코드
•	model: 상태 관리 및 비즈니스 로직
•	api: 백엔드 상호작용
•	lib: 유틸리티 함수
•	config: 설정 파일과 기능 플래그.

대부분의 레이어에서는 이 세그먼트들로 충분하며, Shared나 App에서만 자신만의 세그먼트를 만들 것입니다. 하지만 이건 꼭 지켜야하는 규칙은 아닙니다.