FSD 폴더 구조 소개 (feat. NextJS App Router, Pages)

많은 프론트엔드 개발자의 고민은 폴더 구조일 것입니다.

오늘은 Feature-Sliced Design(FSD)라는 요즘 가장 괜찮다고 생각하는 폴더 구조를 소개하겠습니다.

FSD는 프론트엔드 애플리케이션을 구조화하기 위한 아키텍처적 방법론입니다.

FSD의 주된 목표는 프로젝트를 이해하기 쉽고 변화하는 비즈니스 요구에 안정적으로 대응할 수 있도록 만드는 것입니다.

Feature-Sliced Design(FSD)

FSD의 주요 개념

1. 레이어(Layers)

애플리케이션의 전반적인 구조를 구성하는 최상위 폴더입니다.

주요 레이어는 다음과 같습니다.

하위 요소는 상위 요소들을 Import 할 수 없습니다.

(pages에서 widgets, entities, shared는 Import 해서 사용할 수 이 있지만 shared는 아무것도 Import 해서 가지고 올 수 없다.)

* 추가로 app과 shared 레이어의 경우 다른 레이어들과 달리 슬라이스가 없습니다.

• app: 라우팅, 엔트리 포인트, 글로벌 스타일 및 프로바이더를 포함.
• pages: 전체 페이지나 큰 페이지 부분을 포함.
• widgets: 독립적인 기능이나 UI 요소.
• features: 제품 기능을 구현한 모듈.
• entities: 프로젝트에서 다루는 비즈니스 엔터티.
• shared: 프로젝트 전반에서 재사용 가능한 기능들.

FSD Layer 사용 유무

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