Micro Frontend마이크로 프론트엔드

1. 기술 스택 독립성: 각 팀이 다른 프레임워크 선택 가능
2. 격리된 코드베이스: 런타임에만 통합
3. 독립 배포: 전체 재배포 없이 부분 업데이트
4. 팀 자율성: 엔드-투-엔드 기능 팀 구성

// host/webpack.config.js (Shell)
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    header: 'header@http://localhost:3001/remoteEntry.js',
    cart: 'cart@http://localhost:3002/remoteEntry.js',
  },
});

// header/webpack.config.js (Remote)
new ModuleFederationPlugin({
  name: 'header',
  filename: 'remoteEntry.js',
  exposes: {
    './Header': './src/Header',
  },
  shared: ['react', 'react-dom'],  // 공유 의존성
});

// host/App.tsx
const Header = lazy(() => import('header/Header'));

<!-- 단순하지만 성능 저하 -->
<iframe src="https://team-a.example.com/widget" />

// 각 팀이 웹 컴포넌트 배포
// <team-a-header>, <team-b-product-list>

// Custom Events로 MF 간 통신
// 발신 (cart MF)
window.dispatchEvent(new CustomEvent('cart:updated', {
  detail: { itemCount: 3 }
}));

// 수신 (header MF)
window.addEventListener('cart:updated', ({ detail }) => {
  setCartCount(detail.itemCount);
});