
프론트엔드
react-native 에 모듈 페더레이션 더하기 (with. RePack)
두줄요약
React Native에 모듈 페더레이션을 적용하기 위해 Re.Pack 구성과 host/remote 분리를 소개했습니다. 캐싱과 배포 전략, 번들 생성 및 원격 로딩 방식도 함께 설명했습니다.
핵심 내용
- React Native 앱에 모듈 페더레이션을 적용하기 위해 Re.Pack 사용
- host와 app1, app2를 monorepo로 분리하고 remote 모듈을 동적으로 로드하는 구성
- OTA 업데이트, 유연한 배포 제어, 심사 없는 코드 수정, 모듈 단위 개발·배포의 장점 정리
- 캐싱, invalidateScripts, URL 변경, CloudFront invalidation으로 remote 모듈 갱신 관리
적용해볼 점
- host에서 Federated.importModule과 Suspense, ErrorBoundary로 remote 로딩 처리
- 각 컨테이너의 ModuleFederationPlugin expose 설정과 ScriptManager resolver 구성
- webpack-bundle로 host 및 remote 번들 생성 후 S3 등 원격 저장소에 업로드