애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • FSD 폴더 구조 소개 (feat. NextJS App Router, Pages)
    Tip 2024. 7. 27. 12:54
    728x90
    반응형

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

    오늘은 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

     

    반응형

    댓글

Designed by Tistory.