본문 바로가기

프로젝트/Module Federation

(4)
리액트 네이티브 앱을 재시작하지 않고 일부분만 업데이트해 보자 (2. 코드 설명) 이전 편에서 소개한 dynamic-module-federation-example 프로젝트는 네비게이션을 제외하면 직접 제작한 react-native-dynamic-module-federation 라이브러리를 사용하는 코드밖에 없습니다. dynamic-module-federation-example/modules/react-native-dynamic-module-federation at main · JoonDong2/dynamic-module-federation-Contribute to JoonDong2/dynamic-module-federation-example development by creating an account on GitHub.github.com 따라서 react-native-dynamic-..
리액트 네이티브 앱을 재시작하지 않고 일부분만 업데이트해 보자 (1. 프로젝트 소개) 목차요약최종 결과물소스코드 및 재현 방법테스트 환경문제 인식5-1. 업데이트=재시작5-2. 재시작이 필요한 업데이트의 문제점  5-2-1. 근본적인 문제  5-2-2. 기존 상태 소실해결 방법6-1. Module Federation 도입6-2. Module Federation 변조프로젝트 구조사용예마치며1. 요약리액트 네이티브 앱을 재실행없이, 앱 사용중(스크린 스택 등 기존 상태 유지)에 부분 업데이트할 수 있는 방법을 소개합니다. 마치 헐크 버스터가 "싸움 도중에" 신체의 일부를 교체하는 것 처럼요. 2. 최종 결과물host 앱과 number 앱을 독립적으로 실행number 앱을 로컬에서 변경하고 확인number 앱을 번들링하여 배포 서버에 업로드host 앱에서 업데이트 버튼을 클릭하면, 재시작 없이..
리액트 네이티용 Module Federation 원래 리액트 네이티브는 metro라는 자체 번들러를 사용했기 때문에, 개발자가 개입할 수 있는 방법이 제한적이었습니다. 그런데 callstack 팀에서 리액트 네이티브를 위한 webpack인 repack과 리액트 네이티브를 위해 약간 수정된 ModuleFederationPlugin까지 개발해 주었습니다.목차1. 오리지널 Module Federation과 차이  1-1. Federated.importModule  1-2. Resolver  1-3. Host    - Host 역할    - Host 제약  1-4 eager2. 정리3. 마치며1. 오리지널  Module Federation과 차이1-1. Federated.importModule오리지널(브라우저용) Module Federation에선 외부 모..
Module Federation 코드를 일일이 설명하면 저도 힘들고 보는 사람도 힘들기 때문에, 간단한 예제로 전반적인 실행 흐름과 그 사이의 중요한 로직 위주로 설명하겠습니다. 목차필요성예제실행 흐름정리마치며1. 필요성모든 앱에는 항상 변경(change)이 발생합니다.그리고 앱의 규모가 커질 수록 변경에 따른 부수효과(side effect)가 발생할 가능성이 커집니다.앱을 여러 개의 도메인으로 분리하고, 각 도메인을 하나의 미니 앱이 담당한다면, 개발자가 신경써야할 부분과, 실수 가능성을 최소화할 수 있을 것입니다.참고거대한 서비스 쪼개서 마이크로 프런트엔드 만들기 - NHN 클라우드Webpack 5 Module Federation으로 Micro-Frontends 운영하기2. 예제app2가 노출하는 sayHello 모듈을 app1이 ..