💡 핵심 요약 (Executive Summary)
본 가이드는 js source react ModuleFederation Samples 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다.
📑 Table of Contents
공통
동적 로딩 활성화: bootstrap.tsx
ts
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
if (container) {
const root = createRoot(container);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
}동적 로딩 활성화: index.ts
ts
import('./bootstrap');Producer (Provider)
App.tsx
ts
import LocalButton from './Button';
const App = () => (
<div>
<h1>Basic Host-Remote</h1>
<h2>Remote</h2>
<LocalButton />
</div>
);
export default App;Component: Button.tsx
ts
export default function Button() {
return <div>Provider button</div>;
}Consumer
App.css
css
body {
margin: 0;
color: #fff;
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
background-image: linear-gradient(to bottom, #020917, #101725);
}
.content {
display: flex;
min-height: 100vh;
line-height: 1.1;
text-align: center;
flex-direction: column;
justify-content: center;
}
.content h1 {
font-size: 3.6rem;
font-weight: 700;
}
.content p {
font-size: 1.2rem;
font-weight: 400;
opacity: 0.5;
}App.tsx
ts
import './App.css';
// The remote component provided by federation_provider
import ProviderButton from 'federation_provider/button';
const App = () => {
return (
<div className="content">
<h1>Rsbuild with React</h1>
<p>Start building amazing things with Rsbuild.</p>
<div>
<ProviderButton />
</div>
</div>
);
};
export default App;
Leave a Reply