Webpack 5 Module Federation을 통한 Micro-Frontend

모놀리식(Monolithic)이냐 마이크로(Micro) 서비스냐 하는 애플리케이션 아키텍처 스타일은 팀의 컨벤션과 애플리케이션의 요구 사항에 따라 달라진다. 그럼에도 마이크로서비스 아키텍처가 대세로 떠오르고, 사용이 증가하고 있는데 그 이유가 무엇일까?

모놀리식 아키텍처는 하나의 패키지안에 여러 서비스(기능)가 포함된 구조를 말한다. 대부분의 개발자가 모놀리식 아키텍처에서 작업을 시작하곤 하지만, 이러한 구조에는 몇 가지 문제점이 있다.

1. 특정 피쳐에 버그 발생 시 다른 피쳐에도 문제가 발생할 수 있다.

2. 서로 의존하고 있는 피쳐들 사이에 발생한 문제의 원인이 어디에 있는지 파악하기 힘들 수 있다.

3. 특정 피쳐가 수정되었을 때 다른 피쳐에서 문제가 발생할 수 있다.

1. 조그마한 수정 사항에도 전체를 빌드하고 배포해야 한다.

2. 여러 개발자가 개발한 여러 피쳐를 하나로 합치면서 많은 충돌이 발생할 수 있다.

1. 각 기능(서비스)에 독립성을 부여하기 힘들고, 다른 기술을 사용하기 어렵다.

이러한 문제들을 해결하기위해 마이크로 서비스 아키텍처가 등장했다.

마이크로 서비스 아키텍처는 여러 서비스(기능)들을 하나의 전체 애플리케이션으로 구성하는 아키텍처이다.

여기서 잘게 쪼개진 기능들은 독립적인 개발 및 배포를 가능하게 한다.

마이크로 서비스 아키텍처를 프론트엔드에서 운용하는 것을 마이크로 프론트엔드라고 부르는데, 프론트엔드에서 마이크로 서비스 아키텍처를 어떻게 구현할 수 있는지 알아보자.

마이크로 프론트엔드를 구현할 수 있는 방법은 여러 가지가 있다.

하지만 webpack5의 Module Federation을 이용하면 단순 웹팩 설정만으로 모듈 간 통합이 가능하다.

Module Federation은 분리된 여러 애플리케이션들을 하나의 애플리케이션으로 구성할 수 있는 기능이다.

이에 따라 런타임에 통합된 각 애플리케이션들은 서로 logic, assets, state을 공유하고, 다른 애플리케이션의 있는 코드를 동적으로 실행시킬 수 있다.

https://www.youtube.com/watch?v=0Eq6evGKJ68&t=1743s

이벤트 버블링(Event bubbling) (0)	2022.04.14

재모장