ํ์ฅ ๊ฐ๋ฅํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ์ ์ํ ํ๋ก ํธ์๋ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๋ผ์ฐํ , ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ ๋ด๋น๊ฒ์ด์ ์ ๋ต, ์ด์ , ๊ตฌํ ๊ธฐ์ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก์ ๋ํ ์ข ํฉ ๊ฐ์ด๋์ ๋๋ค.
ํ๋ก ํธ์๋ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๋ผ์ฐํฐ: ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ ๋ด๋น๊ฒ์ด์
ํ๋ ์น ๊ฐ๋ฐ์์ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ์ํคํ ์ฒ๋ ํฌ๊ณ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐฉ์์ผ๋ก ์๋นํ ์ฃผ๋ชฉ์ ๋ฐ๊ณ ์์ต๋๋ค. ์ด๋ ๋ชจ๋๋ฆฌ์ ํ๋ก ํธ์๋๋ฅผ ๋ ์๊ณ , ๋ ๋ฆฝ์ ์ด๋ฉฐ, ๋ฐฐํฌ ๊ฐ๋ฅํ ๋จ์(๋ง์ดํฌ๋ก ํ๋ก ํธ์๋)๋ก ๋๋๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด ์ํคํ ์ฒ์ ํต์ฌ ๊ณผ์ ์ค ํ๋๋ ์ฌ์ฉ์๊ฐ ์ด๋ฌํ ๋ ๋ฆฝ์ ์ธ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๊ฐ์ ์ํํ๊ฒ ์ด๋ํ ์ ์๋๋ก ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ ๋ด๋น๊ฒ์ด์ ์ ๊ด๋ฆฌํ๋ ๊ฒ์ ๋๋ค. ์ด ๊ธ์ ํ๋ก ํธ์๋ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๋ผ์ฐํ ๋ฐ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ ๋ด๋น๊ฒ์ด์ ์ ๋ํ ํฌ๊ด์ ์ธ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ ๋ฌด์์ธ๊ฐ?
๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ ๋ ๋ฆฝ์ ์ผ๋ก ์ ๊ณต ๊ฐ๋ฅํ ํ๋ก ํธ์๋ ์ ํ๋ฆฌ์ผ์ด์ ๋ค์ด ๋จ์ผํ๊ณ ์์ง๋ ฅ ์๋ ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ๊ตฌ์ฑ๋๋ ์ํคํ ์ฒ ์คํ์ผ์ ๋๋ค. ์ด๋ ๋ฐฑ์๋์ ๋ง์ดํฌ๋ก์๋น์ค์ ์ ์ฌํฉ๋๋ค. ๊ฐ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ ์ผ๋ฐ์ ์ผ๋ก ๋ณ๋์ ํ์ด ์์ ํ์ฌ ๋ ํฐ ์์จ์ฑ, ๋ ๋น ๋ฅธ ๊ฐ๋ฐ ์ฃผ๊ธฐ, ๊ทธ๋ฆฌ๊ณ ๋ ์ฌ์ด ์ ์ง๋ณด์๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋์ ์ด์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋ ๋ฆฝ์ ์ธ ๋ฐฐํฌ: ํ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ ๋ถ๋ถ์ ์ํฅ์ ์ฃผ์ง ์๊ณ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๋ฐฐํฌํ ์ ์์ต๋๋ค.
- ๊ธฐ์ ๋ค์์ฑ: ์๋ก ๋ค๋ฅธ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๋ค๋ฅธ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ๊ตฌ์ถํ ์ ์์ด, ํ์ด ์์ ์ ๊ฐ์ฅ ์ ํฉํ ๋๊ตฌ๋ฅผ ์ ํํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ํ ํ์ React๋ฅผ ์ฌ์ฉํ๋ ๋ฐ๋ฉด ๋ค๋ฅธ ํ์ Vue.js๋ Angular๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ํ์ฅ์ฑ: ๊ฐ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๋ ๋ฆฝ์ ์ผ๋ก ํ์ฅํ ์ ์์ผ๋ฏ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ ์ฝ๊ฒ ํ์ฅํ ์ ์์ต๋๋ค.
- ์ ์ง๋ณด์์ฑ ํฅ์: ์ฝ๋๋ฒ ์ด์ค๊ฐ ์์์๋ก ์ดํดํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ๊ฐ ๋ ์ฝ์ต๋๋ค.
- ํ ์์จ์ฑ: ํ์ ์์ฒด ์ฝ๋์ ๊ฐ๋ฐ ํ๋ก์ธ์ค์ ๋ํด ๋ ๋ง์ ํต์ ๊ถ์ ๊ฐ์ต๋๋ค.
๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๋ผ์ฐํฐ์ ํ์์ฑ
์ ์ ์๋ ๋ผ์ฐํ ์ ๋ต์ด ์์ผ๋ฉด ์ฌ์ฉ์๋ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๊ฐ์ ์ด๋ํ ๋ ๋จ์ ๋๊ณ ์ค๋ง์ค๋ฌ์ด ๊ฒฝํ์ ํ๊ฒ ๋ฉ๋๋ค. ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๋ผ์ฐํฐ๋ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฑธ์ณ ๋ด๋น๊ฒ์ด์ ์ ๊ด๋ฆฌํ๊ธฐ ์ํ ์ค์ ์ง์ค์ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํ์ฌ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๋ค์ ์ฌํญ ์ฒ๋ฆฌ๊ฐ ํฌํจ๋ฉ๋๋ค:
- URL ๊ด๋ฆฌ: URL์ด ์ฌ์ฉ์์ ํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ๋ด ์์น๋ฅผ ์ ํํ๊ฒ ๋ฐ์ํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
- ์ํ ๊ด๋ฆฌ: ํ์ํ ๊ฒฝ์ฐ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๊ฐ์ ์ํ๋ฅผ ๊ณต์ ํฉ๋๋ค.
- ์ง์ฐ ๋ก๋ฉ: ์ฑ๋ฅ ํฅ์์ ์ํด ํ์ํ ๋๋ง ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๋ก๋ํฉ๋๋ค.
- ์ธ์ฆ ๋ฐ ์ธ๊ฐ: ์ฌ๋ฌ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋์ ๊ฑธ์ณ ์ฌ์ฉ์ ์ธ์ฆ ๋ฐ ์ธ๊ฐ๋ฅผ ์ฒ๋ฆฌํฉ๋๋ค.
์ ํ๋ฆฌ์ผ์ด์ ๊ฐ ๋ด๋น๊ฒ์ด์ ์ ๋ต
๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ์ํคํ ์ฒ์์ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ ๋ด๋น๊ฒ์ด์ ์ ๊ตฌํํ๋ ๋ฐ๋ ์ฌ๋ฌ ๊ฐ์ง ์ ๊ทผ ๋ฐฉ์์ด ์์ต๋๋ค. ๊ฐ ์ ๊ทผ ๋ฐฉ์์๋ ๊ณ ์ ํ ์ฅ๋จ์ ์ด ์์ผ๋ฉฐ, ์ต์์ ์ ํ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค.
1. ์ค์ ์ง์ค์ ๋ผ์ฐํฐ ์ฌ์ฉ (Single-Spa)
Single-Spa๋ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํ ์ธ๊ธฐ ์๋ ํ๋ ์์ํฌ์ ๋๋ค. ์ค์ ์ง์ค์ ๋ผ์ฐํฐ๋ฅผ ์ฌ์ฉํ์ฌ ๋ค๋ฅธ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ์ ๋ด๋น๊ฒ์ด์ ์ ๊ด๋ฆฌํฉ๋๋ค. ๋ฉ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค์ผ์คํธ๋ ์ดํฐ ์ญํ ์ ํ๋ฉฐ ํ์ฌ URL์ ๊ธฐ๋ฐ์ผ๋ก ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๋ ๋๋งํ๊ณ ๋ง์ดํธ ํด์ ํ๋ ์ญํ ์ ํฉ๋๋ค.
์๋ ๋ฐฉ์:
- ์ฌ์ฉ์๊ฐ ํน์ URL๋ก ์ด๋ํฉ๋๋ค.
- single-spa ๋ผ์ฐํฐ๊ฐ URL ๋ณ๊ฒฝ์ ๊ฐ๋ก์ฑ๋๋ค.
- URL์ ๊ธฐ๋ฐ์ผ๋ก ๋ผ์ฐํฐ๋ ์ด๋ค ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๊ฐ ํ์ฑํ๋์ด์ผ ํ๋์ง ๊ฒฐ์ ํฉ๋๋ค.
- ๋ผ์ฐํฐ๋ ํด๋น ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ํ์ฑํํ๊ณ ๋ค๋ฅธ ํ์ฑ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๋ง์ดํธ ํด์ ํฉ๋๋ค.
์์ (Single-Spa):
home, products, cart๋ผ๋ ์ธ ๊ฐ์ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๊ฐ ์๋ค๊ณ ๊ฐ์ ํด ๋ด
์๋ค. single-spa ๋ผ์ฐํฐ๋ ๋ค์๊ณผ ๊ฐ์ด ๊ตฌ์ฑ๋ฉ๋๋ค:
import { registerApplication, start } from 'single-spa';
registerApplication(
'home',
() => import('./home/home.app.js'),
location => location.pathname === '/'
);
registerApplication(
'products',
() => import('./products/products.app.js'),
location => location.pathname.startsWith('/products')
);
registerApplication(
'cart',
() => import('./cart/cart.app.js'),
location => location.pathname.startsWith('/cart')
);
start();
์ด ์์ ์์ ๊ฐ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ single-spa์ ๋ฑ๋ก๋๋ฉฐ, URL์ ๊ธฐ๋ฐ์ผ๋ก ์ธ์ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๊ฐ ํ์ฑํ๋์ด์ผ ํ๋์ง๋ฅผ ๊ฒฐ์ ํ๋ ํจ์๊ฐ ์ ๊ณต๋ฉ๋๋ค. ์ฌ์ฉ์๊ฐ /products๋ก ์ด๋ํ๋ฉด products ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๊ฐ ํ์ฑํ๋ฉ๋๋ค.
์ฅ์ :
- ๋ผ์ฐํ ์ ๋ํ ์ค์ ์ง์ค์ ์ ์ด.
- ๋จ์ํ๋ ์ํ ๊ด๋ฆฌ (single-spa ์ค์ผ์คํธ๋ ์ดํฐ๊ฐ ์ฒ๋ฆฌ ๊ฐ๋ฅ).
- ๊ธฐ์กด ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ฝ๊ฒ ํตํฉ ๊ฐ๋ฅ.
๋จ์ :
- ๋จ์ผ ์คํจ ์ง์ . ์ค์ผ์คํธ๋ ์ดํฐ๊ฐ ๋ค์ด๋๋ฉด ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ํฅ์ ๋ฐ์ต๋๋ค.
- ํจ์จ์ ์ผ๋ก ๊ตฌํ๋์ง ์์ผ๋ฉด ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ด ๋ฐ์ํ ์ ์์ต๋๋ค.
2. ๋ชจ๋ ํ๋๋ ์ด์ (Webpack 5)
Webpack 5์ ๋ชจ๋ ํ๋๋ ์ด์ (Module Federation)์ ์ฌ์ฉํ๋ฉด ๋ฐํ์์ ๋ค๋ฅธ Webpack ๋น๋ ๊ฐ์ ์ฝ๋๋ฅผ ๊ณต์ ํ ์ ์์ต๋๋ค. ์ฆ, ํ ๋น๋(ํธ์คํธ)์์ ๋ค๋ฅธ ๋น๋(๋ฆฌ๋ชจํธ)๋ก ์ปดํฌ๋ํธ, ๋ชจ๋ ๋๋ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ ธ์ถํ ์ ์์ต๋๋ค. ์ด๋ ๊ฐ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๊ฐ ๋ณ๋์ Webpack ๋น๋์ธ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๊ตฌ์ถํ๋ ๋ฐ ์ฉ์ดํฉ๋๋ค.
์๋ ๋ฐฉ์:
- ๊ฐ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ ๋ณ๋์ Webpack ํ๋ก์ ํธ๋ก ๋น๋๋ฉ๋๋ค.
- ํ๋์ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๊ฐ ํธ์คํธ ์ ํ๋ฆฌ์ผ์ด์ ์ผ๋ก ์ง์ ๋ฉ๋๋ค.
- ํธ์คํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฆฌ๋ชจํธ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋์์ ์๋นํ๋ ค๋ ๋ชจ๋์ ์ ์ํฉ๋๋ค.
- ๋ฆฌ๋ชจํธ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ ํธ์คํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ ธ์ถํ๋ ค๋ ๋ชจ๋์ ์ ์ํฉ๋๋ค.
- ๋ฐํ์์ ํธ์คํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์์ ๋ฐ๋ผ ๋ฆฌ๋ชจํธ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋์์ ๋ ธ์ถ๋ ๋ชจ๋์ ๋ก๋ํฉ๋๋ค.
์์ (๋ชจ๋ ํ๋๋ ์ด์ ):
host ์ฑ๊ณผ remote ์ฑ์ด ์๋ค๊ณ ๊ฐ์ ํฉ๋๋ค.
host/webpack.config.js:
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ...
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
remote: 'remote@http://localhost:3001/remoteEntry.js',
},
shared: ['react', 'react-dom'],
}),
],
};
remote/webpack.config.js:
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ...
plugins: [
new ModuleFederationPlugin({
name: 'remote',
exposes: {
'./Button': './src/Button',
},
shared: ['react', 'react-dom'],
}),
],
};
์ด ์์ ์์ host ์ ํ๋ฆฌ์ผ์ด์
์ remote ์ ํ๋ฆฌ์ผ์ด์
์ Button ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํฉ๋๋ค. shared ์ต์
์ ๋ ์ ํ๋ฆฌ์ผ์ด์
์ด ๋์ผํ ๋ฒ์ ์ react์ react-dom์ ์ฌ์ฉํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
์ฅ์ :
- ๋ถ์ฐํ ์ํคํ ์ฒ. ๊ฐ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ ๋ ๋ฆฝ์ ์ด๋ฉฐ ๋ณ๋๋ก ๊ฐ๋ฐ ๋ฐ ๋ฐฐํฌ๋ ์ ์์ต๋๋ค.
- ์ฝ๋ ๊ณต์ . ๋ชจ๋ ํ๋๋ ์ด์ ์ ์ฌ์ฉํ๋ฉด ๋ฐํ์์ ๋ค๋ฅธ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ์ ์ฝ๋๋ฅผ ๊ณต์ ํ ์ ์์ต๋๋ค.
- ์ง์ฐ ๋ก๋ฉ. ๋ชจ๋์ ํ์ํ ๋๋ง ๋ก๋๋์ด ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
๋จ์ :
- single-spa๋ณด๋ค ์ค์ ๋ฐ ๊ตฌ์ฑ์ด ๋ ๋ณต์กํฉ๋๋ค.
- ๋ฒ์ ์ถฉ๋์ ํผํ๊ธฐ ์ํด ๊ณต์ ์ข ์์ฑ์ ์ ์คํ๊ฒ ๊ด๋ฆฌํด์ผ ํฉ๋๋ค.
3. ์น ์ปดํฌ๋ํธ
์น ์ปดํฌ๋ํธ(Web Components)๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ง์ถคํ HTML ์์๋ฅผ ๋ง๋ค ์ ์๊ฒ ํด์ฃผ๋ ์น ํ์ค ์งํฉ์ ๋๋ค. ์ด๋ฌํ ์ปดํฌ๋ํธ๋ ์ฌ์ฉ๋ ํ๋ ์์ํฌ์ ๊ด๊ณ์์ด ๋ชจ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๋ UI ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ถํ๊ณ ๊ณต์ ํ๋ ๊ธฐ์ ์ ๊ตฌ์ ๋ฐ์ง ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ฏ๋ก ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ์ํคํ ์ฒ์ ์์ฐ์ค๋ฝ๊ฒ ๋ถํฉํฉ๋๋ค.
์๋ ๋ฐฉ์:
- ๊ฐ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ UI๋ฅผ ์น ์ปดํฌ๋ํธ ์งํฉ์ผ๋ก ๋ ธ์ถํฉ๋๋ค.
- ๋ฉ์ธ ์ ํ๋ฆฌ์ผ์ด์ (๋๋ ๋ค๋ฅธ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋)์ ์ด๋ฌํ ์น ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ ธ์ HTML์์ ์ฌ์ฉํจ์ผ๋ก์จ ์๋นํฉ๋๋ค.
- ์น ์ปดํฌ๋ํธ๋ ์์ฒด ๋ ๋๋ง ๋ฐ ๋ก์ง์ ์ฒ๋ฆฌํฉ๋๋ค.
์์ (์น ์ปดํฌ๋ํธ):
micro-frontend-a.js:
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
Hello from Micro-Frontend A!
`;
}
}
customElements.define('micro-frontend-a', MyComponent);
index.html (๋ฉ์ธ ์ ํ๋ฆฌ์ผ์ด์ ):
Main Application
Main Application
์ด ์์ ์์ micro-frontend-a.js ํ์ผ์ micro-frontend-a๋ผ๋ ์น ์ปดํฌ๋ํธ๋ฅผ ์ ์ํฉ๋๋ค. index.html ํ์ผ์ ์ด ํ์ผ์ ๊ฐ์ ธ์ HTML์์ ์น ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ์น ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ์ฌ "Hello from Micro-Frontend A!"๋ฅผ ํ์ํฉ๋๋ค.
์ฅ์ :
- ๊ธฐ์ ์ ๊ตฌ์ ๋ฐ์ง ์์. ์น ์ปดํฌ๋ํธ๋ ์ด๋ค ํ๋ ์์ํฌ์ ํจ๊ป ์ฌ์ฉํ๊ฑฐ๋ ํ๋ ์์ํฌ ์์ด๋ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ์ฌ์ฌ์ฉ์ฑ. ์น ์ปดํฌ๋ํธ๋ ๋ค๋ฅธ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฝ๊ฒ ์ฌ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ์บก์ํ. ์น ์ปดํฌ๋ํธ๋ ์์ฒด ์คํ์ผ๊ณผ ๋ก์ง์ ์บก์ํํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ ๋ถ๋ถ๊ณผ์ ์ถฉ๋์ ๋ฐฉ์งํฉ๋๋ค.
๋จ์ :
- ๋ค๋ฅธ ์ ๊ทผ ๋ฐฉ์๋ณด๋ค ๊ตฌํ์ด ๋ ์ฅํฉํ ์ ์์ต๋๋ค.
- ์ค๋๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํ๊ธฐ ์ํด ํด๋ฆฌํ(polyfill)์ด ํ์ํ ์ ์์ต๋๋ค.
4. Iframe
Iframe(์ธ๋ผ์ธ ํ๋ ์)์ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๊ฒฉ๋ฆฌํ๊ธฐ ์ํ ์ค๋๋์์ง๋ง ์ฌ์ ํ ์คํ ๊ฐ๋ฅํ ์ต์
์
๋๋ค. ๊ฐ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ ์์ฒด iframe ๋ด์์ ์คํ๋์ด ๋์ ์์ค์ ๊ฒฉ๋ฆฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. Iframe ๊ฐ์ ํต์ ์ postMessage API๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌ์ฑํ ์ ์์ต๋๋ค.
์๋ ๋ฐฉ์:
- ๊ฐ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ ๋ณ๋์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ผ๋ก ๋ฐฐํฌ๋ฉ๋๋ค.
- ๋ฉ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ iframe์ ํฌํจํฉ๋๋ค.
- ๋ฉ์ธ ์ ํ๋ฆฌ์ผ์ด์
๊ณผ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๊ฐ์ ํต์ ์
postMessageAPI๋ฅผ ์ฌ์ฉํ์ฌ ์ํ๋ฉ๋๋ค.
์์ (Iframes):
index.html (๋ฉ์ธ ์ ํ๋ฆฌ์ผ์ด์ ):
Main Application
Main Application
์ด ์์ ์์ index.html ํ์ผ์ ๋ ๊ฐ์ iframe์ ํฌํจํ๋ฉฐ, ๊ฐ๊ฐ ๋ค๋ฅธ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๊ฐ๋ฆฌํต๋๋ค.
์ฅ์ :
- ๋์ ์์ค์ ๊ฒฉ๋ฆฌ. ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ ์๋ก ์์ ํ ๊ฒฉ๋ฆฌ๋์ด ์ถฉ๋์ ๋ฐฉ์งํฉ๋๋ค.
- ๊ตฌํ ์ฉ์ด์ฑ. Iframe์ ๊ฐ๋จํ๊ณ ์ ์๋ ค์ง ๊ธฐ์ ์ ๋๋ค.
๋จ์ :
- iframe ๊ฐ์ ํต์ ์ด ์ด๋ ค์ธ ์ ์์ต๋๋ค.
- ์ฌ๋ฌ iframe์ ์ค๋ฒํค๋๋ก ์ธํด ์ฑ๋ฅ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
- ์ํํ ํตํฉ ๋ถ์กฑ์ผ๋ก ์ธํด ์ฌ์ฉ์ ๊ฒฝํ์ด ์ ํ๋ ์ ์์ต๋๋ค.
๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๊ฐ ์ํ ๊ด๋ฆฌ
๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๊ฐ์ ์ํ ๊ด๋ฆฌ๋ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ ๋ด๋น๊ฒ์ด์ ์ ์ค์ํ ์ธก๋ฉด์ ๋๋ค. ์ฌ๋ฌ ์ ๋ต์ ์ฌ์ฉํ ์ ์์ต๋๋ค:
- URL ๊ธฐ๋ฐ ์ํ: ์ํ๋ฅผ URL ๋ด์ ์ธ์ฝ๋ฉํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ํ๋ฅผ URL์ ํตํด ๊ณต์ ํ ์ ์๊ณ ์ฝ๊ฒ ๋ถ๋งํฌํ ์ ์๊ฒ ๋ง๋ญ๋๋ค.
- ์ค์ ์ง์ค์ ์ํ ๊ด๋ฆฌ (Redux, Vuex): ์ ์ญ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๊ฐ์ ์ํ๋ฅผ ๊ณต์ ํฉ๋๋ค. ์ด๋ ๊ณต์ ์ํ๊ฐ ๋ง์ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์ ํนํ ์ ์ฉํฉ๋๋ค.
- ์ปค์คํ ์ด๋ฒคํธ: ์ปค์คํ ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๊ฐ์ ์ํ ๋ณ๊ฒฝ์ ํต์ ํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๊ฐ์ ๋์จํ ๊ฒฐํฉ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ๋ธ๋ผ์ฐ์ ์ ์ฅ์ (LocalStorage, SessionStorage): ๋ธ๋ผ์ฐ์ ์ ์ฅ์์ ์ํ๋ฅผ ์ ์ฅํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ชจ๋ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋์์ ๊ณต์ ํ ํ์๊ฐ ์๋ ๊ฐ๋จํ ์ํ์ ์ ํฉํฉ๋๋ค. ๊ทธ๋ฌ๋ ๋ฏผ๊ฐํ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ๋๋ ๋ณด์ ๊ณ ๋ ค ์ฌํญ์ ์ ์ํด์ผ ํฉ๋๋ค.
์ธ์ฆ ๋ฐ ์ธ๊ฐ
์ธ์ฆ ๋ฐ ์ธ๊ฐ๋ ๋ชจ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค์ํ ์ธก๋ฉด์ด๋ฉฐ, ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ์ํคํ ์ฒ์์๋ ๋์ฑ ์ค์ํด์ง๋๋ค. ์ผ๋ฐ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ค์ ์ง์ค์ ์ธ์ฆ ์๋น์ค: ์ ์ฉ ์๋น์ค๊ฐ ์ฌ์ฉ์ ์ธ์ฆ์ ์ฒ๋ฆฌํ๊ณ ํ ํฐ(์: JWT)์ ๋ฐ๊ธํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ ์ด๋ฌํ ํ ํฐ์ ๊ฒ์ฆํ์ฌ ์ฌ์ฉ์ ์ธ๊ฐ๋ฅผ ๊ฒฐ์ ํ ์ ์์ต๋๋ค.
- ๊ณต์ ์ธ์ฆ ๋ชจ๋: ๊ณต์ ๋ชจ๋์ด ์ธ์ฆ ๋ก์ง์ ์ฒ๋ฆฌํ๋ ์ญํ ์ ํฉ๋๋ค. ์ด ๋ชจ๋์ ๋ชจ๋ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ์์ง ์ธ์ฆ: ์ธ์ฆ์ ๋คํธ์ํฌ์ ์์ง(์: ๋ฆฌ๋ฒ์ค ํ๋ก์ ๋๋ API ๊ฒ์ดํธ์จ์ด ์ฌ์ฉ)์์ ์ฒ๋ฆฌ๋ฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋์ ์ธ์ฆ ๋ก์ง์ ๋จ์ํํ ์ ์์ต๋๋ค.
๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๋ผ์ฐํ ๋ชจ๋ฒ ์ฌ๋ก
๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๋ผ์ฐํ ์ ๊ตฌํํ ๋ ๋ช ์ฌํด์ผ ํ ๋ช ๊ฐ์ง ๋ชจ๋ฒ ์ฌ๋ก๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋จ์ํ๊ฒ ์ ์งํ๊ธฐ: ํ์์ ๋ง๋ ๊ฐ์ฅ ๊ฐ๋จํ ๋ผ์ฐํ ์ ๋ต์ ์ ํํ์ญ์์ค.
- ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๋ถ๋ฆฌ: ๋ ๋ฆฝ์ ์ธ ๊ฐ๋ฐ ๋ฐ ๋ฐฐํฌ๋ฅผ ์ด์งํ๊ธฐ ์ํด ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๊ฐ์ ์ข ์์ฑ์ ์ต์ํํ์ญ์์ค.
- ์ผ๊ด๋ URL ๊ตฌ์กฐ ์ฌ์ฉ: ์ฌ์ฉ์ ๊ฒฝํ๊ณผ SEO๋ฅผ ๊ฐ์ ํ๊ธฐ ์ํด ๋ชจ๋ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋์์ ์ผ๊ด๋ URL ๊ตฌ์กฐ๋ฅผ ์ ์งํ์ญ์์ค.
- ์ง์ฐ ๋ก๋ฉ ๊ตฌํ: ์ฑ๋ฅ ํฅ์์ ์ํด ํ์ํ ๋๋ง ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๋ก๋ํ์ญ์์ค.
- ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง: ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ์ ๊ธฐ์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ์ฌ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ํด๊ฒฐํ์ญ์์ค.
- ๋ช ํํ ์ปค๋ฎค๋์ผ์ด์ ์ฑ๋ ๊ตฌ์ถ: ์๋ก ๋ค๋ฅธ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋์์ ์์ ํ๋ ํ์ด ๊ฐ๋ฐ ๋ ธ๋ ฅ์ ์กฐ์ ํ๊ณ ํตํฉ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋๋ก ๋ช ํํ ์ปค๋ฎค๋์ผ์ด์ ์ฑ๋์ ํ๋ณดํ์ญ์์ค.
- ๊ฒฌ๊ณ ํ ์ค๋ฅ ์ฒ๋ฆฌ ๊ตฌํ: ๊ฐ๋ณ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋์ ์คํจ๋ฅผ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌํ๊ณ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํฅ์ ๋ฏธ์น์ง ์๋๋ก ๊ฒฌ๊ณ ํ ์ค๋ฅ ์ฒ๋ฆฌ๋ฅผ ๊ตฌํํ์ญ์์ค.
- ์๋ํ๋ ํ ์คํธ: ๋จ์ ํ ์คํธ, ํตํฉ ํ ์คํธ, ์๋ํฌ์๋ ํ ์คํธ๋ฅผ ํฌํจํ ํฌ๊ด์ ์ธ ์๋ํ ํ ์คํธ๋ฅผ ๊ตฌํํ์ฌ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์ง๊ณผ ์์ ์ฑ์ ๋ณด์ฅํ์ญ์์ค.
๊ฒฐ๋ก
๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ๋ผ์ฐํ ์ ๋ณต์กํ์ง๋ง ํ์ฅ ๊ฐ๋ฅํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ํ์์ ์ธ ์ธก๋ฉด์ ๋๋ค. ์ด ๊ธ์์ ์ค๋ช ํ ๋ค์ํ ๋ผ์ฐํ ์ ๋ต๊ณผ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ ์คํ๊ฒ ๊ณ ๋ คํจ์ผ๋ก์จ ์ฌ์ฉ์๋ฅผ ์ํ ์ํํ๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค. Single-Spa์ ๊ฐ์ ์ค์ ์ง์ค์ ๋ผ์ฐํฐ, ๋ชจ๋ ํ๋๋ ์ด์ , ์น ์ปดํฌ๋ํธ, ๋๋ Iframe ๋ฑ ์ฌ๋ฐ๋ฅธ ์ ๊ทผ ๋ฐฉ์์ ์ ํํ๋ ๊ฒ์ ํน์ ์๊ตฌ ์ฌํญ๊ณผ ์ฐ์ ์์์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค. ๋ถ๋ฆฌ, ์ผ๊ด๋ URL ๊ตฌ์กฐ ๋ฐ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ฐ์ ์ํ๋ ๊ฒ์ ๊ธฐ์ตํ์ญ์์ค. ์ ์ค๊ณ๋ ๋ผ์ฐํ ์ ๋ต์ ๊ตฌํํจ์ผ๋ก์จ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ์ํคํ ์ฒ์ ์ ์ฌ๋ ฅ์ ์ต๋ํ ๋ฐํํ๊ณ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ์ง์ ์ผ๋ก ๋ฐ์ด๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค.