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

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

목표
FSD(Feature-Sliced Design)의 기본 개념과 필요성을 이해하고, React 프로젝트를 설정합니다.

---

FSD란 무엇인가?

Feature-Sliced Design(FSD)은 기능 중심의 아키텍처 패턴으로, 애플리케이션을 모듈화하여 코드의 유지보수성과 확장성을 높이는 데 목적이 있습니다. 프로젝트를 기능 단위로 분리해 각 기능을 독립적으로 관리하고 유지보수할 수 있게 합니다.

FSD의 주요 구성 요소

FSD 아키텍처는 레이어, 슬라이스, 세그먼트 구조로 구성됩니다.

1. Layer (레이어)

프로젝트의 주요 폴더 구조를 정의합니다. 레이어는 다음과 같이 구분됩니다:

• app: 애플리케이션의 초기화 및 전역 설정과 관련된 코드
• processes: 페이지 간에 걸쳐 작동하는 주요 프로세스를 관리
• pages: 페이지 단위의 기능 구성
• widgets: 공통 UI 컴포넌트를 정의
• features: 비즈니스 기능 단위, 예를 들어, 사용자 팔로우, 리뷰 작성 등
• entities: 사용자, 리뷰, 댓글 등과 같은 비즈니스 개체를 관리
• shared: 프로젝트 전반에 걸쳐 공통으로 사용되는 유틸리티 함수와 리소스

2. Slice (슬라이스)

각 레이어 내에서 기능 단위로 코드가 나뉩니다. 예를 들어, 사용자 인증 기능은 features/userAuth라는 슬라이스에 위치하게 됩니다.

3. Segment (세그먼트)

슬라이스 내에서 코드의 세분화가 필요한 경우, 세그먼트로 나누어 관리합니다. 주로 다음과 같은 세그먼트를 포함합니다:

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

---

실습: FSD 구조로 React 프로젝트 설정하기

Step 1: 프로젝트 생성

터미널에서 다음 명령어로 React 프로젝트를 생성합니다. TypeScript 템플릿을 사용하여 더 강력한 타입 관리를 구현할 수 있습니다.

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

프로젝트 생성이 완료되면, 다음과 같은 디렉토리 구조가 자동으로 생성됩니다.

Step 2: 폴더 구조 초기 설정

다음으로 FSD 구조를 반영하기 위해 src 폴더 내에 필요한 폴더들을 생성합니다.

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

 

세부 설정

1. app 폴더: 프로젝트의 진입점과 전역 설정을 관리합니다.
2. processes 폴더: 로그인, 로그아웃, 또는 데이터 로딩 등 페이지 간에 걸친 프로세스를 처리할 코드를 작성합니다.
3. pages 폴더: 개별 페이지를 구성하는 컴포넌트를 작성합니다.
4. widgets 폴더: 헤더, 풋터, 사이드바 등 재사용 가능한 UI 컴포넌트를 작성합니다.
5. features 폴더: 특정 기능 단위, 예를 들어 유저 인증 등을 포함하는 폴더입니다.
6. entities 폴더: 비즈니스 개체에 해당하는 컴포넌트와 로직을 작성합니다.
7. shared 폴더: 프로젝트 전체에 걸쳐 사용되는 유틸리티 함수나 공통 컴포넌트들을 작성합니다.

Step 3: 실행 확인

이제 프로젝트가 올바르게 실행되는지 확인합니다.

cd fsd-example
npm start

 

이제 기본 React 애플리케이션이 정상적으로 실행됩니다. FSD 구조가 적용된 빈 틀에서 각 폴더에 코드를 추가하면서 기능을 확장해나갈 수 있습니다.

이 설정이 완료되면 앞으로 각 기능을 features, entities, pages 폴더에 맞게 추가하고, FSD 원칙에 따라 독립적인 기능별 모듈화가 가능해집니다.