기능 분할 설계(Feature-Sliced Design, FSD)
레이어, 슬라이스, 세그먼트의 세 가지 개념으로 구분
레이어
레이어는 최상위 디렉토리이자 애플리케이션 분해의 첫 번째 단계
각 레이어에는 고유한 책임 영역이 존재
- app - 프로바이더, 라우터, 전역 스타일, 전역 타입 선언 등을 정의
- processes - 여러 페이지에 걸쳐 있는 프로세스를 처리 (선택적 레이어)
- pages - 애플리케이션의 페이지 포함
- widgets - 페이지에 사용되는 독립적인 UI 컴포넌트
- features - 사용자 시나리오와 기능(ex. 좋아요, 리뷰 작성, 제품 평가 등)
- entities - 비즈니스 엔티티(사용자, 리뷰, 댓글 등 포함)
- shared - 특정 비즈니스 로직에 종속되지 않은 재사용 가능한 컴포넌트와 유틸리티 포함
UI 키트, axios 설정, 애플리케이션 설정, 비즈니스 로직에 묶이지 않은 헬퍼 등이 포함
슬라이스
코드를 값별로 그룹화하는 것이 주요 목표
예를 들어 사진 갤러리에는 사진, 앨범, 갤러리와 같은 섹션이 있을 수 있고,
소셜 네트워크에는 게시물, 사용자, 뉴스피드 같은 슬라이스가 필요할 수 있음
세그먼트
각 슬라이스는 세그먼트로 구성
일반적으로 사용되는 세그먼트들은 다음과 같음
- api - 필요한 서버 요청
- UI - 슬라이스의 UI 컴포넌트
- model - 비즈니스 로직, 즉 상태와의 상호작용. actions 및 selectors가 이에 해당
- lib - 슬라이스 내에서 사용되는 보조 기능
- config - 슬라이스에 필요한 구성값이지만 구성 세그먼트는 거의 필요하지 않음
- consts - 필요한 상수
공개 API
각 슬라이스와 세그먼트에는 공개 API가 존재
공개 API는 index.js 또는 index.ts 파일이며, 이 파일을 통해 슬라이스 또는 세그먼트에서 필요한 기능만 외부로 추출하고 불필요한 기능은 격리(인덱스 파일은 진입점 역할)
공개 API는 import 및 export로 단순하게 작동하므로 애플리케이션을 변경할 때 코드의 모든 곳에서 import를 변경할 필요가 없음
FSD가 문제를 해결하는 방식
기능 분할 설계의 과제 중 하나는 결합을 느슨하게 하고 응집력을 높이는 것
OOP에서는 다형성, 캡슐화, 상속, 추상화와 같은 개념을 통해 이러한 문제들을 해결하는데,
이러한 개념들은 코드의 격리, 재사용성, 그리고 다양한 결과를 보장
기능 분할 설계는 이러한 원칙들을 프론트엔드에 적용하는 데 도움
추상화와 다형성은 레이어를 통해 달성
캡슐화는 슬라이스와 세그먼트 외부에서 필요하지 않은 것을 격리시키는 공개 API를 통해 달성
슬라이스의 내부 세그먼트에 대한 접근은 제한되며, 공개 API는 슬라이스 또는 세그먼트의 기능 및 컴포넌트에 접근할 수 있는 유일한 방법
상속 또한 레이어를 통해 달성. 더 높은 레이어는 낮은 레이어를 재사용
고전적인 아키텍처와의 비교
고전적인 아키텍처의 가장 큰 단점은 컴포넌트 간의 암묵적인 연결과 모듈의 복잡성 때문에 프로젝트의 유지보수가 어려움
Next.js와 FSD의 충돌
최근 Next.js를 기능 분할 설계와 함께 사용하는 경향이 증가
Next.js는 FSD와 잘 작동하지만, 페이지의 파일 라우팅과 앱의 부재라는 두 가지 영역에서 충돌 발생
Pages
Next.js에서는 pages 디렉토리가 파일 라우팅을 담당하며,
각 컴포넌트가 하나의 라우트를 나타냄
FSD에서는 pages는 페이지들의 평면 목록을 담고 있는 레이어로 사용
이로 인해 Next.js 페이지와 FSD 페이지를 어떻게 결합할지에 대한 충돌이 발생
Next.js와 FSD를 함께 사용할 때, [root]/pages/ 와 같이 Next.js 페이지를 애플리케이션 루트에 저장하는 방법이 있음
그리고 FSD 페이지는 [root]/src/pages/ 와 같이 src 폴더 내에 저장
다른 해결 방법으로는 두 개의 디렉토리를 유지
FSD의 페이지들의 평면 목록을 다시 이름 지은 pages-flat과 Next.js의 중첩된 라우트를 위한 pages
실제 페이지 코드는 pages-flat에 저장되고, 그 후에 pages로 내보낼 수 있음
두 가지 방법 모두 사용 가능하지만, 필자는 첫 번째 방법을 선호
App
app 레이어의 모든 기본적인 기능은 Next.js에서 처리
그러나 페이지와 독립적으로 전체 애플리케이션에 대해 무언가를 실행해야 하는 경우
레이아웃 패턴을 사용하여 전체 애플리케이션을 위한 레이아웃을 만들 수 있음
레이아웃 패턴에 대한 Next.js의 문서 Routing: Pages and Layouts 참고
