FSD 아키텍쳐 알아보기

완성하는 프로젝트보다 새로 시작하는 프로젝트가 몇 배는 더 많지만... 그럼에도 불구하고 매번 고민되는 부분 중 하나가 파일 디렉토리를 어떻게 구성할까다. 개발 생태계에는 디렉토리 구조마저 효율적으로 가져가기 위한 다양한 아키텍쳐가 존재하는데, 우연히 다른 프론트엔드 개발자와 대화하다가 Feature-Sliced Design(FSD) 패턴에 대해 알게 됐다.

 

FSD는 기능 단위로 파일을 나눠 모듈화해서 코드의 유지 보수성과 확장성을 높이는 데에 중점을 둔다. 피쳐를 기준으로 코드를 수평적으로 분리해 구조 파악의 어려움을 해소한다.

 

FSD 패턴에서는 코드를 레이어화해서 상위층에서 하위층으로 흐르는 방향을 따른다. 각 레이어별로 명확한 책임을 갖고있으며 레이어는 소분류 역할을 하는 슬라이스(slice)로 구분돼고, 각 슬라이스는 기능별로 더 세분화된 세그먼트(segment)로 구분할 수 있다. 참고로 모든 레이어를 전부 사용할 필요는 없고, 아래 이미지의 레이어 중 process는 deprecated됐다.

FSD 아키텍쳐

• App: 앱을 가동시키는 데에 필요한 핵심적인 부품들이 들어가는 레이어(라우팅 처리, 글로벌 스타일, 컨텍스트 provider 등)로, 슬라이스 없이 세그먼트로만 이루어진다
• Pages: 앱의 독립적인 페이지들
• Widgets: 한 기능이나 UI를 전체적으로 담당하는 컴포넌트
• Features: 재사용이 가능한 프로덕트의 피쳐들
• Entities: 비즈니스 로직을 수행하는 객체들
• Shared: 재사용이 가능한, 프로덕트에 국한되지 않는 유틸리티 함수나 컴포넌트

FSD 패턴을 사용할 때 지켜야 할 주요 룰 중 하나는 의존성의 방향이다. 하위 레이어는 상위 레이어의 코드에 의존하지 않도록 설계해야 한다. Features 폴더 안의 코드는 entities의 코드를 참조할 수 있지만, 반대는 불가능하다.

 

또한 기능을 너무 잘게 분리하는 것도 피해야 한다. 코드를 짤 때도 제일 어려운 부분이라고 느끼지만... 기능들을 독립적이면서도 논리에 맞게 그룹화하는 것이 핵심이다.