복잡한 비즈니스에서 중복 개발을 줄이기 위한 Module Federation Platform 구축 #우아콘2024 #우아한형제들

Module Federation을 독립 배포한 module을 browser runtime에서 동적으로 load해 하나의 product로 통합하는 기술이자 micro-frontend 구현 수단으로 정의하고 host·remote·shared dependency 관계를 설명한다. GNB·sidebar·content를 나누고 각 team의 content build를 S3에 올려 menu JSON으로 연결해 통일된 UX와 독립 업무를 얻었지만, remote 등록 때마다 host 재배포, 불안정한 TypeScript 지원, host와 remote를 함께 띄워야 하는 test, 5천 줄이 넘는 remote entry 문제가 남았다.

Webpack과 강하게 결합했던 구현을 federation runtime과 container·application으로 분리하고 runtime API와 lifecycle plugin을 제공해 여러 bundler에서 module 등록·조회·조작을 확장할 수 있게 한다. 선언형 JSON manifest가 큰 JavaScript remote entry의 load 비용과 환경 활용성을 개선하고, production remote의 d.ts를 개발 환경에 자동 갱신하는 dynamic type hint가 type safety를 복원한다. Global federation object와 browser extension은 module·shared dependency·instance 관계를 시각화하고 remote를 local로 proxy한다.

MF 2.0이 host 의존·type·entry format 문제를 줄여도 remote별 host clone과 server 실행, 공통 code 중복, runtime remote의 등록 이후 관리 문제는 남는다. Module 수와 사용처가 늘수록 source를 직접 뒤져 dependency·version·운영 위치를 찾아야 하므로, federation과 module metadata를 중앙 database에 저장하고 MF admin·host·remote가 API로 조회·수정하는 Module Federation Platform을 설계해 관계를 명시적으로 관리한다.

공통 bundler 설정, runtime plugin, utility와 React component를 Exodia library로 중앙화하고, application load 전에 API에서 remote 정보를 가져오는 lifecycle plugin으로 host 재배포 없이 admin에서 remote를 추가·versioning하는 remote control을 구현한다. 개발자는 virtual host에서 remote path와 인증 방식을 선택해 server를 반복 종료하거나 여러 repository를 준비하지 않고 local module을 실제 host 맥락에서 시험하며, platform이 host·remote 관계와 runtime 구성을 일관되게 제공한다.