Webpack 의존성 탈피, Module Federation 2.0의 범용적 마이크로 프런트엔드 설계

Context

Webpack 5 전용 구조로 인한 다른 번들러 도입 제약. 원격 모듈 소비 시 TypeScript 정적 타입 정보 소실 문제. 프런트엔드 중심 설계로 인한 서버 사이드 런타임 활용 한계.

Technical Solution

• 번들러와 런타임 레이어를 완전히 분리하여 Webpack, Rspack, Vite, Rollup 등 다양한 도구 체인 지원
• 원격 모듈의 타입을 개발 단계에서 자동으로 생성 및 로드하는 Dynamic Type Hints 기능 도입
• Node.js 런타임 지원 확장을 통해 SSR 레이어 및 Backend-for-Frontend 서비스 내 모듈 공유 구조 실현
• mf-manifest.json 프로토콜 정의로 독립적으로 배포된 애플리케이션 간 버전 및 리소스 관리 체계 표준화
• Side Effect Scanner CLI 도구 제공으로 전역 변수 오염 및 CSS 스코프 영향도 사전 분석
• @module-federation/enhanced 패키지를 통한 기존 1.x 버전의 점진적 마이그레이션 경로 제공

Key Takeaway

특정 빌드 도구에 종속되지 않는 런타임 추상화를 통해 기술 스택의 유연성을 확보하고, 타입 시스템의 자동화를 통해 분산 환경의 개발 경험을 중앙 집중식 모노레포 수준으로 끌어올린 설계 전략.