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