FSD 아키텍처 파헤치기

김영은·2024년 7월 8일

FSD 아키텍처... 응...?

학교 전공동아리 시간에 동아리 프론트엔드 친구들과 프로젝트 아키텍처에 대해 이야기를 나누고 있었다.
이왕 1년짜리 큰 프로젝트를 진행하는 만큼 더 많은 지식을 얻고, 경험도 얻고 싶었던 와중 프론트엔드 팀장이 선언했다.

그게뭔데... 어떻게하는건데...😱😱

이왕 사용할거 제대로 알고 사용해보기로했다. 슬쩍 찍먹으로 검색해봤는데
꽤나 방대한 내용을 가지고 있는 아키텍처라는 생각이들어 찬찬히 정리하며 이해하기로 다짐했다.

FSD 아키텍처 (Feature-Sliced Design)
Feature-Sliced Design 으로 프런트엔드 애플리케이션을 스캐폴딩하기 위한 아키텍처 방법론으로 기능 분할 디자인이라고도 한다.

FSD 아키텍처를 사용하면 코드 구성의 규칙을 더 명확하게 작성하여
프로젝트를 더 이해하기 쉽고 체계적으로 만들 수 있다고 한다.

FSD의 구성요소에는 레이어(layer),슬라이스(slice),세그먼트(segment)의 세 가지 개념으로 구분 됨.

레이어는 최상위 디렉터리이며 애플리케이션 분해의 최상의 root 입니다.
FSD 아키텍처에서 레이어의 수는 최대 7단계로 제한된다.

app
애플리케이션 로직이 초기화되는 곳이다. 프로바이더, 라우터, 전역 스타일, 전역 타입 선언 등이 여기에서 정의된다.

pages
해당 레이어는 애플리케이션의 페이지가 포함된다.

widgets
해당 레이어는 사용되는 독립적인 UI 컴포넌트

features
해당 레이어는 비지니스 로직에 종속되지 않고 재사용 가능한 컴포넌트와 유틸리티가 포함된다. (components,hooks 등을 포함한다.)

슬라이스는 FSD의 두번째 계층. 슬라이스의 이름이 가져야 할 특별 한 규칙은 없고, 비즈니스 도메인으로 슬라이스 이름이 정해진다.

각각의 슬라이스를 구성하는 더 작은 요소이다.
가장 일반적인 세그먼트는 ui, model(store, actions), api, lib(utils/hooks) 이다.

이게 다 였다. 막상 공부해보니 생각보다 양이 많지 않아서 놀랬다.
근데 내용이 너무 어렵다. 읽으면 읽을수록 정확한 예시없이는 너무 추상적이라는 생각이 들었다.

그래도 결국 예시들을 분석하고 참고하면서 나만의 FSD 아키텍처를 완성한 것 같아 뿌듯했다.

Frontend Developer