[Architecture] FSD(feature-sliced-design)

나나콘·2024년 5월 14일

아키텍처

고전적인 아키텍처의 문제점

구조

단점

암묵적인 연결과 모듈의 복잡성떄문에 유지보수가 어려움

기능을 어떤 모듈이나 컴포넌트에 넣을지 명확하지 않을 떄가 있습니다.
다른 모듈 내에서 모듈 사용에 어려움이 있습니다.
비즈니스 엔티티를 저장하는데 문제가 있습니다.
글로벌 함수의 암시적 종속성으로 인해 구조가 복잡해집니다.

기능 분할 설계(Feature-Sliced Design, FSD) 아키텍처

Layer

최상위 디렉토리, 애플리케이션 분해의 첫번쨰 단계
레이어의 수는 최대 7개로 제한

app
애플리케이션 진입점
전역 설정 - 프론트 앱, 모바일 앱 전체적인 설정

slice : BroswerRouter, Provider, ApoloClient 같은 HOC
```
render(
  <BrowserRouter>
  </BrowserRouter>
)
```
~~processes~~
한 페이지에서 정보를 다 입력하지 않고
(Step by Step)
닉네임 입력 -> 휴대폰 인증 -> 이메일 인증
--> widgets 폴더로 이동
pages
주소별 Page
slice : 각각의 주소별 Page
widgets
페이지에 사용되는 독립적인 UI 컴포넌트

(기존의 layout 폴더)
feature의 묶음
어떻게 묶을지는 재사용 여부에 따라
features (동사, 행동)
slice : 동사
api segment에서는 해당 행동을 요청함
ex) onclick 이벤트
entities (명사)
(기존의 components 폴더)
데이터 그 자체
slice : data
api segment에서는 데이터를 조회
shared
(기존의 hooks, typings, utils)
공유 컴포넌트
slice : 없음

Slices

각 Layer에는 애플리케이션 분해의 두번째 수준인 slice라는 하위 디렉토리가 있습니다.
주요 목표 : 코드를 값 별로 그룹화 하는 것

ex) 사진 갤러리 - 사진, 앨범, 갤러리
소셜 네트워크 - 게시물, 사용자, 뉴스피드
게시물 - user, post, comment

Segments

Segment는 목적에 따라 Slice 내의 코드를 나누는데 도움이 됩니다.
팀의 합이에 따라 Segment의 구성과 이름이 변경될 수 있습니다.

일반적으로 사용되는 세그먼트

api - 필요한 서버 요청
ui - Slice의 UI 컴포넌트
model - data, 상태와의 상호 작용. actions, selectors
lib - Slice 내에서 사용되는 보조 기능 (기타 util)
config - Slice의 필요한 구성값이지만 구성 Segment는 거의 필요하지 않음
consts - 필요한 상수

예시

ex) 재사용할 Button -> shared
Button 클릭했을 때 동작 -> features

Fork 버튼을 구현한다고 하면

feature(동사) -> Fork를 하는 행위
entity(명사) -> 데이터
shared -> 재사용할 버튼(ui)
widgets -> feature를 묶은 것

/*
 * onClick : feature (클릭하는 행위)
 * icon : shared (공유하는 아이콘)
 * data : entity (데이터 그 자체)
 */
<Shared.Button
  onClick={forkFeature.api.fork}
  icon={shared.icon.fork}
  data={forkEntity.model.forkCount}
/>

중요한 import 위계질서

상위 계층이 하위 계층을 import 가능
❗반대로는 불가능

app - 하위 6가지(processes, pages, widgets, features, entities, shared) 전부 import
pages - 하위 4가지(widgets, features, entities, shared) import
features - 하위 2가지(entities, shared) import

공개 API

각 slice와 segment에는 공개 API가 있습니다.
index.js 또는 index.ts 파일이며,
이 파일을 통해 slice 또는 segment에서 필요한 기능만 외부로 추출하고 불필요한 기능은 격리할 수 있습니다. index 파일은 진입점 역할을 합니다.

공개 API는 import 및 export로 단순하게 작동하므로
애플리케이션을 변경할 때 코드의 모든 곳에서 import를 변경할 필요가 없습니다.

export { Button } from './Button';
export { Title } from '.Title';
export { Textfiled } from './Textfield';
export { Modal } from './Modal';
export { Select } from '.Select';
export { Range } from './Range';