Micro frontends - Integration의 3가지 종류

예를 들어 Container가 있고, 그 안에 Cart service, Products service들이 있다고 해보자.

 

1. Build-Time Integration 빌드타임 통합 (컴파일타임 통합)

: 컨테이너가 브라우저에 로드되기 전에 다른 프론트서비스들의 코드에 접근할 수 있다.

예) Cart 를 npm package로 배포함 (어딘가에 저장되어있음) → Container  팀이 Cart 패키지를 dependency로 설치함 → Container 팀이 앱을 빌드함  → 번들 결과물은 모든 코드를 포함함 

 

장점 : 셋업이 쉽고, 이해하기 쉬움

단점 : Cart 가 업데이트 될 때마다 Container는 재 배포 해야함.

         Container와 Cart가 넘 결합되어있음

 

2. Run-Time Integration 런타임 통합 (클라이언트 사이드)

: 컨테이너가 브라우저에 로드된 후에 다른 프론트서비스들의 코드에 접근할 수 있다.

예) 우리 웹사이트가 my-app.com 이라면 my-app.com/cart.js 과 같은 특정 url에 번들로 배포함.  → 유저는  my-app.com 에 방문하고 그러면 Container 앱이 로드됨. →  Container 앱은 cart.js 를 fetch 하여 실행시킴

 

장점: Container를 재배포할 필요 없이 Cart 는 언제든 독립적으로 배포할 수 있다. -> flexible함. 현재 가장 괜찮은 ? 방법임

         여러가지 Cart 버전을 배포하여 AB테스트 등을 할 수 있다.

단점 : 엄청 복잡함

 

-> Webpack Module Federation 을 이용!

3. Server Integration 서버 통합