FSD 폴더 구조 소개 (feat. NextJS App Router, Pages)
많은 프론트엔드 개발자의 고민은 폴더 구조일 것입니다.
오늘은 Feature-Sliced Design(FSD)라는 요즘 가장 괜찮다고 생각하는 폴더 구조를 소개하겠습니다.
FSD는 프론트엔드 애플리케이션을 구조화하기 위한 아키텍처적 방법론입니다.
FSD의 주된 목표는 프로젝트를 이해하기 쉽고 변화하는 비즈니스 요구에 안정적으로 대응할 수 있도록 만드는 것입니다.
FSD의 주요 개념
1. 레이어(Layers)
애플리케이션의 전반적인 구조를 구성하는 최상위 폴더입니다.
주요 레이어는 다음과 같습니다.
하위 요소는 상위 요소들을 Import 할 수 없습니다.
(pages에서 widgets, entities, shared는 Import 해서 사용할 수 이 있지만 shared는 아무것도 Import 해서 가지고 올 수 없다.)
* 추가로 app과 shared 레이어의 경우 다른 레이어들과 달리 슬라이스가 없습니다.
- app: 라우팅, 엔트리 포인트, 글로벌 스타일 및 프로바이더를 포함.
- pages: 전체 페이지나 큰 페이지 부분을 포함.
- widgets: 독립적인 기능이나 UI 요소.
- features: 제품 기능을 구현한 모듈.
- entities: 프로젝트에서 다루는 비즈니스 엔터티.
- shared: 프로젝트 전반에서 재사용 가능한 기능들.
2. 슬라이스(Slices)
비즈니스 도메인에 따라 코드베이스를 분할하는 방식입니다.
각 슬라이스는 관련된 모듈을 근접하게 유지하여 탐색을 쉽게 합니다.
같은 레이어에 있는 다른 슬라이스를 참조할 수 없으며, 이는 높은 응집력과 낮은 결합도를 유지하는 데 도움이 됩니다.
3. 세그먼트(Segments)
슬라이스 내에서 코드의 목적에 따라 세분화됩니다.
일반적인 세그먼트는 다음과 같습니다
- ui: UI 구성 요소 및 스타일.
- api: 백엔드와의 상호작용.
- model: 데이터 모델 및 비즈니스 로직.
- lib: 슬라이스에서 필요한 라이브러리 코드.
- config: 설정 파일 및 기능 플래그.
예시 폴더 구조
다음은 FSD를 적용한 간단한 프로젝트 구조입니다.
/src
|-- app
| |-- routes
| |-- analytics
|-- pages
| |-- home
| |-- article-reader
| |-- ui
| |-- api
| |-- settings
|-- shared
| |-- ui
| |-- api
- app: 애플리케이션을 실행하는 데 필요한 모든 것.
- pages: 전체 페이지 또는 큰 페이지 부분.
- shared: 프로젝트 전반에서 재사용 가능한 기능들.
FSD의 장점
- 일관성: 구조가 표준화되어 있어 프로젝트가 더 일관되게 유지됩니다.
- 변화와 리팩토링에 대한 안정성: 각 레이어는 아래 레이어의 모듈만 참조할 수 있어 독립적인 수정이 가능합니다.
- 비즈니스 및 사용자 요구에 맞춘 설계: 비즈니스 도메인에 따라 코드를 분할하여 관련 없는 부분을 완전히 이해하지 않아도 유용한 작업을 수행할 수 있습니다
Feature-Sliced Design은 프로젝트의 복잡성을 관리하고 유지보수성을 높이는 데 매우 유용한 방법론입니다.
물론 모든 프로젝트에서 FSD 방식으로 하는 것은 배보다 배꼽이 더 크다고 생각합니다.
FSD가 필요한 경우는 대규모 프로젝트나 지속적인 개발이 필요한 프로젝트에서 그 가치가 빛을 발합니다.
그리고 완전하게 FSD의 폴더를 모두 사용할 필요 없이 필요한 부분만 차용해서 사용해도 충분합니다.
더 자세한 내용은 Feature-Sliced Design 공식 문서에서 확인할 수 있습니다.
NextJS App Router와 FSD 통합
React를 사용할 때 최근 가장 많이 사용하는 NextJS의 경우 FSD를 완벽하게 통합하기는 어려움이 있습니다.
그때에 간단하게 FSD를 적용할 수 있게 FSD 공식 문서에서 제공한 예시를 마지막으로 글을 마치겠습니다.
1. 기존 Pages 폴더
// 1. 가장 간단한 방식
├── pages # NextJS pages 폴더
├── src
│ ├── app # FSD app 폴더
│ ├── entities
│ ├── features
│ ├── pages # FSD pages 폴더
│ ├── shared
│ ├── widgets
2. 기존 형식 최대한 유지
├── app
├── entities
├── features
├── pages # NextJS pages 폴더
├── views # FSD pages 폴더 이름 변경
├── shared
├── widgets
2. App Router
├── app # NextJS app 폴더
├── src
├ ├── app # FSD app 폴더
├ ├── entities
├ ├── features
├ ├── pages # FSD pages 폴더
├ ├── shared
├ ├── widgets