Micro Frontend Architecture

2024-08-30, 권수연

마이크로 프론트앤드는 마이크로 서비스처럼 전체 화면을 작동할 수 있는 단위로 나누어 개발한 후 서로 조립하는 방식이다. 여기서 작동 단위에 사용된 프론트앤드 프레임워크로 Angular 이든, React 또는 Vue 또는 Vanilla 자바스크립트에 상관하지 않고 조합 가능한 방법을 제공한다.

→ 대규모 애플리케이션의 프론트엔드를 여러 개의 독립적인 마이크로 애플리케이션으로 분리하는 방식이다. 각 마이크로 애플리케이션은 독립적으로 개발, 배포될 수 있으며 다양한 기술 스택을 사용할 수 있다.

→ 애플리케이션을 여러 개의 재사용 가능한 컴포넌트로 분리하여 개발하는 방식이다. React, Angular, Vue.js와 같은 프레임워크에서 주로 사용되며, 각 컴포넌트는 독립적으로 관리되고, 조합되어 전체 애플리케이션을 구성한다.

→ 프론트엔드를 여러 모듈로 나누어, 모듈 단위로 개발하고 관리하는 방식이다. 각 모듈은 특정 기능을 담당하며, 전체 애플리케이션에 결합됩니다. 이러한 모듈들은 독립적으로 테스트되고, 배포될 수 있다.

→ 프론트엔드 애플리케이션을 하나의 코드베이스로 관리하며, 모든 기능이 이 코드베이스 안에 포함된다. 전통적인 웹 애플리케이션 방식으로, 규모가 커질수록 관리가 어려워질 수 있다.

독립된 배포 가능성 : 특정 부분만 수정 후 배포가 가능하다.
기술 독립성 : 독립적인 애플리케이션으로 다른 기술 스택, 개발 방식, 배포 방법을 자유롭게 선택할 수 있다.
유지보수와 확장성 : 독립적이기 때문에 유지보수가 용이하며, 애플리케이션의 특정 부분을 쉽게 확장할 수 있다. 새로운 기능을 추가하거나 수정할 때 전체 어플리케이션에 영향을 주지 않으므로 안정성이 높아진다.
통합 방법 : HTML 기반의 통합, Javascript에서 런타임에 통합, iframe을 통한 통합 등이 있으며, 상황에 따라 선택하면 된다.

→ 각 마이크로 프론트엔드는 별도의 url로 배포하거나 메인 애플리케이션에 포함될 수 있다. *Webpack Module Federation, *iframe 또는 Javascript 기반의 런타임 통합 방식을 사용하여 통합할 수 있다.

→ 이 구조는 대규모 대시보드 애플리케이션을 유연하게 확장하고 유지보수 하는 데에 유리하다. 자신의 영역을 독립적으로 개발하고 배포할 수 있어 생산성을 높이고, 특정 부분만 수정하여 배포할 수 있다는 장점이 있다.

참고