​

개요

항상 토이프로젝트를 만들다 보면 문득 고민에 빠지는 것들이 있었습니다.

공용 컴포넌트의 경우, 이 컴포넌트는 여러 곳에서 사용되지만, 모든 곳에서 쓰지는 않습니다. 과연 여기 위치해도 괜찮은 것일까요?

전역 사용 컴포넌트의 경우, 이 컴포넌트는 모든 곳에서 사용되긴 하는데, 하나의 컴포넌트 때문에 공용으로 사용하는 폴더에 넣는 것이 올바른 선택인지 고민됩니다.

그 고민을 해결해보고자 이번에는 FSD에 대해 알아보고자 합니다.

FSD 구조란

​기능 단위로 나누어 개발하는 방식으로, 프로젝트의 복잡도가 증가할 때 관리와 확장성을 쉽게 해주는 아키텍처 패턴입니다.

FSD의 핵심 개념은 각 기능이 독립적인 모듈로 구성된다는 것!

즉, UI 컴포넌트, 상태 관리, 스타일링, 비즈니스 로직 등을 하나의 기능 단위로 묶어서 관리합니다.

다음과 같은 이점들이 있습니다.

1.모듈화: 각 기능은 독립적인 모듈로 분리되어 있기 때문에, 다른 기능에 영향을 주지 않고 개발 및 수정이 가능합니다.

2.유지보수 용이성: 기능별로 코드를 관리하므로 특정 기능에 문제가 발생했을 때 쉽게 문제를 파악하고 해결할 수 있습니다.

3.협업 효율성: 팀원들이 각 기능별로 작업을 나누어 진행할 수 있기 때문에 대규모 프로젝트에서 협업이 더 원활합니다.

4.재사용성: 기능별로 모듈화된 코드를 다른 프로젝트나 페이지에서도 쉽게 재사용할 수 있습니다.

구조 예시

​/src
  /app            # 앱 초기화 및 전역 설정 관련 (store, routing 등)
  /entities        # 핵심 비즈니스 로직을 처리하는 객체들 (도메인 모델, 상태 등)
  /features        # 개별 기능 단위 (서브 도메인)
  /pages           # 페이지 구성 (라우팅된 주요 화면)
  /widgets         # 페이지나 여러 기능에 걸쳐 재사용될 수 있는 UI 구성 요소들
  /shared          # 앱 전반에서 사용되는 공통 리소스 (유틸리티, 상수, API 함수 등)

폴더 구조를 역할에 따라 나눈 후, 각 역할에 맞는 하위 폴더로 세분화합니다.

예를 들어, 기능(feature)을 정리할 경우에는 다음과 같이 각 기능에 맞는 폴더를 구성합니다.

/features
  /write
  /delete
  /like