기능 분할 설계 - 최고의 프런트엔드 아키텍처 ( Korean FE Article)

 

원문 : https://dev.to/m_midas/feature-sliced-design-the-best-frontend-architecture-4noj
번역글 : https://emewjin.github.io/feature-sliced-design/

 

읽게 된 이유

 

폴더 구조를 짤 때 항상 생각이 많다.  최선인가..? 그런데 고민이 항상 깊지는 못했고, 개인 프로젝트에 괜찮다 싶은 것을 직접 도입 및 체험해 보려고 한다. 

아토믹 디자인과 함께 꽤나 커뮤니티에서 자주 언급되던 아티클인데, 그 당시에는 조금 얕게 읽었어서 이번 기회에 다시 감상평을 남기면서 정리하려고 한다.

 

아티클 내용

기본적으로 레이어, 슬라이스, 세그먼트로 이루어져 있다.

 

레이어는 (출처 : 번역글) 7가지의 영역으로 나뉘어져 있고, 재사용 빈도에 따라 계층 구조를 이루어져 있다.

아래쪽 레이어로 갈수록 추상화가 되어있고, 계층 구조기에 재사용성이 낮은 상위 레이어를 하위 레이어에선 사용하면 안된다.

• app: 애플리케이션 로직이 초기화되는 곳입니다. 프로바이더, 라우터, 전역 스타일, 전역 타입 선언 등이 여기에서 정의됩니다. 애플리케이션의 진입점 역할을 합니다.
• processes: 이 레이어는 여러 단계로 이루어진 등록과 같이 여러 페이지에 걸쳐 있는 프로세스를 처리합니다. 이 레이어는 더 이상 사용되지 않는 것으로 간주되지만 여전히 가끔씩 마주할 수 있습니다. 선택적 레이어입니다.
• pages: 이 레이어에는 애플리케이션의 페이지가 포함됩니다.
• widgets: 페이지에 사용되는 독립적인 UI 컴포넌트입니다.
• features: 이 레이어는 비즈니스 가치를 전달하는 사용자 시나리오와 기능을 다룹니다. 예를 들어 좋아요, 리뷰 작성, 제품 평가 등이 있습니다. 선택적 레이어입니다.
• entities: 이 레이어는 비즈니스 엔티티를 나타냅니다. 이러한 엔티티에는 사용자, 리뷰, 댓글 등이 포함될 수 있습니다. 선택적 레이어입니다.
• shared: 이 레이어에는 특정 비즈니스 로직에 종속되지 않은 재사용 가능한 컴포넌트와 유틸리티가 포함되어 있습니다. 여기에는 UI 키트, axios 설정, 애플리케이션 설정, 비즈니스 로직에 묶이지 않은 헬퍼 등이 포함됩니다.

레이어 하위 단계에는 슬라이스가 있으며  슬라이스의 주요 목표는 코드를 값별로 그룹화하는 것이다.

그리고   세그먼트를 통해 목적에 따라 슬라이스 내의 코드를 나눈다.

 

결국 FSD는 함수형 프로그래밍 처럼 추상화,  다형성, 캡슐화, 상속의 역할을 해준다.

 

느낀점

이전에 읽었을 때, 함수형 프로그래밍이 아직 낯선 나에게는 조금 어렵게 느껴지는 아티클이었고 도입하기도 어렵다고 생각했었다. 디자이너가 따로 있었던 것이 아니었어서, 각각 레이어 별로 추상화 하는 것도 어려웠다.

다만 shared와  widgets~ entities, pages 이렇게 3가지의 레이어만 사용하여서 쓰려고 했었다. 

페이지 기반으로 컴퍼넌트를 나누고, 재사용되는 내용만 shared.. 

내용 자체는 굉장히 합리적이라고 생각이 들었으나, 아직 각각의 레이어에 해당하는 구체적인 예시를 추상화하는게 조금 어렵게 느껴진다.