Micro Frontend
최근 마이크로 서비스라는 용어는 크고 복잡한 애플리케이션을 여러 개의 작고 독립적인 서비스로 분리하고 확장성, 복원력을 향상시키는 등 많은 과제를 해결함으로써 IT 업계에서 상당한 인기를 얻고 있습니다. 마이크로 서비스 개념을 기반으로 구축된 마이크로 프런트엔드는 이러한 복잡성을 해결하기 위한 솔루션으로 2016년에 등장했습니다. 애플리케이션이 성장함에 따라 애플리케이션이 더 커지고 무거워지며 새로운 기능을 유지하고 구현하기가 더 어려워지는 경향이 있으므로 더 쉬운 유지 관리를 위해 애플리케이션을 여러 독립 애플리케이션으로 분리하는 것이 점점 더 합리적입니다.
위와 같은 이슈를 해결하고자 많은 대형 IT업체들이 마이크로서비스에 대한 요구가 많아 지면서 해당 아키텍처로 서비스를 마이그레이션하고 해당 경험들을 개발 레퍼런스를 통해서 발표되고 있습니다. 해당 글에서는 마이크로 프론트엔드의 아키텍쳐와 동작과정 & 장단점등을 살펴보고 직접 구현한 샘플 프로젝트를 통해 어떤한 구조의 프로젝트 구조를 갖고, 동작하게 되는지 살펴 보려 합니다.
Micro Frontend 핵심요소
마이크로서비스와 마찬가지로 마이크로 프런트엔드의 독립적 배포 가능성이 핵심입니다. 이렇게 하면 특정 배포 범위가 줄어들고 결과적으로 관련 위험도 줄어듭니다. 프런트엔드 코드가 호스팅되는 방법이나 위치에 관계없이 각 마이크로 프런트엔드에는 프로덕션 단계까지 빌드, 테스트 및 배포하는 자체 지속적 전달 파이프라인이 있어야 합니다. 우리는 다른 코드베이스나 파이프라인의 현재 상태에 대해 거의 고려하지 않고 각 마이크로 프런트엔드를 배포할 수 있어야 합니다. 오래된 모놀리스가 고정, 수동, 분기별 릴리스 주기에 있는지, 아니면 옆 팀이 반쯤 완성되었거나 손상된 기능을 마스터 브랜치에 밀어 넣었는지 여부는 중요하지 않습니다. 특정 마이크로 프런트엔드가 프로덕션으로 전환될 준비가 되면 그렇게 할 수 있어야 하며, 결정은 이를 구축하고 유지 관리하는 팀에 달려 있어야 합니다.
주요 특징 및 장점
-
코드 공유와 재사용
서로 다른 프로젝트 간에 공통 모듈(예: 유틸리티, 컴포넌트 라이브러리 등)을 쉽게 공유하고 재사용할 수 있습니다. 이는 코드의 중복을 줄이고, 팀 간의 협업을 촉진합니다. -
독립적인 배포
각 마이크로 프론트엔드는 독립적으로 개발되고 배포될 수 있으며, 메인 애플리케이션이나 다른 마이크로 프론트엔드의 업데이트에 영향을 받지 않습니다. 이는 개발 속도를 높이고, 배포 과정에서 발생할 수 있는 의존성 문제를 최소화합니다. -
동적 로딩
필요할 때마다 모듈을 로딩할 수 있으므로, 애플리케이션의 초기 로딩 시간을 줄이고, 사용자 경험을 개선할 수 있습니다. -
유연한 통합
다른 버전의 라이브러리나 프레임워크를 사용하는 애플리케이션 간에도 모듈을 공유할 수 있습니다. 이는 기술 스택의 차이를 극복하고, 다양한 애플리케이션을 통합하는 데 유용합니다.
Micro Frontend 구현 방법
현재까지 알려진 마이크로 프론트엔드의 구현 방법으론 아래와 같은 방법들이 존재합니다.
-
서버 템플릿 통합
서버에서 각각 Request에 대한 Html 페이지를 찾고, 해당 페이지를 응답해 주는 방법 -
iframe을 활용한 통합
가장 전통적인 방식이며 구현방식이 가장 쉽다. 각 화면이 iframe에 종속되므로 상위 컨테이너들에 영향을 주지 않아 통합의 유연성이 높은 편이고 또한 iframe을 사용하기에 기술 종속성이 없습니다. 다만 iframe으로 구축할경우 라우팅, 히스토리관리가 어려워지며 컨테이너 어플리케이션과 각 iframe ( 마이크로 서비스 ) 간의 커뮤니케이션 규약 복잡도가 높아질수 밖에 없습니다. UI적으론 iframe에 갖혀있기때문에 충돌이 없지만 반대로 iframe에 갖혀 있어서 각 iframe 레이어간의 overlay가 발생한다면 위를 해결하기 위한 처리비용이 크게 발생합니다. -
빌드타임 통합
단위 어플리케이션으로 패키지를 배포하고, 빌드 시점에 컨테이너 어플리케이션에서 import 후 배포하는 방법. 그러나 빌드 타임에 컨테이너 어플리케이션에서 통합 빌드를 처리해야 하므로, 마이크로 프론트에서 해결하고자 하는 문제중 하나인 빌드 시간단축이 제대로 해결되지 않습니다. 또한 가장 중요한 마이크로 프론트엔드의 독립적인 배포가 처리되지 않고 항상 모든 마이크로 프론트의 어플리케이션들의 빌드를 거친 후 컨테이너 어플리케이션이 최종 빌드 후 배포되어야 하기에 적절하지 않습니다. -
Web Components를 통한 통합
HTML 커스텀 엘리먼트를 통한 통합방법 사용방법으로 런타임에 해당 파일들을 불러와 통합합니다. 다른 기술적인 종속 없이 브라우저가 제공하는 기술에 기반하는 장점이 있으나 아직 이를 쉽게 사용하게 해주는 툴은 없어 자체적인 프레임워크 설계하에 진행해야 합니다. -
Javascript를 통한 런타임 통합
가장 많이 사용하는 방식입니다. 많은 번들러 툴들 ( Webpack, Rollup, Vite.. )에 의해서 번들링된 스크립트 파일을 통해서 통합하는 방법입니다. 컨테이너 어플리케이션이 마이크로프론트 어플리케이션의 번들을
해당 글에서는 위의 방법중 5.Javascript를 통한 런타임 통합 방식을 기준으로 마이크로 프론트엔드 구현 방법과 동작 방법에 대해 살펴보겠습니다.
여러가지 방법이 존재하겠지만 현재 가장 많이 사용되고 있는 방법은 bundler를 통해서 런타입 통합 방법으로 많이 구축하고 있습니다. Webpack에서 생겨난 개념인 Module Federation을 통해서 런타임 통합을 위한 환경 설정이 가능합니다.
다음 글에서는 Module Federation에 대한 설명을 다루고, 이후 본격적인 Microfrontend 구축하는 방법에 대해 설명하겠습니다.
