마이크로 프론트엔드 구현을 위한, 웹팩 5의 모듈 페더레이션

웹팩5의 모듈 페더레이션(Module Federation)은 마이크로프론트엔드 아키텍처(Micro Frontend Architecture, MFA)를 구현하기 위한 기술입니다. MFA는 대규모 웹 애플리케이션을 독립적으로 개발, 배포 및 유지관리가 가능한 작은 단위의 마이크로 서비스로 분할하는 것을 말하는데요. 이를 위해서는 각 서비스의 지속적인 통합 및 배포(CI/CD)와 함께, 분할된 서비스들을 하나의 웹 페이지로 원활하게 통합하는 과정이 필요합니다.

이런 통합은 과거에는 iframe 등의 방식을 사용했었는데요. 모듈 페더레이션은 자바스크립트 런타임 레벨에서 통합을 가능하게 합니다. 이는 각 애플리케이션이 런타임에 서로의 코드를 공유하고 동적으로 로드할 수 있게 해주는데요.

런타임 통합이 중요한이유는, 배포된 코드의 변경 사항이 실시간으로 반영된다는 점입니다. 빌드 타임에 통합할 경우, 한 모듈의 수정이 이를 사용하는 모든 애플리케이션의 재빌드와 재배포를 유발하므로 독립적인 배포의 이점이 사라지게 됩니다. 반면, 런타임 통합을 통해 A 애플리케이션의 모듈 업데이트가 이를 사용하는 B 애플리케이션에 실시간으로 반영될 수 있습니다. 이는 각 서비스의 개별적인 배포와 동적 로딩을 가능하게 해주는데요.

모듈 페더레이션은 호스트(Host)와 리모트(Remote)의 개념을 이용해 양방향 모듈 공유가 가능해, 각 애플리케이션은 호스트와 리모트의 역할을 동시에 수행할 수 있습니다. 이를 통해 개별적으로 빌드된 여러 개의 애플리케이션이 런타임에 통합되어 하나의 애플리케이션으로 동작할 수 있게 됩니다.

웹팩5는 현재 모듈 페더레이션 기능을 기본적으로 내장하고 있는 유일한 빌드 도구입니다. Vite와 같은 다른 도구에서는 별도의 플러그인을 설치해야 이 기능을 사용할 수 있습니다.

규모가 큰 애플리케이션에서 여러 팀이 독립적으로 개발되고 배포할 수 있는 프론트엔드 앱을 구축할 때 웹팩의 모듈 페더레이션의 도입을 추천드립니다. 각 팀이 개발한 앱은 런타임에서 동적으로 로드하고 통합할 수 있어 각 팀이 서로의 작업에 미치는 영향을 최소화 하면서 협업이 가능합니다.

https://webpack.kr/concepts/module-federation/