FSD(Feature-Sliced Design) 프론트 아키텍쳐

FSD(Feature-Sliced Design)란?

Feature-Sliced Design은 프론트엔드 애플리케이션을 구조적으로 체계화하는 아키텍처 방법론이다.

 

이 방법론의 핵심은 애플리케이션을 레이어(Layer)와 슬라이스(Slice)로 나누는 데 있다. 레이어는 애플리케이션의 구조적 계층을 나타내고, 슬라이스는 특정 비즈니스 도메인에 따라 코드를 나눈다. 이렇게 나누면 관련된 코드가 서로 가까이 위치하게 되어 가독성이 높아지고, 각 부분 간의 의존성을 줄일 수 있다.

 

주요 개념

1. 레이어(Layers): 레이어는 애플리케이션의 구조적 계층을 말한다. 예를 들어, pages, widgets, features 같은 레이어가 있으며, 각 레이어는 특정 목적에 맞춰 코드를 그룹화한다.
2. 슬라이스(Slices): 슬라이스는 비즈니스 도메인에 따라 코드를 나누는 방식이다. 예를 들어, user, post, comment 같은 슬라이스가 존재하며, 이를 통해 비즈니스 로직에 기반한 애플리케이션의 각 부분을 독립적으로 관리할 수 있다.
3. 세그먼트(Segments): 슬라이스 내에서 코드를 더욱 세분화하는 단위를 세그먼트라고 한다. ui, api, model 같은 세그먼트가 대표적이며, 이는 코드의 역할에 따라 더욱 세부적으로 관리할 수 있게 한다.

https://feature-sliced.design/docs/get-started/overview

 

 

FSD의 장점은 프로젝트가 커지더라도 각 모듈이 독립적으로 동작할 수 있다는 점이다. 이를 통해 개발자는 특정 기능을 수정하거나 새로운 기능을 추가할 때 다른 부분에 영향을 주지 않고 작업할 수 있다. 또한, 팀이 각자 다른 부분을 맡아 동시에 개발할 수 있어 전체 개발 속도를 높일 수 있다. 코드의 가독성과 유지보수성 역시 크게 향상된다.

 

 

---

 

 

- 실제 적용한 예시