[Front-End] FSD

ChatGPT한테 그려달라고 한 FSD 이미지..ㅎㅎ

 

저도 제일 처음 시작할 때 직면하는 문제 중 하나였습니다. 누가 정해주면 참 좋지만 그게 협업을 하면서도 다 다르게 아키텍처 문제가 발생하니 이 점을 확장할 수 있는 FSD를 보겠습니다.

 

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

레이어(layer), 슬라이스(slice), 세그먼트(segment)의 세가지 개념을 구분합니다.

레이어

레이어는 최상위 디렉토리이자 애플리케이션 분해의 첫 번째 단계입니다. 레이어의 수는 최대 7개로 제한되어 있으며, 일부는 선택 사항이지만 표준화되어 있습니다.

 

app: 애플리케이션 로직이 초기화되는 곳. Provider, Router, 전역 스타일, 전역 타입 선언 등이 정의 되며, 애플리케이션 진입점 역할을 합니다.

processes: 이 레이어는 여러 단계로 이루어진 등록과 같이 여러 페이지에 걸쳐 있는 프로세스를 처리합니다. 이 레이어는 더 이상 사용되지 않는것으로 간주되지만 여전히 가끔 마주할 수 있으며, 선택적 레이어 입니다.

pages: 이 레이어에는 애플리케이션의 페이지가 포함됩니다.

widgets: 페이지에 사용되는 독립적인 ui 컴포넌트 입니다.

features: 이 레이어는 비즈니스 가치를 전달하는 사용자 시나리오와 기능을 다룹니다. (ex. 사진리뷰, 좋아요 등) 선택적 레이어 입니다.

entities: 이 레이어는 비즈니스 엔티티를 나타냅니다. 엔티티에는 사용자, 리뷰, 댓글 등이 포함될 수 있습니다. 선택적 레이어입니다.

shared: 이 레이어에는 특정 비즈니스 로직에 종속되지 않는 재사용 가능한 컴포넌트와 유틸리티가 포함되어 있습니다. 여기에는 UI 키트, axios설정, 애플리케이션 설정, 비즈니스 로직에 묶이지 않은 헬퍼 등이 포함됩니다.

 

레이어들은 코드베이스를 조직화하고, 모듈화되고 유지보수 용이한 확장 가능한 아키텍처를 촉진하는데 도움이 됩니다.

 

기능 분할 설계의 주요 특징 중 하나는 계층 구조이며, 구조에서 features 레이어가 entities 레이어보다 더 위에 있기 때문에  entities레이어는 features레이어의 기능을 사용할 수 없습니다.

features 레이어는 widgets 레이어나 processes 레이어의 컴포넌트를 사용할 수 없으며, 위 레이어는 아래 레이어만 활용할 수 있습니다.

 

슬라이스

각 레이어에는 애플리케이션 분해의 두 번째 수준인 슬라이스라는 하위 디렉토리가 있습니다. 슬라이스에서 연결은 추상적인 것이 아니라 특정 비즈니스 엔티티에 대한 것. 슬라이스의 주요 목표는 코드를 값 별로 그룹화하는 것입니다.

슬라이스 이름은 프로젝트의 비즈니스 영역에 따라 직접 결정되므로 표준화되어 있지 않습니다.

게시물, 사용자, 피드, 갤러리 등 같은 슬라이스가 필요할 수 있습니다.

 

세그먼트

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

api: 필요한 서버 요청

UI: 슬라이스의 ui 컴포넌트

modal: 비즈니스 로직, 즉 상태와의 상호 작용. actions 및 selectors가 이에 해당

lib: 슬라이스 내에서 사용되는 보조 기능

config: 슬라이스에 필요한 구성값이지만 구성 세그먼트는 거의 필요하지 않음.

consts: 필요한 상수

 

공개 API

슬라이스와 세그먼트에는 공개 API 가 있습니다. 공개 API는 index.js(ts) 파일이며, 이 파일을 통해 슬라이스 또는 세그먼트에서 필요한 기능만 외부로 추출하고 불필요한 기능은 격리할 수 있습니다.

 

추상화 및 비즈니스 로직

계승이 높은 레이어일수록 특정 비즈니스 노드에 더 많이 종속되고 더 많은 비즈니스 로직이 포함됩니다.

계층이 낮은 레이어일수록 추사화 수준이 높고 재사용성이 높으며 레이어 자체의 자율성이 적습니다.

 

FSD가 문제를 해결하는 방식

기능 분할 설계의 과제 중 하나는 결합을 느슨하게 하고 응집력을 높이는 것 입니다. FSD가 이러한 결과를 어떻게 달성하는지 이해하는 것은 중요합니다.

OOP에서는 다형성, 캡슐화, 상속 및 추상화 와 같은 개념을 통해 이러한 문제들을 오랜 시간 동안 해결해 왔습니다.

코드의 격리, 재사용성, 그리고 다양한 결과를 보장합니다. 컴포넌트나 기능이 어떻게 사용되느냐에 따라 다른 결과를 얻을 수 있습니다.

 

추상화와 다형성은 레이어를 통해 달성됩니다. 낮은 레이어는 더 추상화 되어있기 때문에 더 높은 레이어에서 재사용될 수 있으며, 특정한 매개변수나 속성에 따라 컴포넌트나 기능이 다르게 작동할 수 있습니다.

캡슐화는 슬라이스와 세그먼트 외부에서 필요하지 않은 것을 격리시키는 공개 API를 통해 달성됩니다. 슬라이스의 내부 세그먼트에 대한 접근은 제한되며, 공개 API는 슬라이스 또는 세그먼트의 기능 및 컴포넌트에 접근할 수 있는 유일한 방법입니다.

상속 또한 레이어를 통해 달성됩니다. 더 높은 레이어는 낮은 레이어를 재사용할 수 있습니다.