2023.08.17~

왜 Micro Frontend를 구축해야하나

입사 때만 해도 빌드 시간이 6~8분 이였는데, 약 1년이 지난 이 시점에 빌드 시간은 12분+ 가 되어버렸다.

기능은 계속 생겨날 것이고 언제까지 코드를 계속 덧붙여 빌드 시간을 늘릴 순 없기에 이제는 Micro Frontend를 구축해야만 한다.

장점은 다음과 같다.

• 코드 간의(플랫폼 간의) 의존도를 낮춰 사이드 이펙트를 최대한 제거할 수 있다. (Curate가 추가되면서 url이 바뀌고 Label쪽에 에러가 많이 났었음)
• 빌드 시간을 단축시킨다. (실제로 버그가 나서 핫픽스로 빠르게 고친다해도 CI에서 15분 CD에서 15분 정도 걸린다.)
• 리프레시 토큰을 로컬 스토리지에 저장하고 있는데 기존 서브 도메인 기반으로 따로 배포하는 방식이 아닌 Path 기반으로 라우팅하여 로컬 스토리지를 공유하고, 로컬 스토리지를 공유하여 여러 플랫폼 간 인증정보를 공유할 수 있다.

등등이 있다.

어떻게 구축할건가

일단 Webpack5의 Module Federation과 Next JS를 사용하여 구현할 것이다.

Module Federation을 사용하는 이유는 다음과 같다.

• Module Federation을 사용하면 하나의 런타임 환경에서 여러 플랫폼이 섞일 수 있기에 플랫폼간 Context Provider 공유가 가능해짐. (인증 관련 상태를 비롯한 여러 상태를 공유하며 캐시와 비슷한 효과를 기대)
• 빌드 시간을 단축시키기 위해선 무거운 패키지에 종속된 Annotation App을 아예 따로 빌드할 수 있어야 함. 때문에 Module Federation을 이용해 Annotation App을 아예 분리하여 빌드 및 배포하고 Suite Hub 쪽에서 가져오면 됨.

현재 Sahara를 다음과 같이 쪼갤것이다.

• Monorepo
  • SuiteHub
  • Label
  • Curate
  • Model
  • AnnotationApp

UI로 표현하면 아래 사진과 같다

• Module Federation을 사용하여 Label, Curate, Model, AnnotationApp을 컴포넌트 형태로 불러올 수 있게 분리한다.