Skip to main content

리서치 해야 할 것

질문사항

  • App간의 커뮤니케이션?
  • App간의 상태 공유?
  • React,Vue 등 프레임워크 상관없이 적용?
  • SSR단계에서 사용 가능한 컨셉인가?
  • 반드시 S3 Budket에 올려야 하는가?

App간의 커뮤니케이션

  • Custom Event, Custom Message Bus

App간의 상태 공유

  • 정말 필요한가? Redux, Recoil등?
  • Storage로 공유.

마이크로 프론트엔드 개념

  • 외부의 컴포넌트 import 한다.
  • import ComponentA from 'src/components/ComponentA'
  • import ComponentA from 'https://bucket.com/components/ComponentA/main.js'
  • expose option : 특정 모듈을 다른 애플리케이션에 노출.
  • remote option : 특정 모듈을 다른 애플리케이션에서 로드.

얻는 이점

  • 재사용성 : 확장성
  • 유지보수 : 협업
  • 테스트 : 유연성

===

문서에서 중요 포인트​

⚠️ shared module에 대한 관리

  • react, react-dom 등 공용으로 사용 가능하고 번들용량이 큰 경우 shared module로 취급해볼 수 있다.
  • host, remote 중 shared module은 보통 host가 제공 한다. ( remote가 제공하는것도 가능 ).
  • multi host app에서는 서로 다른 React 버전이 공존 한다.
  • host react 16, 17에 맞게 remote app은 16버전(가장 낮은)으로 작성될 필요가 있다.
  • 다른 전략은, 서로 다른 React 인스턴스 공존 하게 만드는 것이다. (shared 모듈이 아님)

⚠️ remoteEntry.js는 짧은 캐시 또는 no-cache

⚠️ 런타임 장애가 UI로 전파될 수 있음

  • Error Boundary 적용
  • 로딩 fallback UI 제공
  • remote 로드 실패 시 대체 화면 설계
  • 모니터링 및 알림 체계 구축
  • 재시도 전략 또는 graceful degradation 설계

⚠️ 개발 환경

⚠️ 운영 환경

  • Host App, remote App : 모두 end point에서 정적 자산을 가져올 수 있어야 한다.
    1. 가장 흔한 선택지 : S3 + CDN에서 remote app을 불러온다.
    • remote app을 배포하면 remoteEntry.js 자산을 덮어써야 한다. (SOT)
    1. BFF에서 정적 파일 서빙하기 : API와의 조합 커플링을 위해서 사용한다.
    1. 하이브리드 : 서버/BFF가 최신 remoteEntry URL을 내려줌
    • S3에 올라간 이전 버전의 정적 자산들을 여전히 참조 가능함.
  • 3번 방식을 선택하는 이유 : Remote App + BFF는 강하게 커플링 되어 있다.

⚠️ Module Federation 버전 통일

  • 특히 multi host면 사실상 통일 권장
    • webpack 버전
    • Module Federation runtime/plugin 버전
    • @originjs/vite-plugin-federation

⚠️ 공유 상태: 다국어, 인증상태 처리 방식

  • locale, timezone, currency 같은 최소 컨텍스트만 host가 제공
  • props 방식

host가 인증 담당

  • authChanged, logout, tokenExpired 같은 이벤트를 브로드캐스트
  • 리모트가 이벤트 계약을 구독해서 처리하는 방식

⚠️ Remote app의 typescript interface

  • Module Federation은 런타임 모듈 로딩을 해결, TypeScript interface까지 자연스럽게 공유해주지는 않는다.
  • 1, declare module. : 정말로 최소한만 공용 props interface 만들기 ( locale, timezone, currency 등.. )
  • 2, @company/mf-contracts 같은 패키지에 타입 선언.
  • 3, federation용 타입 생성/다운로드 도구 만들기.

🤚 SSR 단계에서 서버가 federation remote를 로드해서 렌더링 가능?
가능.

  • 서버 렌더링 시점에도 remote 컨테이너를 로드하고 초기화해야 함
  • 서버와 클라이언트가 같은 shared 버전과 렌더 결과를 맞춰야 함
  • hydration mismatch를 피해야 함
  • remote 장애가 SSR 응답 지연이나 실패로 바로 이어질 수 있음
  • 언제 적합한가: SEO, 초기 렌더 성능, 서버 조합 렌더링이 중요할 때