Micro Frontends (MFE)

개요

Micro Frontends(MFE)는 단일 대규모 프론트엔드 애플리케이션을 여러 개의 작고 독립적인 애플리케이션으로 분리하여 개발, 배포, 유지보수를 용이하게 하는 아키텍처 패턴이다. 이는 백엔드의 마이크로서비스(Microservices) 개념을 프론트엔드 영역에 적용한 것으로, 대규모 조직의 협업과 기능 확장을 효율적으로 지원한다.

---

1. 개념 및 정의

항목내용비교

개념	프론트엔드를 여러 개의 독립된 모듈(Micro App)로 구성	Monolithic 구조의 반대
목적	독립적 배포, 팀 단위 개발, 유지보수 효율성 향상	CI/CD 자동화와 잘 결합
필요성	프론트엔드 규모 증가로 인한 복잡성 관리 필요	대규모 SPA 관리 한계

---

2. 특징

특징	설명	비교
독립 배포성	각 MFE는 자체적으로 빌드 및 배포 가능	Monolith는 전체 빌드 필요
기술 스택 다양성	팀별로 React, Vue, Angular 등 선택 가능	기술 종속성 제거
느슨한 결합	공통 통신 규약을 통해 연동	모듈 간 충돌 최소화

---

3. 구성 요소

구성 요소	설명	예시
Shell / Container App	각 Micro App을 통합하는 루트 애플리케이션	Webpack Module Federation, Single-SPA
Micro App	독립적으로 개발·배포되는 기능 단위 앱	Header, Dashboard, Chat 등
Shared Library	공통 UI 컴포넌트 및 유틸리티 관리	Design System, Auth Library

---

4. 기술 요소

기술	설명	예시
Module Federation	Webpack5 기능으로 런타임 모듈 공유	RemoteEntry, Exposes
Single-SPA	여러 프레임워크를 단일 앱으로 통합	React + Vue 혼합 가능
Nx / Turborepo	모노레포 관리 도구	팀 단위 개발 효율화
Web Components	프레임워크 독립적인 UI 구성	Custom Elements 활용

---

5. 장점 및 이점

구분	설명	예시
독립적 배포	기능 단위로 배포 주기 단축	CI/CD 최적화
기술 유연성	팀별로 다른 프레임워크 사용 가능	React + Vue 조합
스케일링 용이성	특정 기능만 독립 확장 가능	대규모 트래픽 대응
장애 격리	특정 모듈 장애 시 전체 영향 최소화	독립 프로세스 구조

---

6. 주요 활용 사례 및 고려사항

활용 사례	설명	고려사항
전자상거래 플랫폼	결제, 상품, 주문 모듈을 분리 개발	통합 UI/UX 유지 필요
대기업 포털 시스템	부서별 앱 독립 배포	공통 인증 및 라우팅 관리
SaaS 플랫폼	기능별 구독 서비스 분리	모듈 간 버전 호환성

---

7. 결론

Micro Frontends는 대규모 프론트엔드 애플리케이션을 팀 단위로 나누어 개발 효율성과 유지보수성을 향상시키는 혁신적 구조이다. 독립적 배포와 다양한 기술 스택의 조합이 가능하여, 빠르게 변화하는 웹 환경에서 유연하고 안정적인 서비스 확장을 실현할 수 있다.