React FSD 아키텍처 폴더 구조와 기능 분할 전략

프론트엔드 개발에 있어 아키텍처는 프로젝트의 성공 여부를 결정짓는 중요한 요소입니다. 특히 React와 같은 라이브러리를 사용할 때, 적절한 폴더 구조와 기능 분할 전략은 코드의 유지보수성과 확장성을 높이는 데 큰 역할을 합니다.

이번 글에서는 Feature-Sliced Design(FSD) 아키텍처에 대해 자세히 알아보겠습니다. FSD는 비즈니스 로직과 UI를 명확히 구분하고, 프로젝트의 구조를 체계적으로 구성할 수 있는 방법론입니다.

FSD 아키텍처의 개요

FSD는 Feature-Sliced Design의 약자로, 프론트엔드 애플리케이션을 기능 단위로 나누어 관리하는 아키텍처입니다. 이 아키텍처는 애플리케이션을 레이어(Layer), 슬라이스(Slice), 세그먼트(Segment)라는 세 가지 주요 요소로 구분합니다.

이를 통해 개발자는 비즈니스 도메인에 따라 코드를 조직화하고, 유지보수와 확장성이 용이한 구조를 구현할 수 있습니다.

FSD의 특징

FSD 아키텍처의 주요 특징은 다음과 같습니다.

특징	설명
비즈니스 중심의 구조	각 레이어는 비즈니스 도메인에 따라 구분되어 있으며, 관련된 코드들이 한 곳에 모여 관리가 용이합니다.
모듈화	코드가 모듈화되어 있어 특정 기능만 수정하거나 대체하는 것이 가능합니다.
협업 용이	여러 개발자가 동시에 작업할 때 충돌을 최소화할 수 있습니다.
점진적 적용 가능	기존 프로젝트에 점진적으로 도입하여 리팩토링할 수 있습니다.

이와 같은 특징 덕분에 FSD는 점진적으로 성장하는 프로젝트에 적합한 아키텍처로 자리잡았습니다.

레이어(Layer)의 구조

FSD 아키텍처에서 레이어는 최상위 디렉터리를 의미하며, 애플리케이션의 구조를 정의하는 가장 중요한 요소입니다. 레이어의 수는 최대 7개로 제한되며, 각 레이어는 고유한 책임 영역을 가지고 있습니다.

레이어는 비즈니스 도메인에 따라 구분되며, 일반적으로 다음과 같은 구성으로 이루어집니다.

레이어	설명
Features	비즈니스 기능을 중심으로 구성된 레이어입니다. 사용자 인터페이스와 비즈니스 로직이 통합되어 있습니다.
Entities	비즈니스 도메인 모델을 정의하는 레이어로, 도메인 객체와 관련된 코드가 포함됩니다.
Widgets	UI 컴포넌트를 그룹화하여 재사용 가능한 컴포넌트를 정의하는 레이어입니다.
Processes	비즈니스 로직을 처리하는 레이어로, 조건부 로직이나 사이드 이펙트를 포함합니다. (현재 사용되지 않음)
Pages	애플리케이션의 페이지 구성을 정의하는 레이어로, 각 페이지는 특정 기능을 수행합니다.
Shared	여러 기능에서 공유되는 공통 코드를 포함하는 레이어입니다.

이 레이어 구조는 비즈니스 도메인에 따라 코드를 명확하게 구분하고, 유지보수성을 높이는 데 기여합니다.

다른 내용도 보러가기 #1

슬라이스(Slice)의 역할

슬라이스는 각 레이어의 하위 디렉토리로, 특정 비즈니스 기능을 중심으로 코드를 그룹화하는 데 사용됩니다. 슬라이스의 주된 목적은 관련된 코드들을 모아 모듈화하는 것입니다.

각 슬라이스는 비즈니스 도메인에 따라 이름이 결정되며, 이는 프로젝트의 구조를 자연스럽게 형성합니다.

