피드로 돌아가기
Dev.toFrontend
원문 읽기
28만 라인 Monolith 탈피를 위한 Module Federation 기반 Runtime 통합 설계
Micro-Frontend Architecture: How to Split a Monolith Without Losing Your Mind
AI 요약
Context
280,000라인 규모의 React Monolith 구조로 인한 테스트 실행 시간 4분 소요 및 배포 병목 현상 발생. 팀 간 강한 결합도로 인해 단순 UI 수정에도 다수 팀의 협업과 재배포가 강제되는 구조적 한계 직면.
Technical Solution
- 독립적 배포 및 팀 자율성 확보를 위해 UI를 도메인 단위의 MFE(Micro-Frontend)로 분리한 Shell 구조 설계
- Build-time 통합의 배포 종속성 문제를 해결하기 위해 Webpack 5의 Module Federation을 통한 Runtime 통합 채택
- RemoteEntry.js를 활용하여 Shell 재배포 없이 CDN 기반으로 개별 MFE 업데이트가 가능한 동적 로딩 메커니즘 구현
- React Context 및 Hook의 오동작 방지를 위해 shared 설정을 통한 React/React-dom의 Singleton 인스턴스 강제
- MFE 간 직접적인 의존성 전파를 차단하고 느슨한 결합을 유지하기 위해 Event Bus 기반의 통신 계약 정의
실천 포인트
- Module Federation 도입 시 singleton: true 설정을 통해 중복 라이브러리 로드 방지 - MFE 간 직접 import를 금지하고 Event Bus를 통한 간접 통신 구조 설계 - 디자인 시스템의 버전 관리 및 CI 단계에서의 Bundle Size Budget 설정 - 아키텍처의 유행보다 팀 규모와 배포 병목이라는 실질적 문제 해결 여부를 우선 검토