Webpack Module Federation: 런타임 통합 원리와 마이크로 프런트엔드 적용

Module Federation의 개념과 필요성

Webpack 5의 Module Federation은 여러 애플리케이션을 개별적으로 빌드한 후 런타임에 하나의 애플리케이션처럼 통합하는 기능이다. 기존 마이크로 프런트엔드 방식이 모노레포 기반의 빌드타임 통합에 의존했던 것과 달리, 이 기능은 독립적인 빌드 산출물을 서로 연결할 수 있게 한다.

이 기술은 서비스 규모가 커질 때 다음과 같은 이점을 제공한다:

• 빌드 및 배포 시간 단축: 변경된 컨테이너만 빌드하므로 전체 빌드 부담이 줄어든다.
• 영향도 최소화: 검증 범위를 변경된 컨테이너로 한정할 수 있다.
• 로딩 효율성: 배포된 컨테이너의 원격 모듈만 새로 로딩하므로 배포 직후 로딩 시간이 짧다.

핵심 용어와 동작 원리

Module Federation은 컨테이너(Container) 단위로 애플리케이션을 정의하며, 각 컨테이너는 다른 컨테이너의 **원격 모듈(Remote Module)**을 로딩하거나 **노출(Expose)**할 수 있다.

• 리모트 앱: 모듈을 Expose하는 컨테이너
• 호스트 앱: 원격 모듈을 사용하는 컨테이너
• 공유 모듈(Shared): 런타임에 한 번만 로딩되는 의존성 (예: React)

동작 과정:

1. 리모트 앱은 remoteEntry.js 파일을 생성하여 모듈 맵을 제공한다.
2. 호스트 앱은 remoteEntry.js를 로딩하여 전역 변수(예: app2)를 설정한다.
3. 호스트 앱은 import("app2/Button")과 같은 방식으로 원격 모듈을 동적으로 로딩한다.

주의사항 및 한계

실제 도입 시 다음과 같은 제약이 존재한다:

• 타입 정보 부재: 호스트 앱은 리모트 모듈의 타입을 자동으로 인식하지 못하므로, 타입 정의를 별도로 관리해야 한다.
• 경로 관리 복잡성: 환경별(개발, 운영 등)로 remoteEntry.js의 URL이 달라지므로, 빌드 시점이나 런타임에 적절한 경로 설정 로직이 필요하다.