기능 분할 설계(Feature-Sliced Design, FSD)란

Feature-Sliced Design(FSD)는 프론트엔드 애플리케이션의 구조를 잡는 아키텍처 방법론입니다. FSD는 이름 그대로 기능 단위로 분할하는 것에 초점이 맞춰져 있으며 현재 많은 주목을 받는 아키텍처 중에 하나 이기도 합니다.

 

 FSD는 대부분의 프로젝트에 적합하다고 공식에선 이야기합니다. 프론트엔드를 개발하고 있는 모든 환경에 적합하며 라이브러리가 아닌 애플리케이션을 만들고 있다면 FSD는 좋은 선택이 될 수 있습니다.

 

특징

명시적인 비즈니스 로직

도메인 스코프 덕분에 찾고자 하는 로직을 쉽게 발견할 수 있습니다.

 

유연성

아키텍쳐 구성 요소를 새로운 요구사항에 맞춰 유연하게 교체하고 추가할 수 있습니다.

 

기술 부채 및 리팩토링

각 모듈을 부작용 없이 독립적으로 수정, 재작성할 수 있습니다.

 

명시적인 코드 재사용

DRY원칙과 로컬 커스터마이징 사이에 균형을 유지합니다.

---

FSD의 구조

https://feature-sliced.github.io/documentation

세 개의 구조가 있으며 레이어, 슬라이스, 세그먼트로 표시되어 있습니다.

위 이미지를 토대로 3개의 구조가 어떤 건지에 대해 간략하게 알아보도록 하겠습니다.

 

레이어(Layers)

레이어는 FSD의 가장 상위 수준 구조입니다.  총 7개로 제한되어 있으며 모든 레이어를 사용할 필요는 없지만 네이밍 규칙은 지키는 걸 권장하고 있습니다. 각 네이밍에 해당하는 역할은 아래와 같습니다.

1. App - 앱을 실행하는 모든 것 - 라우팅, 진입점, 전역 스타일, 프로바이더.
2. Processes(더 이상 사용되지 않음) - 페이지 간 복잡한 시나리오.
3. Pages - 전체 페이지 또는 중첩 라우팅에서 페이지의 주요 부분.
4. Widgets - 독립적으로 작동하는 대규모 기능 또는 UI 컴포넌트, 보통 하나의 완전한 기능.
5. Features - 제품 전반에 걸쳐 재사용되는 기능 구현체로, 사용자에게 실질적인 비즈니스 가치를 제공하는 동작 (ex: 리뷰 작성, 제품 평가 등).
6. Entities - 프로젝트가 다루는 비즈니스 엔티티.(ex : 사용자, 리뷰, 댓글 등)
7. Shared - 재사용 가능한 기능, 특히 프로젝트/비즈니스의 특성과 분리되어 있을 때. (ex : ui kit, axios config, config 등)

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

위 계층구조에서 하위 레이어는 상위 레이어의 컴포넌트를 사용할 수 없습니다. 계층 구조에서 레이어의 위치가 낮을 수록 더 많은 곳에서 사용될 확률이 높으며 이러한 선형적인 흐름을 유지해야 관리하기가 더 편합니다.

 

슬라이스(Slices)

슬라이스는 비즈니스 도메인 별로 코드를  분할합니다.  논리적으로 관련된 모듈들을 그룹회하고 이를 유지함으로써 독립성을 높여줍니다. 슬라이스는 같은 레이어 안에서 다른 슬라이스를 참조할 수 없으며 이 규칙은 높은 응집도와 낮은 결합도 유지에 도움이 됩니다.

 

슬라이스 이름은 비즈니스 영역에 따라 결정되므로 표준화되어있지 않습니다.용도에 따라 개발자들끼리 네이밍을 마음대로 지어도 상관없습니다.

src/
	features/
			auth/ //인증 슬라이스
			order-list // 상품 리스트 슬라이스
			buy-product // 상품 구매 슬라이스

 

세그먼트(Segments)

세그먼트는 슬라이스 내의 코드를 나누는데 도움이 됩니다. 세그먼트의 구성 역시 자유롭게 사용 가능하지만, 일반적으로 권장하는 몇가지 세그먼트들이 있습니다.

• ui - UI와 관련된 모든 것: UI 컴포넌트, 날짜 포맷터, 스타일 등.
• api - 백엔드 상호작용: request 함수, 데이터 타입, mapper 등.
• model - 데이터 모델: 스키마, 인터페이스, 스토어, 비즈니스 로직.
• lib - 슬라이스 안에 있는 다른 모듈이 필요로 하는 라이브러리 코드.
• config - 설정 파일과 기능 
• const - 필요한 상수

---

공개 API

각 슬라이스와 세그먼트를 외부에 노출할 수 있는 인터페이스 입니다. index.js 또는 index.ts로 정의하며, 이 파일을 통해 슬라이스, 세그먼트에서 필요한 기능만 외부로 추출하여 독립성을 높일 수 있습니다.

 

공개 API에 대한 규칙은 아래와 같습니다.

• 애플리케이션 슬라이스와 세그먼트는 공개 api 인덱스 파일에 정의된 슬라이스의 기능과 컴포넌트만 사용합니다.
• 정의되지 않는 것들은 격리된 것으로 간주해 슬라이스, 혹은 세그먼트 내부에서만 접근할 수 있습니다.

export { Button } from './Button';
export { Modal} from './Modal';
export { Input } from './Input';

...