목록 보기
react-native 에 모듈 페더레이션 더하기 (with. RePack)
프론트엔드

react-native 에 모듈 페더레이션 더하기 (with. RePack)

직방
직방
2023년 10월 26일

두줄요약

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 등 원격 저장소에 업로드

다음 읽기

#React Native 주제를 다룬 다른 회사 글

토스가 꿈꾸는 React Native 기술의 미래

토스가 React Native를 선택한 이유와 현재 운영 방식을 소개했습니다. 마이크로 프론트엔드, ESBuild, 번들 분리로 사용자 경험과 개발 생산성을 함께 높이고자 했습니다.

토스
토스
프론트엔드

댓글 0

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...