Module Federationμ μ¬μ©ν νλ‘ νΈμλ λ§μ΄ν¬λ‘ νλ‘ νΈμλ μ¬μΈ΅ λΆμ: μν€ν μ², μ΄μ , ꡬν μ λ΅ λ° νμ₯ κ°λ₯ν μΉ μ ν리μΌμ΄μ μ μν λͺ¨λ² μ¬λ‘.
νλ‘ νΈμλ λ§μ΄ν¬λ‘ νλ‘ νΈμλ: Module Federation μν€ν μ² λ§μ€ν°νκΈ°
μ€λλ λΉ λ₯΄κ² μ§ννλ μΉ κ°λ° νκ²½μμ λκ·λͺ¨ νλ‘ νΈμλ μ ν리μΌμ΄μ μ ꡬμΆνκ³ μ μ§ κ΄λ¦¬νλ κ²μ μ μ λ 볡μ‘ν΄μ§ μ μμ΅λλ€. κΈ°μ‘΄μ λͺ¨λ리μ μν€ν μ²λ μ’ μ’ μ½λ λΉλν, λΉλ μκ° μ¦κ°, λ 립μ μΈ λ°°ν¬μ μ΄λ €μκ³Ό κ°μ λ¬Έμ λ‘ μ΄μ΄μ§λλ€. λ§μ΄ν¬λ‘ νλ‘ νΈμλλ νλ‘ νΈμλλ₯Ό λ μκ³ κ΄λ¦¬νκΈ° μ¬μ΄ μ‘°κ°μΌλ‘ λλμ΄ ν΄κ²°μ± μ μ μν©λλ€. μ΄ κΈ°μ¬μμλ λ§μ΄ν¬λ‘ νλ‘ νΈμλλ₯Ό ꡬννκΈ° μν κ°λ ₯ν κΈ°μ μΈ Module Federationμ μμΈν μ΄ν΄λ³΄κ³ , κ·Έ μ΄μ , μν€ν μ² λ° μ€μ©μ μΈ κ΅¬ν μ λ΅μ νꡬν©λλ€.
λ§μ΄ν¬λ‘ νλ‘ νΈμλλ 무μμΈκ°μ?
λ§μ΄ν¬λ‘ νλ‘ νΈμλλ νλ‘ νΈμλ μ ν리μΌμ΄μ μ΄ λ μκ³ λ 립μ μ΄λ©° λ°°ν¬ κ°λ₯ν λ¨μλ‘ λΆν΄λλ μν€ν μ² μ€νμΌμ λλ€. κ° λ§μ΄ν¬λ‘ νλ‘ νΈμλλ μΌλ°μ μΌλ‘ λ³λμ νμ΄ μμ νμ¬ λ ν° μμ¨μ±κ³Ό λ λΉ λ₯Έ κ°λ° μ£ΌκΈ°λ₯Ό νμ©ν©λλ€. μ΄ μ κ·Ό λ°©μμ λ°±μλμμ μΌλ°μ μΌλ‘ μ¬μ©λλ λ§μ΄ν¬λ‘ μλΉμ€ μν€ν μ²λ₯Ό λ―Έλ¬λ§ν©λλ€.
λ§μ΄ν¬λ‘ νλ‘ νΈμλμ μ£Όμ νΉμ§μ λ€μκ³Ό κ°μ΅λλ€.
- λ 립μ μΈ λ°°ν¬ κ°λ₯μ±: κ° λ§μ΄ν¬λ‘ νλ‘ νΈμλλ μ ν리μΌμ΄μ μ λ€λ₯Έ λΆλΆμ μν₯μ μ£Όμ§ μκ³ λ 립μ μΌλ‘ λ°°ν¬ν μ μμ΅λλ€.
- ν μμ¨μ±: λ€λ₯Έ νμ μ νΈνλ κΈ°μ κ³Ό μν¬νλ‘λ₯Ό μ¬μ©νμ¬ μλ‘ λ€λ₯Έ λ§μ΄ν¬λ‘ νλ‘ νΈμλλ₯Ό μμ νκ³ κ°λ°ν μ μμ΅λλ€.
- κΈ°μ λ€μμ±: λ§μ΄ν¬λ‘ νλ‘ νΈμλλ μλ‘ λ€λ₯Έ νλ μμν¬μ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ κ΅¬μΆν μ μμΌλ―λ‘ νμμ μμ μ κ°μ₯ μ ν©ν λꡬλ₯Ό μ νν μ μμ΅λλ€.
- 격리: λ§μ΄ν¬λ‘ νλ‘ νΈμλλ μλ‘ κ²©λ¦¬λμ΄μΌ μ°μμ μ€ν¨λ₯Ό λ°©μ§νκ³ μμ μ±μ 보μ₯ν©λλ€.
λ§μ΄ν¬λ‘ νλ‘ νΈμλλ₯Ό μ¬μ©νλ μ΄μ λ 무μμΈκ°μ?
λ§μ΄ν¬λ‘ νλ‘ νΈμλ μν€ν μ²λ₯Ό μ±ννλ©΄ νΉν ν¬κ³ 볡μ‘ν μ ν리μΌμ΄μ μ λν΄ λͺ κ°μ§ μ€μν μ΄μ μ΄ μμ΅λλ€.
- νμ₯μ± ν₯μ: νλ‘ νΈμλλ₯Ό λ μμ λ¨μλ‘ λλλ©΄ νμμ λ°λΌ μ ν리μΌμ΄μ μ λ μ½κ² νμ₯ν μ μμ΅λλ€.
- λ λΉ λ₯Έ κ°λ° μ£ΌκΈ°: λ 립λ νμ΄ λ³λ ¬λ‘ μμ ν μ μμΌλ―λ‘ κ°λ° λ° λ¦΄λ¦¬μ€ μ£ΌκΈ°κ° λΉ¨λΌμ§λλ€.
- ν μμ¨μ± μ¦κ°: νμ μ½λλ₯Ό λ μ μ μ΄νκ³ λ 립μ μΌλ‘ κ²°μ μ λ΄λ¦΄ μ μμ΅λλ€.
- μ μ§ κ΄λ¦¬ μ©μ΄μ±: λ μμ μ½λλ² μ΄μ€λ μ μ§ κ΄λ¦¬ λ° λλ²κΉ μ΄ λ μ½μ΅λλ€.
- κΈ°μ 무κ΄: νμ νΉμ μꡬ μ¬νμ κ°μ₯ μ ν©ν κΈ°μ μ μ νν μ μμΌλ―λ‘ νμ κ³Ό μ€νμ΄ κ°λ₯ν©λλ€.
- μν κ°μ: λ°°ν¬κ° λ μκ³ λΉλ²ν΄μ Έ λκ·λͺ¨ μ€ν¨μ μνμ΄ μ€μ΄λλλ€.
Module Federation μκ°
Module Federationμ JavaScript μ ν리μΌμ΄μ μ΄ λ°νμμ λ€λ₯Έ μ ν리μΌμ΄μ μμ μ½λλ₯Ό λμ μΌλ‘ λ‘λν μ μλλ‘ νλ Webpack 5μ λμ λ κΈ°λ₯μ λλ€. μ΄λ₯Ό ν΅ν΄ μ§μ μΌλ‘ λ 립μ μ΄κ³ κ΅¬μ± κ°λ₯ν λ§μ΄ν¬λ‘ νλ‘ νΈμλλ₯Ό λ§λ€ μ μμ΅λλ€. λͺ¨λ κ²μ λ¨μΌ λ²λ€λ‘ λΉλνλ λμ Module Federationμ μ¬μ©νλ©΄ μλ‘ λ€λ₯Έ μ ν리μΌμ΄μ μ΄ λ‘컬 μ’ μμ±μΈ κ²μ²λΌ μλ‘μ λͺ¨λμ 곡μ νκ³ μ¬μ©ν μ μμ΅λλ€.
iframe λλ μΉ κ΅¬μ± μμμ μμ‘΄νλ κΈ°μ‘΄μ λ§μ΄ν¬λ‘ νλ‘ νΈμλ μ κ·Ό λ°©μκ³Ό λ¬λ¦¬ Module Federationμ μ¬μ©μμκ² λμ± μννκ³ ν΅ν©λ κ²½νμ μ 곡ν©λλ€. μ΄λ¬ν λ€λ₯Έ κΈ°μ κ³Ό κ΄λ ¨λ μ±λ₯ μ€λ²ν€λμ 볡μ‘μ±μ νΌν©λλ€.
Module Federation μλ λ°©μ
Module Federationμ "λ ΈμΆ" λ° "μ¬μ©" λͺ¨λμ κ°λ μΌλ‘ μλν©λλ€. νλμ μ ν리μΌμ΄μ ("νΈμ€νΈ" λλ "컨ν μ΄λ")μ λͺ¨λμ λ ΈμΆν μ μκ³ λ€λ₯Έ μ ν리μΌμ΄μ ("μ격")μ μ΄λ¬ν λ ΈμΆλ λͺ¨λμ μ¬μ©ν μ μμ΅λλ€. νλ‘μΈμ€μ λν λΆμμ λ€μκ³Ό κ°μ΅λλ€.
- λͺ¨λ λ ΈμΆ: Webpackμμ "μ격" μ ν리μΌμ΄μ μΌλ‘ ꡬμ±λ λ§μ΄ν¬λ‘ νλ‘ νΈμλλ κ΅¬μ± νμΌμ ν΅ν΄ νΉμ λͺ¨λ(κ΅¬μ± μμ, ν¨μ, μ νΈλ¦¬ν°)μ λ ΈμΆν©λλ€. μ΄ κ΅¬μ±μ 곡μ ν λͺ¨λκ³Ό ν΄λΉ μ§μ μ μ μ§μ ν©λλ€.
- λͺ¨λ μ¬μ©: "νΈμ€νΈ" λλ "컨ν μ΄λ" μ ν리μΌμ΄μ μΌλ‘ ꡬμ±λ λ€λ₯Έ λ§μ΄ν¬λ‘ νλ‘ νΈμλλ μ격 μ ν리μΌμ΄μ μ μ’ μμ±μΌλ‘ μ μΈν©λλ€. μ격μ λͺ¨λ νλλ μ΄μ λ§€λνμ€νΈ(λ ΈμΆλ λͺ¨λμ μ€λͺ νλ μμ JSON νμΌ)λ₯Ό μ°Ύμ μ μλ URLμ μ§μ ν©λλ€.
- λ°νμ νμΈ: νΈμ€νΈ μ ν리μΌμ΄μ μ΄ μ격 μ ν리μΌμ΄μ μ λͺ¨λμ μ¬μ©ν΄μΌ νλ κ²½μ° μ격μ λͺ¨λ νλλ μ΄μ λ§€λνμ€νΈλ₯Ό λμ μΌλ‘ κ°μ Έμ΅λλ€. κ·Έλ° λ€μ Webpackμ λͺ¨λ μ’ μμ±μ νμΈνκ³ λ°νμμ μ격 μ ν리μΌμ΄μ μμ νμν μ½λλ₯Ό λ‘λν©λλ€.
- μ½λ 곡μ : Module Federationμ λν νΈμ€νΈμ μ격 μ ν리μΌμ΄μ κ°μ μ½λ 곡μ λ₯Ό νμ©ν©λλ€. λ μ ν리μΌμ΄μ λͺ¨λ λμΌν λ²μ μ 곡μ μ’ μμ±(μ: React, lodash)μ μ¬μ©νλ κ²½μ° μ½λκ° κ³΅μ λμ΄ μ€λ³΅μ λ°©μ§νκ³ λ²λ€ ν¬κΈ°λ₯Ό μ€μ λλ€.
Module Federation μ€μ : μ€μ©μ μΈ μ
λ κ°μ λ§μ΄ν¬λ‘ νλ‘ νΈμλ("μ ν μΉ΄νλ‘κ·Έ" λ° "μΌν μΉ΄νΈ")λ₯Ό ν¬ν¨νλ κ°λ¨ν μλ₯Ό ν΅ν΄ Module Federationμ μ€λͺ ν΄ λ³΄κ² μ΅λλ€. μ ν μΉ΄νλ‘κ·Έλ μΌν μΉ΄νΈκ° κ΄λ ¨ μ νμ νμνκΈ° μν΄ μ¬μ©ν μ ν λͺ©λ‘ κ΅¬μ± μμλ₯Ό λ ΈμΆν©λλ€.
νλ‘μ νΈ κ΅¬μ‘°
micro-frontend-example/
product-catalog/
src/
components/
ProductList.jsx
index.js
webpack.config.js
shopping-cart/
src/
components/
RelatedProducts.jsx
index.js
webpack.config.js
μ ν μΉ΄νλ‘κ·Έ (μ격)
webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');
module.exports = {
// ... other webpack configurations
plugins: [
new ModuleFederationPlugin({
name: 'product_catalog',
filename: 'remoteEntry.js',
exposes: {
'./ProductList': './src/components/ProductList',
},
shared: {
react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
},
}),
],
};
μ€λͺ :
- name: μ격 μ ν리μΌμ΄μ μ κ³ μ ν μ΄λ¦μ λλ€.
- filename: λ ΈμΆλ μ§μ μ νμΌμ μ΄λ¦μ λλ€. μ΄ νμΌμλ λͺ¨λ νλλ μ΄μ λ§€λνμ€νΈκ° ν¬ν¨λμ΄ μμ΅λλ€.
- exposes: μ΄ μ ν리μΌμ΄μ μμ λ ΈμΆν λͺ¨λμ μ μν©λλ€. μ΄ κ²½μ° `ProductList` κ΅¬μ± μμλ₯Ό `./ProductList`λΌλ μ΄λ¦μΌλ‘ `src/components/ProductList.jsx`μμ λ ΈμΆν©λλ€.
- shared: νΈμ€νΈμ μ격 μ ν리μΌμ΄μ κ°μ 곡μ ν΄μΌ νλ μ’ μμ±μ μ§μ ν©λλ€. μ΄λ μ½λ μ€λ³΅μ λ°©μ§νκ³ νΈνμ±μ 보μ₯νλ λ° λ§€μ° μ€μν©λλ€. `singleton: true`λ 곡μ μ’ μμ±μ μΈμ€ν΄μ€κ° νλλ§ λ‘λλλλ‘ ν©λλ€. `eager: true`λ 곡μ μ’ μμ±μ μ²μμ λ‘λνμ¬ μ±λ₯μ ν₯μμν¬ μ μμ΅λλ€. `requiredVersion`μ 곡μ μ’ μμ±μ λν νμ© κ°λ₯ν λ²μ λ²μλ₯Ό μ μν©λλ€.
src/components/ProductList.jsx
import React from 'react';
const ProductList = ({ products }) => (
{products.map((product) => (
- {product.name} - ${product.price}
))}
);
export default ProductList;
μΌν μΉ΄νΈ (νΈμ€νΈ)
webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');
module.exports = {
// ... other webpack configurations
plugins: [
new ModuleFederationPlugin({
name: 'shopping_cart',
remotes: {
product_catalog: 'product_catalog@http://localhost:3001/remoteEntry.js',
},
shared: {
react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
},
}),
],
};
μ€λͺ :
- name: νΈμ€νΈ μ ν리μΌμ΄μ μ κ³ μ ν μ΄λ¦μ λλ€.
- remotes: μ΄ μ ν리μΌμ΄μ μ΄ λͺ¨λμ μ¬μ©ν μ격 μ ν리μΌμ΄μ μ μ μν©λλ€. μ΄ κ²½μ° `product_catalog`λΌλ μ격μ μ μΈνκ³ ν΄λΉ `remoteEntry.js` νμΌμ μ°Ύμ μ μλ URLμ μ§μ ν©λλ€. νμμ `remoteName: 'remoteName@remoteEntryUrl'`μ λλ€.
- shared: μ격 μ ν리μΌμ΄μ κ³Ό μ μ¬νκ² νΈμ€νΈ μ ν리μΌμ΄μ λ 곡μ μ’ μμ±μ μ μν©λλ€. μ΄λ κ² νλ©΄ νΈμ€νΈμ μ격 μ ν리μΌμ΄μ μμ 곡μ λΌμ΄λΈλ¬λ¦¬μ νΈν κ°λ₯ν λ²μ μ μ¬μ©νλλ‘ ν μ μμ΅λλ€.
src/components/RelatedProducts.jsx
import React, { useEffect, useState } from 'react';
import ProductList from 'product_catalog/ProductList';
const RelatedProducts = () => {
const [products, setProducts] = useState([]);
useEffect(() => {
// Fetch related products data (e.g., from an API)
const fetchProducts = async () => {
// Replace with your actual API endpoint
const response = await fetch('https://fakestoreapi.com/products?limit=3');
const data = await response.json();
setProducts(data);
};
fetchProducts();
}, []);
return (
Related Products
{products.length > 0 ? : Loading...
}
);
};
export default RelatedProducts;
μ€λͺ :
- import ProductList from 'product_catalog/ProductList'; μ΄ μ€μ `product_catalog` μ격μμ `ProductList` κ΅¬μ± μμλ₯Ό κ°μ Έμ΅λλ€. ꡬ문 `remoteName/moduleName`μ Webpackμ μ§μ λ μ격 μ ν리μΌμ΄μ μμ λͺ¨λμ κ°μ Έμ€λλ‘ μ§μν©λλ€.
- κ·Έλ° λ€μ κ΅¬μ± μμλ κ°μ Έμ¨ `ProductList` κ΅¬μ± μμλ₯Ό μ¬μ©νμ¬ κ΄λ ¨ μ νμ νμν©λλ€.
μμ μ€ν
- κ° κ°λ° μλ²(μ: `npm start`)λ₯Ό μ¬μ©νμ¬ μ ν μΉ΄νλ‘κ·Έ λ° μΌν μΉ΄νΈ μ ν리μΌμ΄μ μ λͺ¨λ μμν©λλ€. μλ‘ λ€λ₯Έ ν¬νΈμμ μ€νλκ³ μλμ§ νμΈν©λλ€(μ: ν¬νΈ 3001μ μ ν μΉ΄νλ‘κ·Έ λ° ν¬νΈ 3000μ μΌν μΉ΄νΈ).
- λΈλΌμ°μ μμ μΌν μΉ΄νΈ μ ν리μΌμ΄μ μΌλ‘ μ΄λν©λλ€.
- μ ν μΉ΄νλ‘κ·Έ μ ν리μΌμ΄μ μ `ProductList` κ΅¬μ± μμλ‘ λ λλ§λλ κ΄λ ¨ μ ν μΉμ μ΄ νμλμ΄μΌ ν©λλ€.
κ³ κΈ Module Federation κ°λ
κΈ°λ³Έ μ€μ μ λμ΄ Module Federationμ λ§μ΄ν¬λ‘ νλ‘ νΈμλ μν€ν μ²λ₯Ό ν₯μμν¬ μ μλ λͺ κ°μ§ κ³ κΈ κΈ°λ₯μ μ 곡ν©λλ€.
μ½λ 곡μ λ° λ²μ κ΄λ¦¬
μμ μμ μ€λͺ νλ―μ΄ Module Federationμ μ¬μ©νλ©΄ νΈμ€νΈμ μ격 μ ν리μΌμ΄μ κ°μ μ½λλ₯Ό 곡μ ν μ μμ΅λλ€. μ΄λ Webpackμ `shared` κ΅¬μ± μ΅μ μ ν΅ν΄ λ¬μ±λ©λλ€. 곡μ μ’ μμ±μ μ§μ νλ©΄ μ½λ μ€λ³΅μ λ°©μ§νκ³ λ²λ€ ν¬κΈ°λ₯Ό μ€μΌ μ μμ΅λλ€. νΈνμ±μ 보μ₯νκ³ μΆ©λμ λ°©μ§νλ €λ©΄ 곡μ μ’ μμ±μ μ μ ν λ²μ κ΄λ¦¬κ° μ€μν©λλ€. SemVer(Semantic Versioning)λ μννΈμ¨μ΄ λ²μ κ΄λ¦¬μ λ리 μ¬μ©λλ νμ€μΌλ‘, νΈν κ°λ₯ν λ²μ λ²μλ₯Ό μ μν μ μμ΅λλ€(μ: `^17.0.0`μ 17.0.0 μ΄μ 18.0.0 λ―Έλ§μ λͺ¨λ λ²μ μ νμ©ν©λλ€.).
λμ μ격
μ΄μ μμμλ μ격 URLμ΄ `webpack.config.js` νμΌμ νλμ½λ©λμμ΅λλ€. κ·Έλ¬λ λ§μ μ€μ μλ리μ€μμ λ°νμμ μ격 URLμ λμ μΌλ‘ κ²°μ ν΄μΌ ν μ μμ΅λλ€. μ΄λ promise κΈ°λ° μ격 ꡬμ±μ μ¬μ©νμ¬ λ¬μ±ν μ μμ΅λλ€.
// webpack.config.js
remotes: {
product_catalog: new Promise(resolve => {
// Fetch the remote URL from a configuration file or API
fetch('/config.json')
.then(response => response.json())
.then(config => {
const remoteUrl = config.productCatalogUrl;
resolve(`product_catalog@${remoteUrl}/remoteEntry.js`);
});
}),
},
μ΄λ₯Ό ν΅ν΄ νκ²½(μ: κ°λ°, μ€ν μ΄μ§, νλ‘λμ ) λλ κΈ°ν μμλ₯Ό κΈ°λ°μΌλ‘ μ격 URLμ ꡬμ±ν μ μμ΅λλ€.
λΉλκΈ° λͺ¨λ λ‘λ©
Module Federationμ λΉλκΈ° λͺ¨λ λ‘λ©μ μ§μνμ¬ νμμ λ°λΌ λͺ¨λμ λ‘λν μ μμ΅λλ€. μ΄λ κ² νλ©΄ μ€μνμ§ μμ λͺ¨λμ λ‘λ©μ μ°κΈ°νμ¬ μ ν리μΌμ΄μ μ μ΄κΈ° λ‘λ μκ°μ κ°μ ν μ μμ΅λλ€.
// RelatedProducts.jsx
import React, { Suspense, lazy } from 'react';
const ProductList = lazy(() => import('product_catalog/ProductList'));
const RelatedProducts = () => {
return (
Related Products
Loading...}>
);
};
`React.lazy` λ° `Suspense`λ₯Ό μ¬μ©νμ¬ `ProductList` κ΅¬μ± μμλ₯Ό μ격 μ ν리μΌμ΄μ μμ λΉλκΈ°μ μΌλ‘ λ‘λν μ μμ΅λλ€. `Suspense` κ΅¬μ± μμλ λͺ¨λμ΄ λ‘λλλ λμ λ체 UI(μ: λ‘λ© νμκΈ°)λ₯Ό μ 곡ν©λλ€.
μ°ν©λ μ€νμΌ λ° μμ°
Module Federationμ λ§μ΄ν¬λ‘ νλ‘ νΈμλ κ°μ μ€νμΌκ³Ό μμ°μ 곡μ νλ λ°μλ μ¬μ©ν μ μμ΅λλ€. μ΄λ κ² νλ©΄ μ ν리μΌμ΄μ μ 체μμ μΌκ΄λ λͺ¨μκ³Ό λλμ μ μ§νλ λ° λμμ΄ λ μ μμ΅λλ€.
μ€νμΌμ 곡μ νλ €λ©΄ CSS λͺ¨λ λλ μ€νμΌ κ΅¬μ± μμλ₯Ό μ격 μ ν리μΌμ΄μ μμ λ ΈμΆν μ μμ΅λλ€. μμ°(μ: μ΄λ―Έμ§, κΈκΌ΄)μ 곡μ νλ €λ©΄ Webpackμ ꡬμ±νμ¬ μμ°μ 곡μ μμΉλ‘ 볡μ¬ν λ€μ νΈμ€νΈ μ ν리μΌμ΄μ μμ μ°Έμ‘°ν μ μμ΅λλ€.
Module Federationμ μν λͺ¨λ² μ¬λ‘
Module Federationμ ꡬνν λλ μ±κ³΅μ μ΄κ³ μ μ§ κ΄λ¦¬ κ°λ₯ν μν€ν μ²λ₯Ό 보μ₯νκΈ° μν΄ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄λ κ²μ΄ μ€μν©λλ€.
- λͺ νν κ²½κ³ μ μ: λ§μ΄ν¬λ‘ νλ‘ νΈμλ κ°μ κ²½κ³λ₯Ό λͺ ννκ² μ μνμ¬ κΈ΄λ°ν κ²°ν©μ λ°©μ§νκ³ λ 립μ μΈ λ°°ν¬ κ°λ₯μ±μ 보μ₯ν©λλ€.
- ν΅μ νλ‘ν μ½ ν립: λ§μ΄ν¬λ‘ νλ‘ νΈμλ κ°μ λͺ νν ν΅μ νλ‘ν μ½μ μ μν©λλ€. μ΄λ²€νΈ λ²μ€, 곡μ μν κ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬ λλ μ¬μ©μ μ§μ API μ¬μ©μ κ³ λ €νμμμ€.
- 곡μ μ’ μμ± μ μ€νκ² κ΄λ¦¬: λ²μ μΆ©λμ λ°©μ§νκ³ νΈνμ±μ 보μ₯νκΈ° μν΄ κ³΅μ μ’ μμ±μ μ μ€νκ² κ΄λ¦¬ν©λλ€. μλ―Έ 체κ³μ λ²μ κ΄λ¦¬λ₯Ό μ¬μ©νκ³ npm λλ yarnκ³Ό κ°μ μ’ μμ± κ΄λ¦¬ λꡬ μ¬μ©μ κ³ λ €νμμμ€.
- κ°λ ₯ν μ€λ₯ μ²λ¦¬ ꡬν: μ°μμ μ€ν¨λ₯Ό λ°©μ§νκ³ μ ν리μΌμ΄μ μ μμ μ±μ 보μ₯νκΈ° μν΄ κ°λ ₯ν μ€λ₯ μ²λ¦¬λ₯Ό ꡬνν©λλ€.
- μ±λ₯ λͺ¨λν°λ§: λ³λͺ© νμμ μλ³νκ³ μ±λ₯μ μ΅μ ννκΈ° μν΄ λ§μ΄ν¬λ‘ νλ‘ νΈμλμ μ±λ₯μ λͺ¨λν°λ§ν©λλ€.
- λ°°ν¬ μλν: μΌκ΄λκ³ μμ μ μΈ λ°°ν¬λ₯Ό 보μ₯νκΈ° μν΄ λ°°ν¬ νλ‘μΈμ€λ₯Ό μλνν©λλ€.
- μΌκ΄λ μ½λ© μ€νμΌ μ¬μ©: κ°λ μ± λ° μ μ§ κ΄λ¦¬λ₯Ό κ°μ νκΈ° μν΄ λͺ¨λ λ§μ΄ν¬λ‘ νλ‘ νΈμλμμ μΌκ΄λ μ½λ© μ€νμΌμ μ μ©ν©λλ€. ESLint λ° Prettierμ κ°μ λκ΅¬κ° μ΄μ λμμ΄ λ μ μμ΅λλ€.
- μν€ν μ² λ¬Έμν: λͺ¨λ ν ꡬμ±μμ΄ μμ€ν κ³Ό μλ λ°©μμ μ΄ν΄νλλ‘ λ§μ΄ν¬λ‘ νλ‘ νΈμλ μν€ν μ²λ₯Ό λ¬Έμνν©λλ€.
Module Federation λ λ€λ₯Έ λ§μ΄ν¬λ‘ νλ‘ νΈμλ μ κ·Ό λ°©μ
Module Federationμ λ§μ΄ν¬λ‘ νλ‘ νΈμλλ₯Ό ꡬννκΈ° μν κ°λ ₯ν κΈ°μ μ΄μ§λ§ μ μΌν μ κ·Ό λ°©μμ μλλλ€. λ€λ₯Έ λ리 μ¬μ©λλ λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€.
- Iframe: Iframeμ λ§μ΄ν¬λ‘ νλ‘ νΈμλ κ°μ κ°λ ₯ν 격리λ₯Ό μ 곡νμ§λ§ μννκ² ν΅ν©νκΈ° μ΄λ ΅κ³ μ±λ₯ μ€λ²ν€λκ° λ°μν μ μμ΅λλ€.
- μΉ κ΅¬μ± μμ: μΉ κ΅¬μ± μμλ₯Ό μ¬μ©νλ©΄ μλ‘ λ€λ₯Έ λ§μ΄ν¬λ‘ νλ‘ νΈμλμμ μ¬μ©ν μ μλ μ¬μ¬μ© κ°λ₯ν UI μμλ₯Ό λ§λ€ μ μμ΅λλ€. κ·Έλ¬λ Module Federationλ³΄λ€ κ΅¬ννκΈ° λ 볡μ‘ν μ μμ΅λλ€.
- λΉλ νμ ν΅ν©: μ΄ μ κ·Ό λ°©μμλ λΉλ μμ μ λͺ¨λ λ§μ΄ν¬λ‘ νλ‘ νΈμλλ₯Ό λ¨μΌ μ ν리μΌμ΄μ μΌλ‘ λΉλνλ κ²μ΄ ν¬ν¨λ©λλ€. λ°°ν¬λ₯Ό λ¨μνν μ μμ§λ§ ν μμ¨μ±μ μ€μ΄κ³ μΆ©λ μνμ μ¦κ°μν΅λλ€.
- Single-SPA: Single-SPAλ μ¬λ¬ λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ μ λ¨μΌ μ ν리μΌμ΄μ μΌλ‘ κ²°ν©ν μ μλ νλ μμν¬μ λλ€. λΉλ νμ ν΅ν©λ³΄λ€ λ μ μ°ν μ κ·Ό λ°©μμ μ 곡νμ§λ§ μ€μ μ΄ λ 볡μ‘ν μ μμ΅λλ€.
μ΄λ€ μ κ·Ό λ°©μμ μ¬μ©ν μ§λ μ ν리μΌμ΄μ μ νΉμ μꡬ μ¬νκ³Ό νμ κ·λͺ¨μ ꡬ쑰μ λ°λΌ λ¬λΌμ§λλ€. Module Federationμ μ μ°μ±, μ±λ₯ λ° μ¬μ© νΈμμ±μ κ· νμ μ μ μ§νμ¬ λ§μ νλ‘μ νΈμμ μΈκΈ° μλ μ νμ λλ€.
Module Federationμ μ€μ μ
νΉμ νμ¬ κ΅¬νμ μ’ μ’ κΈ°λ°μ΄μ§λ§ Module Federationμ μΌλ°μ μΈ μμΉμ λ€μν μ°μ λ° μλ리μ€μμ μ μ©λκ³ μμ΅λλ€. λͺ κ°μ§ μ μ¬μ μλ λ€μκ³Ό κ°μ΅λλ€.
- μ μ μκ±°λ νλ«νΌ: μ μ μκ±°λ νλ«νΌμ Module Federationμ μ¬μ©νμ¬ μ ν μΉ΄νλ‘κ·Έ, μΌν μΉ΄νΈ, κ²°μ νλ‘μΈμ€ λ° μ¬μ©μ κ³μ κ΄λ¦¬μ κ°μ μΉμ¬μ΄νΈμ μλ‘ λ€λ₯Έ μΉμ μ λ³λμ λ§μ΄ν¬λ‘ νλ‘ νΈμλλ‘ λΆλ¦¬ν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μλ‘ λ€λ₯Έ νμ΄ μ΄λ¬ν μΉμ μμ λ 립μ μΌλ‘ μμ νκ³ νλ«νΌμ λλ¨Έμ§ λΆλΆμ μν₯μ μ£Όμ§ μκ³ μ λ°μ΄νΈλ₯Ό λ°°ν¬ν μ μμ΅λλ€. μλ₯Ό λ€μ΄, *λ μΌ*μ νμ μ ν μΉ΄νλ‘κ·Έμ μ§μ€νκ³ *μΈλ*μ νμ μΌν μΉ΄νΈλ₯Ό κ΄λ¦¬ν μ μμ΅λλ€.
- κΈμ΅ μλΉμ€ μ ν리μΌμ΄μ : κΈμ΅ μλΉμ€ μ ν리μΌμ΄μ μ Module Federationμ μ¬μ©νμ¬ κ±°λ νλ«νΌ λ° κ³μ κ΄λ¦¬μ κ°μ λ―Όκ°ν κΈ°λ₯μ λ³λμ λ§μ΄ν¬λ‘ νλ‘ νΈμλλ‘ κ²©λ¦¬ν μ μμ΅λλ€. μ΄λ 보μμ κ°ννκ³ μ΄λ¬ν μ€μν κ΅¬μ± μμμ λν λ 립μ μΈ κ°μ¬λ₯Ό νμ©ν©λλ€. *λ°λ*μ νμ΄ κ±°λ νλ«νΌ κΈ°λ₯μ μ λ¬ΈμΌλ‘ νκ³ *λ΄μ*μ λ€λ₯Έ νμ΄ κ³μ κ΄λ¦¬λ₯Ό μ²λ¦¬νλ€κ³ μμν΄ λ³΄μμμ€.
- μ½ν μΈ κ΄λ¦¬ μμ€ν (CMS): CMSλ Module Federationμ μ¬μ©νμ¬ κ°λ°μκ° μ¬μ©μ μ§μ λͺ¨λμ λ§μ΄ν¬λ‘ νλ‘ νΈμλλ‘ λ§λ€κ³ λ°°ν¬ν μ μλλ‘ ν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ CMS μ¬μ©μλ₯Ό μν λ ν° μ μ°μ±κ³Ό μ¬μ©μ μ§μ μ΄ κ°λ₯ν©λλ€. *μΌλ³Έ*μ νμ νΉμ μ΄λ―Έμ§ κ°€λ¬λ¦¬ λͺ¨λμ ꡬμΆν μ μκ³ *λΈλΌμ§*μ νμ κ³ κΈ ν μ€νΈ νΈμ§κΈ°λ₯Ό λ§λ€ μ μμ΅λλ€.
- μλ£ μ ν리μΌμ΄μ : μλ£ μ ν리μΌμ΄μ μ Module Federationμ μ¬μ©νμ¬ μ μ κ±΄κ° κΈ°λ‘(EHR), νμ ν¬νΈ λ° μ²κ΅¬ μμ€ν κ³Ό κ°μ μλ‘ λ€λ₯Έ μμ€ν μ λ³λμ λ§μ΄ν¬λ‘ νλ‘ νΈμλλ‘ ν΅ν©ν μ μμ΅λλ€. μ΄λ μνΈ μ΄μ©μ±μ κ°μ νκ³ μλ‘μ΄ μμ€ν μ λ μ½κ² ν΅ν©ν μ μλλ‘ ν©λλ€. μλ₯Ό λ€μ΄, *μΊλλ€*μ νμ μλ‘μ΄ μ격 μλ£ λͺ¨λμ ν΅ν©νκ³ *νΈμ£Ό*μ νμ νμ ν¬νΈ κ²½ν κ°μ μ μ§μ€ν μ μμ΅λλ€.
κ²°λ‘
Module Federationμ λ§μ΄ν¬λ‘ νλ‘ νΈμλλ₯Ό ꡬννκΈ° μν κ°λ ₯νκ³ μ μ°ν μ κ·Ό λ°©μμ μ 곡ν©λλ€. μ ν리μΌμ΄μ μ΄ λ°νμμ μλ‘ μ½λλ₯Ό λμ μΌλ‘ λ‘λν μ μλλ‘ ν¨μΌλ‘μ¨ μ§μ μΌλ‘ λ 립μ μ΄κ³ κ΅¬μ± κ°λ₯ν νλ‘ νΈμλ μν€ν μ²λ₯Ό μμ±ν μ μμ΅λλ€. μ μ€ν κ³νκ³Ό ꡬνμ΄ νμνμ§λ§ νμ₯μ± μ¦κ°, λ λΉ λ₯Έ κ°λ° μ£ΌκΈ°, λ ν° ν μμ¨μ±μ μ΄μ μ λκ·λͺ¨μ 볡μ‘ν μΉ μ ν리μΌμ΄μ μ λν λ§€λ ₯μ μΈ μ νμ λλ€. μΉ κ°λ° νκ²½μ΄ κ³μ λ°μ ν¨μ λ°λΌ Module Federationμ νλ‘ νΈμλ μν€ν μ²μ λ―Έλλ₯Ό νμ±νλ λ° μ μ λ μ€μν μν μ ν κ²μ λλ€.
μ΄ κΈ°μ¬μμ μ€λͺ λ κ°λ κ³Ό λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄νλ©΄ Module Federationμ νμ©νμ¬ μ€λλ λΉ λ₯΄κ² λ³ννλ λμ§νΈ μΈκ³μ μꡬλ₯Ό μΆ©μ‘±νλ νμ₯ κ°λ₯νκ³ μ μ§ κ΄λ¦¬ κ°λ₯νλ©° νμ μ μΈ νλ‘ νΈμλ μ ν리μΌμ΄μ μ ꡬμΆν μ μμ΅λλ€.