FSD 파헤치기

Feature:계층 Sliced:분할 Design:설계

Feature [계층]

각 계층별 기능

• App : 애플리케이션과 관련된 로직들
• Pages : 애플리케이션의 각 페이지들
• Widgets : 페이지에서 사용되는 독립적인 UI 구성요소들
• Features : 사용자와 상호작용하는 시나리오와 기능들
• Entities : 각각의 도메인과 관련된 정보, API, UI 등
• Shared : 도메인과 상관없이 어디서든지 재사용 가능한 구성 요소나 유틸리티들

FSD의 계층 구조

FSD 계층 구조 규칙

• 각 계층은 하위 요소의 컴포넌트와 함수들만 가져와서 사용할 수 있습니다.

• 같은 계층의 요소들도 사용할 수 없습니다.

Sliced

• 각 Layer들은 Slice라고 하는 하위 디렉토리가 있습니다.
• Slice는 각 도메인 별로 그룹화하는 것이 목표입니다.
• 같은 Layer 층에 있는 Slice 들은 격리되어서 서로 불러서 사용하면 규칙에 위배됩니다.

Segment

세그먼트는 목적에 따라 슬라이스 내의 코드를 나누는 데 도움이 됩니다. 서로 합의나 필요에 따라 세그먼트의 구성이나 이름은 변경될 수 있으며 일반적으로 사용되는 세그먼트들은 다음과 같습니다.

• api : 서버에 필요한 요청을 담당합니다.
• ui : Slice를 구성하는 UI를 담당합니다.
• model : 상태와 상호작용하는 부분을 담당합니다.
• lib : Slice에서 사용되는 보조 기능을 답당합니다.
• config : Slice에서 필요한 환경 설정을 담당합니다.
• consts : Slice에서 사용될 상수를 담당합니다.

공개 API

각 슬라이스와 세그먼트에는 index.ts 또는 index.js 파일의 공개 API가 존재합니다. 해당 파일을 통해서 필요한 기능만 외부로 추출하고 불필요한 기능들은 외부와 격리시킬 수 있습니다. 즉, 공개 API에 작성되어 있지 않은 기능들은 외부에서 호출해서 사용할 수 없습니다.

FSD가 인기많은 이유

FSD의 목표 중 하나는 결합도는 낮추고 응집도를 높이는 것입니다.

객체지향 프로그래밍에서 다형성, 캡슐화, 상속, 추상화와 같은 개념을 통해서 이러한 목표를 이루려고 했습니다. 이러한 개념들은 코드의 격리, 재사용성을 보장합니다.

FSD가 이러한 개념들을 적용하는데 도움을 줍니다.

• 추상화와 다형성은 Layer를 통해서 달성합니다.
• 캡슐화는 공개 API를 사용해서 접근을 제어해서 달성합니다.
• 상속 또한 높은 Layer에서 낮은 Layer를 재사용하는 부분으로 달성합니다.

FSD의 장단점

장점

• 구성 요소들을 쉽게 수정, 추가, 제거할 수 있습니다.
• 표준화가 가능하고 확장성이 있습니다.
• 예기치 않은 부작용 없이 모듈 간의 연결이 제어되고 명시적입니다.
• 아키텍처 방법론이 비즈니스 지향적입니다.

단점

• 다른 많은 아키텍처 솔루션들에 비해 진입 장벽이 높습니다.
• 팀의 모든 인원들이 해당 아키텍처에 대해서 잘 알아야합니다.
• 도전 과제와 문제를 나중이 아닌 즉시 해결해야 합니다.

참고
https://developers.hyundaimotorgroup.com/blog/399
https://emewjin.github.io/feature-sliced-design/
https://github.com/noveogroup-amorgunov/nukeapp