Feature-Sliced Design(FSD)를 NextJS와 함께 사용해보기

Feature-Sliced Design이란?

우선 FSD의 레이어(layer), 슬라이스(slice), 세그먼트(segment)의 세 개념을 살펴봐야한다.

Layers

• app: 로직 초기화. provider, router, 전역 스타일, 전역 타입 선언등이 여기에서 정의됨.
• processes(optional): 여러 페이지에 걸쳐 있는 프로세스를 처리한다.(deprecated됨)
• pages: 애플리케이션의 페이지 포함
• widgets: 페이지에 사용되는 독립적인 UI 컴포넌트
• features(optional): 비즈니스 가치를 전달하는 사용자 시나리오와 기능을 다룸 
• entities(optional): 비즈니스 엔티티를 나타낸다. 사용자, 리뷰, 댓글등이 포함됨.
• shared: 특정 비즈니스 로직에 종속되지 않는 재사용 가능한 컴포넌트와 유틸리티가 포함. UI키트, axios 설정, 애플리케이션 설정, 비즈니스 로직에 묶이지 않은 헬퍼등이 포함됨.

-> 위 레이어에서 아래 레이어만 활용할 수 있다.(아래에서는 위 레이어 활용 불가)

-> 선형적 흐름을 유지

├── src
│   ├── app/
│   ├── processes/ (deprecated)
│   ├── pages/
│   ├── widgets
│   ├── features/
│   ├── entities
│   ├── shared

Slices

Layer아래 두번째 레벨로 그룹핑하는것이 목표이다.

└── src
    ├── app/
    │   ├── providers/
    │   ├── styles/
    │   └── index.tsx
    ├── processes/ (deprecated)
    ├── pages/
    │   ├── home/
    │   ├── profile/
    │   └── about/
    ├── widgets
    │   ├── newsfeed/
    │   ├── header/
    │   └── footer/
    ├── features/
    │   ├── user/
    │   ├── auth/
    │   ├── favorites/
    │   └── filter-users/
    ├── entities
    │   ├── user/
    │   └── session/
    ├── shared

Segments

각 슬라이스를 구성. 목적에 따라 슬라이스 내의 코드를 나누는 데 도움이 된다.

• api - 필요한 서버 요청.
• UI - 슬라이스의 UI 컴포넌트.
• model - 비즈니스 로직, 즉 상태와의 상호 작용. actions 및 selectors가 이에 해당
• lib - 슬라이스 내에서 사용되는 보조 기능.
• config - 슬라이스에 필요한 구성값이지만 구성 세그먼트는 거의 필요하지 않음.
• consts - 필요한 상수.

FSD에 대한 더 자세한 내용은 이 링크 참고: https://emewjin.github.io/feature-sliced-design/

 

NextJS 에서 사용하려면 기존의 pages route 폴더나 app 폴더가 없는 것은 어떻게 할까?

NextJS는 pages 폴더를 사용하여 라우팅을 한다. 그러나 이 라우팅 매키니즘은 FSD 개념과 일치하지 않는다. 이러한 라우팅 매커니즘에서는 플래 슬라이스 구조를 유지하는 것이 불가능 하기 때문이다. 그래서 따로 적용하는 방법을 알아봤다.

적용방법

1. NextJs의 페이지 폴더를 프로젝트의 루트 폴더로 이동(권장)

NextJS의 pages 폴더를 프로젝트의 루트 폴더로 이동하고, FSD pages를 [root]/src/pages 폴더에 저장한다.

├── pages              # NextJS pages folder
├── src
│   ├── app
│   ├── entities
│   ├── features
│   ├── pages          # FSD pages folder
│   ├── shared
│   ├── widgets

2. FSD 구조 내에서 페이지 레이어 이름 바꾸기

NextJS 페이지 폴더와의 충돌을 피하기위해 FSD 구조에서 앱 레이어의 이름을 바꾼다. FSD의 앱 레이어 이름을 views로 바꿀수 있다. 이렇게 하면 src 폴더의 프로젝트 구조는 NextJS의 요구사항과 모순되지 않게된다.

├── app
├── entities
├── features
├── pages              # NextJS pages folder
├── views              # Renamed FSD pages folder
├── shared
├── widgets

이러한 방식으로 수정할 경우 프로젝트 README 또는 내부 문서에 이를 문서화 해놓는 것이좋다.

NextJS에는 app 폴더가 없다.

NextJS 13버전 이하에는 명시적인 앱 폴더가 없으며 _app.tsx 파일을 제공한다.

pages/_app.tsx 파일로 앱 기능 가져오기

app 레이어 안에 App 컴포넌트를 생성하고 NextJS가 잘 동작할 수 있도록 pages/_app.tsx안에서 App 컴포넌트를 import한다.

// app/providers/index.tsx

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <Provider1>
      <Provider2>
        <BaseLayout>
            <Component {...pageProps} />
        </BaseLayout>
      </Provider2>
    </Provider1>
  );
};

export default App;

 

그런 다음, 다음과 같이 App 컴포넌트와 전역 스타일을 pages/_app.tsx로 가져올 수 있다.

// pages/_app.tsx

import 'app/styles/index.scss'

export { default } from 'app/providers';

App Router 다루기

App Router는 NextJS 버전 13.4에서 안정화되었다. App Router를 사용하면 pages 폴더 대신 라우팅 app 폴더를 사용할 수 있다.

NextJS app 폴더를 프로젝트의 root 폴더로 이동하고 FSD 페이지를 NextJS app 폴더로 가져오면 된다. 이렇게 하면 FSD 프로젝트 구조가 src 폴더에 저장된다.

├── app                # NextJS app folder
├── src
│   ├── app            # FSD app folder
│   ├── entities
│   ├── features
│   ├── pages
│   ├── shared
│   ├── widgets

 

 

참고:

https://feature-sliced.design/