Feature-Sliced Design(FSD) 아키텍처와 Public API 관리(feat. React)

Feature-Sliced Design(FSD) 아키텍처와 Public API 관리

Feature-Sliced Design(FSD)은 프론트엔드 애플리케이션의 기능 분할 설계를 위한 모듈화 및 구조화된 아키텍처 방식입니다. 이 아키텍처를 통해 코드의 가독성 및 유지보수성을 높일 수 있습니다. 이번 글에서는 FSD 아키텍처의 개념과 함께, 공통적으로 사용되는 Layer, Slices, Segments의 구성 방식과 Public API 관리 방식을 소개합니다.

Feature-Sliced Design(FSD) 아키텍처와 Public API

1. FSD 아키텍처의 구성 요소

FSD는 Layers, Slices, 그리고 Segments로 구분되며, 각각의 목적에 맞게 애플리케이션을 구조화합니다.

Layers(레이어)

레이어는 애플리케이션의 최상위 디렉토리로, 기능의 큰 영역을 담당합니다. 예를 들어:

• app: 애플리케이션의 진입점 및 초기화와 관련된 코드가 위치합니다.
• processes: 페이지에 걸친 프로세스를 처리하는 레이어입니다.
• pages: 애플리케이션의 페이지 단위로 구성된 레이어입니다.
• widgets: UI 컴포넌트들을 포함하는 레이어입니다.
• features: 비즈니스 기능을 다루는 레이어로, 사용자 팔로우, 리뷰 작성 등의 기능이 여기에 포함됩니다.
• entities: 엔티티 레이어로, 사용자, 리뷰, 댓글과 같은 비즈니스 개체들이 포함됩니다.
• shared: 애플리케이션 전반에 걸쳐 사용되는 유틸리티 함수들이 포함됩니다.

Slices(슬라이스)

Slices는 레이어 안에서 기능별로 나뉘며, 각각 하나의 독립적인 기능을 처리합니다. 예를 들어, user, post, comment 같은 단위로 나눌 수 있습니다.

Segments(세그먼트)

Slices 안에서 코드의 세분화가 필요한 경우 세그먼트로 구분할 수 있습니다. 일반적으로 다음과 같은 세그먼트를 정의합니다:

• ui: 사용자 인터페이스 컴포넌트
• model: 상태 관리와 비즈니스 로직
• api: 외부 API와의 통신
• lib: 공통 라이브러리나 유틸리티 함수
• consts: 필요한 상수

2. Public API 관리

FSD에서 중요한 부분 중 하나는 Public API입니다. Public API는 애플리케이션의 슬라이스와 세그먼트 간에 정의된 기능들을 블럭으로 묶어 관리할 수 있도록 해줍니다. 이를 통해 불필요한 내부 구현 부분이 외부로 노출되지 않도록 합니다.

예시 코드: Public API 구현

// api/userProfileAPI.ts
import axios from 'axios';

export const getUserProfile = async () => {
  const response = await axios.get('/api/user/profile');
  return response.data;
};

// index.ts
export * from './api/userProfileAPI';

위 코드에서는 getUserProfile이라는 API 호출 함수를 index.ts에서 export하여, 다른 컴포넌트나 슬라이스에서 쉽게 호출할 수 있게 처리하고 있습니다.

3. FSD 구조의 예시

아래는 FSD 구조를 적용한 예시입니다:

src/
 ├── app/
 ├── pages/
 ├── widgets/
 ├── features/
 │    ├── channel/
 │    │   ├── ui/
 │    │   ├── model/
 │    └── comment/
 │        ├── ui/
 │        ├── model/
 └── shared/
      ├── components/
      ├── utils/

 

이 구조에서는 shared 폴더에 공통 컴포넌트와 유틸리티가 위치하고 있으며, 각 기능별로 features 폴더 아래에 ui, model, api 세그먼트가 나뉘어 있습니다.