들어가며
작년 11월, 은사님의 도움으로 우아한테크컨퍼런스(우테코)에 참여할 기회를 얻었었다.
당시 3개월차 새싹 프론트엔드 개발자었던 나는 모든 프론트엔드 세션에 착 붙어 개발 선배들의 이야기를 귀담아 들었다.
그 중 가장 기억에 남는 세션은 바로 '프론트엔드 개발의 미래, Module Federation 적용하기' 세션이었다.
매우 흥미로운 주제였고, 프론트엔드 설계에 대한 인사이트를 얻는 기회였다.
하지만 당시 나에게는 너무도 먼 이야기 같았다.
취준 기간 동안 해온 서너개의 작은 팀프로젝트, 그리고 회사에서 맡았던 작은 프로젝트 하나가 경험의 전부였기에 여러 모듈을 만들어 각자 배포하고, 하나의 앱으로 보여줄 일이 없었기 때문이다.
하지만 바로 적용이라도 해보란 듯이, 하나의 큰 앱 안에서 여러 앱들을 렌더링하는 구조의 대형 프로젝트를 맡게 되었다.
이 과정에서 다양한 구조를 설계해보았고 Module Federation를 적용하자는 목소리를 내볼 수 있었다.
그래서, Module Federation이 뭔데?
서버를 구축하는 Backend 개발자들은 이미 해당 개념에 익숙할 것이다.
구조와 설계가 복잡해짐에 따라 모놀리식(Monolithic) 아키텍쳐의 한계를 극복하기 위해 MSA(Micro Service Architecture) 가 등장했고,
다음과 같은 장점들을 획득할 수 있었다.
- 각 서비스가 모듈화되어, 개별 서비스의 개발 및 유지보수를 빠르게 진행할 수 있다.
- 각 서비스(모듈)별 최적화된 기술 스택을 선정할 수 있다.
- 각 서비스(모듈)별 독립적으로 배포할 수 있다.
마찬가지로 프론트엔드 챕터 또한 점차 복잡해지고 비대해져가는 서비스에 대한 개발/유지보수의 어려움을 겪고 있다.
이를 해결하기 위해 Micro-Frontends 개념이 등장하였고, 이를 구현하는 방법 중 하나가 바로 Webpack5의 Module Federation 기능이다.
참고 : Webpack 공식문서
Module Federation은 2020년 10월 Webpack에 적용된 기술로,
단일 Webpack 빌드에 포함된 모듈뿐만 아니라 여러 서버에 배포되어 있는 원격 모듈을 런타임에 하나의 애플리케이션에서 로딩할 수 있는 기능이다.
해당 기능을 통해 MSA와 마찬가지로 개발 및 유지보수의 용이성, 하나의 프레임워크에 종속되지 않는 유연한 개발 환경, 그리고 배포 시간 단축 및 디펜던시 최소화 등과 같은 효과를 얻을 수 있다.
Module Federation 용어 정리하기
- Host: 원격 모듈을 불러오는 애플리케이션.
- Local Module: 로컬 모듈은 현재 빌드의 일부, 일반적인 모듈.
- Remote Module: 원격 모듈은 현재 빌드의 일부가 아닌, 원격 컨테이너에서 런타임에 로드되는 모듈.
- Exposes: 원격 모듈로 공개할 부분을 지정. 공개된 부분만 Host가 불러와 사용할 수 있음.
- Container: 특정 모듈에 대한 비동기 접근을 노출하는 엔트리를 통해 생성됨. 컨테이너는 다른 컨테이너의 모듈을 사용할 수 있으며, 중첩 및 순환 의존성도 가능함.
대략적인 구조는 다음과 같다.
또한 다음과 같은 특징을 가지고 있다.
- 양방향 Import 가능 (A 컨테이너는 B 컨테이너의 원격 모듈을 로딩할 수 있으며 B에서 A 방향으로도 로딩할 수 있음)
- Dynamic Import 가능(웹 최적화에 사용되는 Code Splitting과 같이 리소스를 적게 소모함)
다음은 예시 코드를 살펴보며 간단한 기능을 구현해보겠습니다.
