MFA Composition
Server-side template composition
์น ์๋ฒ๋ฅผ ํตํด HTML์ ๊ฐ์ ธ์ฌ ๋, Nginx์
Server-side include
๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ฉด HTML ๋ด์์ Nginx๊ฐ ์ดํดํ ์ ์๋ ํ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ํน์ ์ฌ๋กฏ์ ๋ค๋ฅธ ํ ํ๋ฆฟ์ ๊ฐ์ ธ์ ์นํํ ์ ์์ต๋๋ค.
Run-time intergartion (iframe)
๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋
<iframe>
ํ๊ทธ ๊ฒฝ๋ก์ ๊ฐ์ ๋๋ ๋ค๋ฅธ ์๋ฒ ๋ด๋ถ์ ํ์ด์ง ๊ฒฝ๋ก๋ฅผ ์ ๋ ฅiframe ์ธ๋ถ์ ๋ด๋ถ๋ ๊ธฐ์ ์ ์ผ๋ก ์์ ํ ๊ฒฉ๋ฆฌ๋ ์ํ (script, style)
์ต๊ทผ์๋ ์๋ ๋จ์ ๋ค๋ก ์ธํด iframe ๋ฐฉ์์ ์ง์ํ๋ ํธ
๋จ์
iframe ์์ญ์ ํฌ๊ธฐ ์กฐ์ ์ด ์ด๋ ต๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ ๋ ์ด์์์ ๋์ํ๊ธฐ ์ด๋ ต๋ค.
์๋ก์ด ์ปจํ ์คํธ๋ฅผ ๋ง๋ค์ด ์ฑ๋ฅ ์ค๋ฒํค๋๊ฐ ๋ฐ์ํ ์ ์๋ค.
iframe ๋ด๋ถ์๋ ์ ๊ทผ์ฑ๊ณผ ๊ด๋ จ๋ ์์๊ฐ ์ ๊ณต๋์ง ์์
SEO์ ์ข์ง ์์ ์ํฅ์ ์ค ์ ์์
iframe ๋ด๋ถ ์์ญ์ ์ปจํ ์ธ ๊ฐ ๋์์ด ๋ฉ์ถ๊ฑฐ๋ ์ง์ฐ๋ ์ ์์ด ์ฌ์ฉ์ ๊ฒฝํ ์ ํ
๋ณด์์ ์ทจ์ฝ
Build-time intergartion
๊ฐ๊ฐ์ ๋ง์ดํฌ๋ก์ฑ์ ๋ณ๊ฒฝ์ฌํญ์ ์ ์ฉํ๋ ค๋ฉด ๋ชจ๋ ๋ง์ดํฌ๋ก ์ฑ์ ๋ค์ ๋น๋ํ๊ณ ๋ฐฐํฌํด์ผ ํ๋ค.
MFA์์ ๋ ๋ฆฝ์ ์ธ ๋ฐฐํฌ ์์น์ ๋ง๊ธฐ ์๊ธฐ์ ๊ถ์ฅํ์ง ์๋ ์ ๊ทผ ๋ฐฉ์
Run-time intergartion (Web Component)
Web Components
Custom Element
,Shadow DOM
,Template Tag
์ธ ๊ฐ์ง ์ฃผ์ ๊ธฐ์ ๋ก ๊ตฌ์ฑ๋๋ฉฐ, ์ฝ๋ ์ถฉ๋ ์์ด ์ฌ์ฉํ๊ธฐ ์ํ ์บก์ํ๋ ๊ธฐ๋ฅ์ ๊ฐ์ง ์ปค์คํ ์๋ฆฌ๋จผํธ๋ฅผ ์์ฑํ์ฌ ์ฌ์ฌ์ฉ์ฑ์ ๋์ผ ์ ์์ต๋๋ค.์บก์ํ๋ ๊ธฐ๋ฅ: ์ปดํฌ๋ํธ ๋ด๋ถ CSS ์คํ์ผ๊ณผ JavaScript ๊ธฐ๋ฅ์ด ํด๋น ๋ถ๋ถ ๋ด์์ ๋ค๋ฅธ ๋ถ๋ถ์ ์ํฅ์ ์ฃผ์ง ์๊ฒ ๋๋ ๊ฒ
Custom Element โ ์ฌ์ฉ์๊ฐ ์ง์ ์ ์ํ HTML ํ๊ทธ์ฒ๋ผ ์ฌ์ฉ๋๋ ์๋ฆฌ๋จผํธ๋ก, ์ฌ์ฉ์๊ฐ ํ์์ ๋ง๊ฒ ์๋ก์ด ์๋ฆฌ๋จผํธ๋ฅผ ์ ์ํ๊ณ ์ด๋ฅผ HTML ๋ฌธ์์์ ๋ง์น ๋ด์ฅ ์๋ฆฌ๋จผํธ์ฒ๋ผ ์ฌ์ฉํ ์ ์๋ Javascript API ์ธํธ
Shadow DOM โ ์บก์ํ๋ ๊ทธ๋ฆผ์ DOM ํธ๋ฆฌ๋ฅผ ๋ฉ์ธ Document DOM์ผ๋ก ๋ถํฐ ๋ ๋ฆฝ์ ์ผ๋ก ๋ ๋๋๊ฒ ํ์ฌ ๊ฒฉ๋ฆฌ์ํค๊ณ ์ฐ๊ด๋ ๊ธฐ๋ฅ์ ์ ์ดํ๊ธฐ ์ํ Javascript API ์งํฉ
Element๋ฅผ Privateํ๊ฒ ์ ์งํ์ฌ Document์ ๋ค๋ฅธ ๋ถ๋ถ๊ณผ ์ถฉ๋์์ด script, style์ ์์ฑํ ์ ์๋ค.
HTML Template โ
<template>
,<slot>
์ ์ฌ์ฉํด ํํ, ๋ ๋๋ง๋ ํ์ด์ง์ ๋ํ๋์ง ์๋ ๋งํฌ์ ํ ํ๋ฆฟ์ ์์ฑํ ์ ์๊ฒ ํด์ค . ๊ทธ ํ ์ปค์คํ ์๋ฆฌ๋จผํธ์ ๊ตฌ์กฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ฌ๋ฌ๋ฒ ์ฌ์ฌ์ฉ ๊ฐ๋ฅ
์ฅ์
๋๋ฆฌ ๊ตฌํ๋๋ ์น ํ์ค
Custom Element์ Shadow DOM์ ํตํด ๊ธฐ์กด์ ํ ์ ์๋ ๊ฒฉ๋ฆฌ ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์์
์ปค์คํ ์๋ฆฌ๋จผํธ์ ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋๋ค์ ์ฌ๋ฌ ๋ค๋ฅธ application ์ฝ๋๋ค์ ํ์คํ๋ ๋ฐฉ๋ฒ์ผ๋ก ๊ฐ์ธ ์ฌ์ฉ ๊ฐ๋ฅ
๋จ์
์น ์ปดํฌ๋ํธ๋ฅผ ๋ฑ๋กํ๊ณ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ํด๋ผ์ด์ธํธ ๋จ์์ JS๊ฐ ๋์ํด์ผ ํ๋ค. (SSR ๋ง์ผ๋ก๋ ์๋จ)
๊ตฌํ ๋ธ๋ผ์ฐ์ ์์๋ Shadow DOM์ ์ฌ์ฉํ๊ธฐ ํ๋ฌ
Run-time intergartion (JS)
๊ฐ ๋ง์ดํฌ๋ก ํ๋ก ํธ ์ฑ์
<script>
ํ๊ทธ๋ฅผ ์ฌ์ฉํด์ ํ์ด์ง์ ํฌํจ์ํจ๋ค.๋ก๋์ ์ ์ญ ํจ์๋ฅผ ์ง์ ์ ์ผ๋ก ๋ ธ์ถ
์ฌ์ฉํ๋ ๊ณณ์์ ์ด๋ค ๋ง์ดํฌ๋ก ์ฑ์ ๋ง์ดํธํ ์ง ๊ฒฐ์ ํ๊ณ ๊ด๋ จ ํจ์๋ฅผ ํธ์ถํ์ฌ ๋ ๋๋งํ ์๊ธฐ์ ์์น๋ฅผ ์๋ ค์ค
Run-time intergartion (Module Federation)
๋ฒ๋ค๋ฌ(Vite, Webpack)์์
Module Federation
๊ธฐ๋ฅ์ ์ ๊ณต์ต์ข ์ ์ผ๋ก ๋น๋ํ ๋ ํ๋์ ์ฝ๋๋ก ๋น๋ํ๋ ๊ฒ์ด ์๋ ์ฌ๋ฌ ์ฝ๋๋ก ๋น๋ํ๊ณ ๋น๋๋ ์ฝ๋๋ฅผ ๋ ๋ฆฝ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ํน์ ๋ชจ๋๋ก ์ฌ์ฉํ ์ ์๋๋ก ํ๋ ๊ธฐ์
Last updated