마이크로 프론트엔드(Micro Frontends) 아키텍처 도입기와 Webpack Module Federation

프론트엔드 모놀리식 구조의 완전한 한계와 MSA의 필요성

웹 애플리케이션이 엔터프라이즈급 규모로 끝없이 성장함에 따라 단일 저장소(Monorepo) 내에서 모든 UI/UX 도메인을 관리하는 것은 컴파일 타임의 기하급수적인 증가와 배포 병목 현상이라는 치명적인 재앙을 야기했습니다. 과거 제가 리드했던 B2B SaaS 대시보드 프로젝트에서도, 단순히 결제 페이지의 버튼 색상 하나를 바꾸기 위해 전체 1.5GB에 달하는 거대한 모놀리식 웹팩 번들을 새로 빌드하고, 무관한 영상 스트리밍 팀의 유닛 테스트가 통과될 때까지 기다려야만 배포가 가능했던 끔찍한 오버헤드가 매일 반복되었습니다. 백엔드에서 일찍이 마이크로서비스 아키텍처(MSA)가 표준으로 자리 잡으며 데이터베이스와 도메인 로직을 철저하게 분리해 낸 것처럼, 프론트엔드 진영에서도 화면 단위, 혹은 도메인 기능 컨텍스트 단위로 번들을 파편화하여 서로 다른 팀이 서로 다른 프레임워크(React, Vue 등)를 자유롭게 섞어 사용하면서도 런타임에 하나의 유기적인 앱처럼 결합하는 '마이크로 프론트엔드(Micro Frontends)'가 각광받기 시작했습니다. 이는 릴리즈 사이클을 완벽히 격리함으로써 단일 장애점(SPOF)을 물리적으로 제거하고, 도메인 팀 간의 강결합 의존도를 끊어내는 극적인 애자일(Agile) 환경을 제공합니다.

Webpack 5 Module Federation의 마법과 런타임 동적 링킹

이전 1세대 마이크로 프론트엔드 시도는 끔찍했습니다. iframe을 남발하여 세션 컨텍스트를 잃어버리거나 런타임에 `window` 전역 객체에 무식하게 컴포넌트를 주입하고 `