슬라이스	설명
User	사용자 관련 기능을 포함하는 슬라이스로, 로그인, 회원가입 등의 기능이 포함됩니다.
Product	제품 관련 기능을 포함하는 슬라이스로, 제품 목록, 상세 정보 등을 관리합니다.
Order	주문 관련 기능을 포함하는 슬라이스로, 장바구니 및 결제 처리 기능이 포함됩니다.

슬라이스 내부에서는 비즈니스와 관련된 로직을 작성할 수 있으며, 이를 통해 코드의 응집력을 높이고 유지보수성을 향상시킬 수 있습니다. 슬라이스는 각기 독립적으로 개발 및 테스트가 가능하기 때문에 팀원 간의 협업에도 유리합니다.

세그먼트(Segment)의 구성

세그먼트는 슬라이스 내에서 코드를 세분화하여 관리하는 데 도움을 주는 요소입니다. 각 슬라이스는 여러 개의 세그먼트로 구성될 수 있으며, 일반적으로 다음과 같은 세그먼트들이 사용됩니다.

세그먼트	설명
API	서버와의 통신을 담당하는 기능을 포함합니다.
UI	슬라이스의 UI 컴포넌트를 정의합니다.
Model	비즈니스 로직 및 상태 관리를 포함하는 부분입니다.
Lib	슬라이스 내에서 사용되는 보조 기능을 포함합니다.
Config	슬라이스에 필요한 구성값을 관리합니다.
Consts	필요한 상수를 정의합니다.

세그먼트는 슬라이스의 코드들을 보다 명확하게 조직화하여, 코드의 가독성을 높이고 유지보수를 용이하게 합니다. 또한, 각 슬라이스와 세그먼트에는 공개 API가 존재하여, 외부에서 필요한 기능만을 노출하고 불필요한 기능은 숨기는 방식으로 캡슐화를 지원합니다.

FSD 아키텍처의 장점과 단점

FSD 아키텍처는 여러 장점을 가지고 있지만, 모든 아키텍처와 마찬가지로 단점도 존재합니다. 아래 표는 FSD 아키텍처의 주요 장점과 단점을 정리한 것입니다.

장점	단점
명확한 비즈니스 로직 분리	아키텍처의 런닝커브가 커서 학습에 시간이 소요됩니다.
모듈화된 구조	초기 설정이 복잡할 수 있습니다.
협업 및 확장성 향상	팀원 간의 규칙 및 개발 문화가 필요합니다.
기존 프로젝트에 점진적 적용 가능	잘못된 설계는 리팩토링을 어렵게 만들 수 있습니다.

FSD 아키텍처는 비즈니스 로직과 UI를 명확히 분리하여 코드의 구조를 깔끔하게 유지하고, 모듈화된 구조를 통해 특정 기능만 수정하거나 대체하는 것이 가능합니다. 그러나 아키텍처의 런닝커브가 크기 때문에 팀원 간의 협업과 인식이 필요합니다.

다른 내용도 보러가기 #2

결론

FSD 아키텍처는 React 프론트엔드 개발자에게 매우 유용한 방법론입니다. 이 아키텍처를 통해 프로젝트의 구조를 체계적으로 구성하고, 비즈니스 로직과 UI를 명확히 구분하여 유지보수성과 확장성을 높일 수 있습니다.

하지만 FSD를 도입하기 위해서는 팀원 간의 규칙과 개발 문화가 필요하며, 아키텍처의 이해도를 높이기 위한 지속적인 교육이 요구됩니다. FSD 아키텍처가 잘 적용된 프로젝트는 코드의 가독성과 유지보수성을 높이고, 팀 내 협업을 원활하게 하여 성공적인 결과를 이끌어낼 수 있습니다.

앞으로의 프론트엔드 개발에서 FSD 아키텍처를 적극적으로 활용하여 더 나은 소프트웨어를 만들어 나가기를 바랍니다.