FSD

1. FSD란

기능 중심으로 코드를 구성하는 폴더 구조 전략

기능 중심으로 나누어 모듈화하고, 각 기능을 독립적으로 관리하는 방식

대규모 프론트엔드 애플리케이션에서 코드의 유지보수성과 재사용성을 높이기 위해 사용

FSD 아키텍처는 각 기능을 독립적인 도메인으로 분리하여 개발할 수 있도록 하고, 코드의 복잡도를 줄이며, 팀 협업을 개선하는 데 목적이 있다.

FSD 기본 개념

FSD는 기능 중심(Feature-Oriented) 접근 방식을 사용한다. 이를 통해 프로젝트가 점진적으로 성장하면서도 유지보수가 용이하게 설계된다. FSD 아키텍처의 기본 원칙은 다음과 같다.

1. 기능 기반 분할: 애플리케이션을 기능별로 나누어 각 기능을 독립적인 모듈로 관리하며, 기능은 시스템에서 특정한 비즈니스 로직이나 사용자 인터페이스의 한 부분을 담당한다.
2. 레이어링: 기능을 레이어로 나누어 책임을 분리한다. 일반적으로 Presentation, Domain, Data 레이어로 구성되며, 이는 기능에 따라 구체화된다.
3. 폴더 구조: 기능별로 폴더 구조를 구성하여 코드의 가독성과 유지보수성을 높이며, 각 폴더는 그 기능과 관련된 모든 것을 포함한다.
4. 재사용성: 공통 기능이나 유틸리티는 재사용 가능하도록 Shared 레이어에 배치한다. 이를 통해 중복 코드를 줄이고 일관성을 유지한다.

세부구조

• Layers (레이어): 프로젝트의 논리적 단위이며, 각 레이어는 특정 역할을 담당한다. 이는 다른 레이어에 의존하거나 영향을 미칠 수 있다.
• Slices (슬라이스): 기능별로 나뉜 모듈들을 의미한다. 사진처럼, User, Post, Comment등의 슬라이스가 있을 수 있다.
• Segments (세그먼트): 각 슬라이스 내에서 기능을 더 세분화한 단위이다. 일반적으로 UI, Model, API로 구분된다.

기본 구조

• App: 프로젝트의 최상위 계층으로, shared, entities, features, widgets, pages를 사용할 수 있으며, 다른 계층에 의존하지 않는다.
• Processes: 더이상 사용하지 않음
• Pages: 개별 페이지의 구현을 담당하며, app 계층에 의존한다.
• Widgets: 재사용 가능한 UI 구성 요소를 포함하며, pages, app 계층에 사용될 수 있다.
• Features: 특정 기능을 구현하는 데 필요한 모든 것을 포함하며, widgets, pages , app 계층에서 사용된다.
• Entities: 도메인 모델과 관련된 모든 것을 포함하며, 상위 모든 계층에서 사용될 수 있다.
• Shared: 모든 계층에서 사용될 수 있는 유틸리티와 공통 컴포넌트들을 포함한다.

FSD는 언제 적용해야 할까

운영기간이 짧거나 작은 규모의 프로젝트라면 적용할 필요가 없으나 점진적으로 규모가 커질 예정이라면 FSD 방식을 채택하는걸 고려해봐야한다.