React 애플리케이션에서 Feature-Sliced Design(FSD) 적용하기

React 애플리케이션에서 Feature-Sliced Design(FSD)을 적용하면 코드 구조를 체계적으로 관리하고 유지보수성을 향상시킬 수 있습니다. 다음은 FSD의 개념 설명과 실제 개발 적용을 위한 5회차 강의안입니다.

1회차: FSD 개념 이해 및 프로젝트 설정

목표:

• FSD의 기본 개념과 필요성을 이해하고, React 프로젝트를 설정합니다.

내용:

• FSD란 무엇인가?
  • 기능 중심의 아키텍처 패턴으로, 코드의 모듈화와 유지보수성을 높이기 위한 설계 방법론입니다.
  • 프로젝트를 기능 단위로 분리하여 각 기능을 독립적으로 관리합니다.
• FSD의 주요 구성 요소:
  • Layer(레이어): 애플리케이션의 전반적인 구조를 구성하는 최상위 폴더입니다. 주요 레이어는 다음과 같습니다.
    • app: 애플리케이션의 진입점 및 초기화와 관련된 코드가 위치합니다.
    • processes: 페이지에 걸친 프로세스를 처리하는 레이어입니다.
    • pages: 애플리케이션의 페이지 단위로 구성된 레이어입니다.
    • widgets: UI 컴포넌트들을 포함하는 레이어입니다.
    • features: 비즈니스 기능을 다루는 레이어로, 사용자 팔로우, 리뷰 작성 등의 기능이 여기에 포함됩니다.
    • entities: 엔티티 레이어로, 사용자, 리뷰, 댓글과 같은 비즈니스 개체들이 포함됩니다.
    • shared: 애플리케이션 전반에 걸쳐 사용되는 유틸리티 함수들이 포함됩니다.
  • Slice(슬라이스): 레이어 안에서 기능별로 나뉘며, 각각 하나의 독립적인 기능을 처리합니다. 예를 들어, user, post, comment 같은 단위로 나눌 수 있습니다.
  • Segment(세그먼트): 슬라이스 안에서 코드의 세분화가 필요한 경우 세그먼트로 구분할 수 있습니다. 일반적으로 다음과 같은 세그먼트를 정의합니다:
    • ui: 사용자 인터페이스 컴포넌트
    • model: 상태 관리와 비즈니스 로직
    • api: 외부 API와의 통신
    • lib: 공통 라이브러리나 유틸리티 함수
    • consts: 필요한 상수
• 프로젝트 설정:
  • React 프로젝트 생성:

    npx create-react-app fsd-example --template typescript

     
  • 폴더 구조 초기 설정:

    fsd-example/
    ├── src/
    │   ├── app/
    │   ├── processes/
    │   ├── pages/
    │   ├── widgets/
    │   ├── features/
    │   ├── entities/
    │   └── shared/
    └── ...

 

 

npx create-react-app fsd-example --template typescript

실습:

• React 프로젝트를 생성하고, 위의 폴더 구조를 설정합니다.

2회차: FSD의 Layer와 Slice 구성

목표:

• FSD의 Layer와 Slice를 구성하고, 각 레이어의 역할을 이해합니다.

내용:

• Layer 구성:
  • 각 레이어의 역할과 책임을 정의합니다.
  • 상위 레이어는 하위 레이어에 의존할 수 있지만, 하위 레이어는 상위 레이어에 의존하지 않습니다.
• Slice 구성:
  • 각 레이어 내에서 기능별로 슬라이스를 나누어 관리합니다.
  • 예: features/user, features/post 등

실습:

• features/user와 features/post 슬라이스를 생성하고, 각 슬라이스에 필요한 파일들을 생성합니다.

3회차: Segment를 통한 코드 세분화

목표:

• Segment를 활용하여 코드를 세분화하고, 각 세그먼트의 역할을 이해합니다.

내용:

• Segment 구성:
  • 각 슬라이스 내에서 ui, model, api, lib, consts 등의 세그먼트를 정의합니다.
  • 각 세그먼트의 역할과 책임을 명확히 합니다.
• 예시:
  • features/user/ui: 사용자 관련 UI 컴포넌트
  • features/user/model: 사용자 상태 관리 로직
  • features/user/api: 사용자 관련 API 호출 함수

실습:

• features/user 슬라이스 내에 각 세그먼트를 생성하고, 예시 코드를 작성합니다.

4회차: FSD를 활용한 기능 개발

목표:

• FSD 구조를 활용하여 실제 기능을 개발하고, 각 레이어와 슬라이스, 세그먼트 간의 상호작용을 이해합니다.

내용:

• 기능 개발 흐름:
  • entities 레이어에서 도메인 모델 정의
  • features 레이어에서 비즈니스 로직 구현
  • widgets 레이어에서 UI 컴포넌트 구성
  • pages 레이어에서 페이지 구성
• 예시:
  • 사용자 목록을 불러와 화면에 표시하는 기능 개발

실습:

• 사용

React FSD