FSD 프론트앤드 개발을 위한 최적화된 디자인 패턴

들어가기

FSD 아키텍처가 무엇인지 아는가? Feature-Sliced Design의 줄임말로 애플리케이션을 Feature(기능) 단위로 조직화하여 관리하는 방법을 말한다. 끊임없이 변화하는 비즈니스 요구 사항에 맞서서 프로젝트를 더 이해하기 쉽고 체계적으로 만든다는 점에서 매우 흥미롭게 다가왔다. 개발은 변화에 민감하다. 각 기능들은 다른 기능들에 대해 격리되어 있어야 한다. 왜냐하면 하나의 변화로 인해서 다른 기능들이 고장 나는 경우가 너무 빈번했기 때문에. 어떻게 격리벽을 세워 코드를 안전하게 작성할 수 있을지에 대한 고민이 많았다. 그리고 유지보수와 확장성에도 좋은 코드를 작성하여 팀원분들에게도 좋은 코드리뷰를 하고 싶은 마음, 그러한 기준을 찾고 있었다. 클린 아키텍처, 실전주의 프로그래머 등 다양한 책을 읽으면서 개념에 대해서 이해는 했지만, 그 개념을 직접적으로 적용하기에는 어떻게 해야 할지 막막했다. 그러던 중에 발견한 FSD이다. 

 

 

FSD 아키텍처는 책에서 읽은 다양한 개념들을 집대성하여 완성한 아키텍처로 보였다. 아키텍처보다는 방법론 쪽에 가깝다는 생각이 들었다. 왜냐하면 어떻게 폴더를 배치하고, 각 폴더에는 어떤 파일들이 있어야 하는지를 꽤나 설명해 주기 때문이다. 

 

FSD의 매력 ① -  관심사의 분리 

 FSD의 가장 매력적인 부분은 바로 Layer를 명확하게 설명하고 있는 점이었다. Layered architecture를 아는가? 정말 흔한 아키텍처인데 중요한 특징으로는 레이어라는 개념으로 관심사를 분리하고 있다. 레이어드 아키텍처를 보면 FE 보다는 BE에 초점이 맞춰져 있다는 느낌을 받았다. (https://xxeol.tistory.com/26) 가장 중요한 건 왜 레이어드 아키텍처가 탄생했냐 이다. 그건 바로 관심사를 분리하기 위해서이다. FSD는 FE의 필요성에 맞게 Layer를 설명한다. 

1. app - 앱이 초기화되는 곳(진입점). provider, router, global style, global type
2. process - 여러 단계로 이루어진 페이지 처리
3. pages - 애플리케이션의 페이지. ( 로그인 페이지, 메인 페이지 등)
4. widgets - 페이지에 사용되는 독립적인 UI 컴포넌트 
5. features - 비즈니스, 시나리오, 기능 ( 좋아요, 리뷰, 제품 평가)
6. entities - 비즈니스 엔티티 (사용자, 리뷰, 댓글)
7. shared - 특정 비즈니스에 종속되지 않은 재사용 가능한 컴포넌트와 유틸리티 (ui 키트, axios)

레이어들의 특징 의존성에 대해서도 설명한다. 

출처 : https://dev.to/m_midas/feature-sliced-design-the-best-frontend-architecture-4noj

 

각 레이어들의 책임과 역할에 대해 개념적으로 FE에 이렇게 맞게끔 설명한 아키텍처는 처음으로 보인다. 
즉 App에서 SHARED를 가질 수 있지만, SHARED가 App을 가질 수는 없다는 의미이다. 각 계층을 관심사를 명확하게 구분 지어 놓았다.

FSD의 매력 ② -  Layer의 구성  

대부분 관심사들을 묶어 두는 것까지는 설명을 하지만, 어떻게 묶어야 하는지 대해 구체적으로 설명해 주는 경우는 많이 보지 못했다. 그러나 FSD의 경우에는 Layer는 어떻게 구성되어야 하는지까지 알려준다.  

 

• Layers -  앞서 설명한 데로  총 최대 7개로 이루어짐( app, pages, widgets, features, entities, shared) 
• slices - 특정 비즈니스의 Entities로 이루어짐(서비스별로 묶여있음)
• segments - ui, model, api 등 기술적인 목적에 따라 코드가 이루어짐(기능별로 묶여 있음)

각 레이어들에 대해 서비스들이 있고, 서비스들은 세그먼츠들로 이루어져 있게 된다. 

 

결론

• FSD는 FE 개발에 사용하기 적합한 디자인 패턴이다
• Layers들의 각 역할에 대해 이해하여 관심사분리가 되어야 한다
• Layer는 서비스별로 slices 되어있으며 slices는 기능별로 나뉜다.