마이크로 프런트엔드 아키텍처가 무엇이고 도입했을 때의 장점과 단점을 설명할 수 있나요?

Question

Accepted Answer

마이크로 프론트엔드(MFE)는 **마이크로서비스 개념을 프론트엔드에 적용해, 하나의 웹 애플리케이션을 독립적으로 개발·배포 가능한 여러 조각으로 나누는 아키텍처**입니다.

```
[Shell / Host]
 ├─ 검색 팀   → search-app   (React)
 ├─ 상품 팀   → catalog-app  (React)
 ├─ 결제 팀   → checkout-app (Vue)
 └─ 계정 팀   → account-app
```

핵심 원칙은 **"팀 단위의 독립 배포"**입니다. 기술적 분할이 아니라 **조직 구조(Conway의 법칙)에 코드를 맞추는 것**이 목적입니다.

## 구현 방식

| 방식 | 설명 | 특징 |
| --- | --- | --- |
| **Module Federation** (Webpack 5 / Rspack) | 런타임에 다른 앱의 모듈을 동적 로드 | 가장 널리 쓰임. 의존성 공유 가능 |
| **iframe** | 완전 격리 | 가장 단순·안전하

디자인패턴

01마이크로 프런트엔드 아키텍처가 무엇이고 도입했을 때의 장점과 단점을 설명할 수 있나요?어려움아키텍처