마이크로 프론트엔드

모놀리식 프론트엔드의 문제:
- 코드베이스 커지면 빌드/배포 시간 증가
- 팀 간 코드 충돌 빈번
- 기술 스택 변경이 어려움 (전체 교체 필요)
- 한 팀의 장애가 전체에 영향

마이크로 프론트엔드로 해결:
- 팀별 독립 배포
- 기술 스택 자유 (Vue, React 혼용 가능)
- 장애 격리
- 점진적 마이그레이션 가능

// vite.config.ts — host (shell) 앱
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: 'host',
      remotes: {
        // 원격 앱에서 컴포넌트를 가져옴
        productApp: 'http://localhost:3001/assets/remoteEntry.js',
        cartApp: 'http://localhost:3002/assets/remoteEntry.js'
      },
      shared: ['vue', 'pinia']  // 공유 의존성
    })
  ]
})

// vite.config.ts — remote (상품) 앱
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: 'productApp',
      filename: 'remoteEntry.js',
      exposes: {
        // 외부에 공개할 컴포넌트
        './ProductList': './src/components/ProductList.vue',
        './ProductDetail': './src/components/ProductDetail.vue'
      },
      shared: ['vue', 'pinia']
    })
  ]
})

<!-- host 앱에서 원격 컴포넌트 사용 -->
<script setup lang="ts">
import { defineAsyncComponent } from 'vue'

const RemoteProductList = defineAsyncComponent(() =>
  import('productApp/ProductList')
)
</script>

<template>
  <RemoteProductList @select="handleSelect" />
</template>

// Vue 컴포넌트를 Web Component로 변환
import { defineCustomElement } from 'vue'
import ProductCard from './ProductCard.vue'

const ProductCardElement = defineCustomElement(ProductCard)
customElements.define('product-card', ProductCardElement)

// 어떤 프레임워크에서든 사용 가능
// <product-card title="상품명" price="10000"></product-card>

<template>
  <!-- 가장 단순하지만 제한적 -->
  <iframe src="http://product-app.example.com" />
</template>

// 1. Custom Events (느슨한 결합)
// 앱 A에서 이벤트 발행
window.dispatchEvent(new CustomEvent('cart:add', {
  detail: { productId: 123, quantity: 1 }
}))

// 앱 B에서 이벤트 수신
window.addEventListener('cart:add', (e: CustomEvent) => {
  console.log('상품 추가:', e.detail)
})

// 2. 공유 상태 (localStorage + BroadcastChannel)
const channel = new BroadcastChannel('app-state')
channel.postMessage({ type: 'USER_LOGIN', payload: user })
channel.onmessage = (event) => {
  console.log('상태 변경:', event.data)
}

도입이 적합한 경우:
✓ 10명 이상의 프론트엔드 개발자
✓ 독립적인 제품 팀 (팀별 배포 주기가 다름)
✓ 레거시 마이그레이션 (점진적 전환)

도입이 부적합한 경우:
✗ 소규모 팀 (1-5명)
✗ 단일 제품, 단일 팀
✗ 초기 스타트업 (오버엔지니어링)