MFA Composition

Server-side template composition

μ›Ή μ„œλ²„λ₯Ό 톡해 HTML을 κ°€μ Έμ˜¬ λ•Œ, Nginx의 Server-side include κΈ°λŠ₯을 μ‚¬μš©ν•˜λ©΄ HTML λ‚΄μ—μ„œ Nginxκ°€ 이해할 수 μžˆλŠ” ν‘œκΈ°λ₯Ό μ‚¬μš©ν•˜μ—¬ νŠΉμ • μŠ¬λ‘―μ— λ‹€λ₯Έ ν…œν”Œλ¦Ώμ„ 가져와 μΉ˜ν™˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Feed me</title>
  </head>
  <body>
    <h1>🍽 Feed me</h1>
    <!--# include file="$PAGE.html" -->
  </body>
</html>

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