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 기능을 제공
최종적으로 빌드할때 하나의 코드로 빌드하는 것이 아닌 여러 코드로 빌드하고 빌드된 코드를 독립적인 애플리케이션 혹은 모듈로 사용할 수 있도록 하는 기술

PreviousTurborepo NextSPA 통합

Last updated 1 year ago