마이크로 프론트엔드의 기법

마이크로 프론트엔드의 기법

1. 서버 측 템플릿 조합(Server-side template composition): 서버 측에서 개별 마이크로 프론트 엔드를 HTML 템플릿으로 조합하는 방법입니다. 이 방식은 서버에서 모든 컴포넌트를 하나로 묶어 최종 HTML 페이지를 생성하며, 클라이언트 측에서 추가 작업이 필요하지 않습니다.
2. 빌드 타임 통합(Build-time integration): 빌드 프로세스 중에 여러 마이크로 프론트 엔드를 하나의 번들로 통합합니다. 이 방식은 성능과 최적화 측면에서 이점이 있을 수 있지만, 각 마이크로 프론트 엔드 간의 느슨한 결합을 유지하기 어려울 수 있습니다.
3. iframe을 통한 런타임 통합(Run-time integration via iframe): 각 마이크로 프론트 엔드를 독립된 iframe 내에서 실행합니다. 이는 각 조각의 독립성을 유지하면서도 브라우저 내에서 동시에 로드하고 실행할 수 있게 해줍니다.
4. 웹 컴포넌트를 통한 런타임 통합(Run-time integration via Web Components): 웹 컴포넌트는 웹 표준으로, 마이크로 프론트 엔드를 사용자 정의 HTML 태그로 캡슐화합니다. 이를 통해 각 마이크로 프론트 엔드를 독립적으로 로드하고 서로 다른 프레임워크와 라이브러리 간에 부드럽게 통합할 수 있습니다.
5. 자바스크립트를 통한 런타임 통합(Run-time integration via Javascript): 자바스크립트를 사용하여 런타임에 동적으로 여러 마이크로 프론트 엔드를 로드하고 조합합니다. 이 방법은 다른 마이크로 프론트 엔드와 통신하고 상호 작용할 수 있는 클라이언트 측 로직을 제공하며, 광범위한 유연성을 제공합니다.

각 기법별 장단점과 예시

1. 서버 측 템플릿 조합(Server-side template composition)

장점

1. 성능: 클라이언트 측에서 별도의 조합이 필요 없어 빠른 렌더링이 가능합니다.
2. 간단한 클라이언트 측 로직: 클라이언트에서 추가 작업이 필요 없으므로 코드가 단순해집니다.
3. 검색 엔진 최적화(SEO): 정적인 HTML 페이지가 생성되므로 검색 엔진이 쉽게 인덱싱할 수 있습니다.
4. 프레임워크 독립성: 서버 측에서 조합하기 때문에 프론트 엔드 프레임워크에 독립적일 수 있습니다.
5. 높은 안정성: 서버에서의 통합은 더 안정적이고 예측 가능한 결과를 제공합니다.

단점

1. 유연성 부족: 런타임에서의 동적 변화에 대응하기 어려움.
2. 복잡한 서버 로직: 여러 마이크로 프론트 엔드의 조합 로직이 필요하므로 서버 측 코드가 복잡해질 수 있습니다.
3. 캐싱 제한: 개별 마이크로 프론트 엔드의 캐싱이 어려워 효율성이 떨어질 수 있습니다.
4. 개발 환경 일치 필요: 여러 마이크로 프론트 엔드의 개발 환경이 일치해야 할 수 있습니다.
5. 배포 복잡성: 개별 마이크로 프론트 엔드의 독립적인 배포가 어려울 수 있어, 전체 시스템에 영향을 줄 수 있습니다.

예시

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const header = '<div>Header</div>';
  const footer = '<div>Footer</div>';
  const content = '<div>Main Content</div>';

  const template = `${header}${content}${footer}`;
  res.send(template);
});

app.listen(3000);

2. 빌드 타임 통합(Build-time integration)

장점

1. 최적화: 빌드 타임에 통합되므로 최적화가 쉽습니다.
2. 성능 향상: 미리 통합되므로 로드 시간이 더 빠를 수 있습니다.
3. 강력한 형식 검사: 빌드 시점에서의 검사로 안정성이 높아질 수 있습니다.
4. 일관된 렌더링: 미리 조합되므로 렌더링이 일관되게 됩니다.
5. 높은 보안성: 빌드 타임 통합은 코드의 보안성을 높일 수 있습니다.

단점

1. 개발 복잡성: 빌드 과정이 복잡해지며, 설정과 관리가 어려워질 수 있습니다.
2. 유연성 부족: 런타임에서의 동적 변화가 어렵습니다.
3. 종속성 문제: 서로 다른 마이크로 프론트 엔드 간의 종속성 관리가 어려울 수 있습니다.
4. 배포 문제: 각 마이크로 프론트 엔드의 독립적인 배포가 어려워 전체 시스템에 영향을 줄 수 있습니다.
5. 높은 결합도: 마이크로 프론트 엔드 간의 느슨한 결합이 어려울 수 있어 유지보수가 복잡해질 수 있습니다.

예시

// webpack.config.js
module.exports = {
  entry: {
    app1: './src/app1.js',
    app2: './src/app2.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

3. iframe을 통한 런타임 통합(Run-time integration via iframe)

장점

1. 독립성: 각 마이크로 프론트 엔드가 독립된 환경에서 실행되므로 서로 영향을 미치지 않습니다.
2. 간단한 통합: iframe을 사용하므로 통합이 상대적으로 간단합니다.
3. 보안: 서로 다른 오리진의 콘텐츠를 로드할 때도 보안 문제가 적습니다.
4. 기존 앱 재사용: 기존의 완성된 웹 애플리케이션을 그대로 재사용할 수 있습니다.
5. 프레임워크 독립성: 각 마이크로 프론트 엔드는 다른 프레임워크를 사용할 수 있습니다.

단점

1. 성능 이슈: 여러 iframe을 로드하면 성능에 영향을 미칠 수 있습니다.
2. 스타일링 제약: 각 iframe은 독립적이므로 통일된 스타일링이 어렵습니다.
3. 통신 복잡성: iframe 간의 통신은 복잡하고 제약이 많을 수 있습니다.
4. SEO 문제: 검색 엔진이 iframe 내의 콘텐츠를 제대로 인덱싱하지 못할 수도 있습니다.
5. 모바일 호환성 문제: 일부 모바일 환경에서 iframe의 동작이 제한될 수 있습니다.

예시

<iframe src="micro-frontend-1.html"></iframe>
<iframe src="micro-frontend-2.html"></iframe>

4. 웹 컴포넌트를 통한 런타임 통합(Run-time integration via Web Components)

장점

1. 재사용성: 웹 컴포넌트는 재사용이 용이하므로 여러 응용 프로그램에서 활용할 수 있습니다.
2. 독립성: 각 마이크로 프론트 엔드가 독립적으로 작동하므로 유연한 개발이 가능합니다.
3. 표준화: 웹 컴포넌트는 웹 표준이므로 브라우저 호환성이 높습니다.
4. 프레임워크 독립성: 서로 다른 마이크로 프론트 엔드가 다른 프레임워크를 사용할 수 있습니다.
5. 일관된 스타일링: 웹 컴포넌트를 사용하면 스타일링이 더 일관되게 관리될 수 있습니다.

단점

1. 브라우저 호환성: 일부 오래된 브라우저에서는 웹 컴포넌트가 완벽히 지원되지 않을 수 있습니다.
2. 복잡한 상태 관리: 상태를 공유해야 하는 경우 복잡한 관리 로직이 필요할 수 있습니다.
3. 성능 문제: 많은 웹 컴포넌트를 로드하면 성능에 영향을 미칠 수 있습니다.
4. 기술 부족: 웹 컴포넌트가 상대적으로 새로운 기술이므로 충분한 지원이나 문서가 부족할 수 있습니다.
5. 스타일링 충돌: 글로벌 스타일과 웹 컴포넌트의 스타일 간의 충돌이 발생할 수 있습니다.

예시

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<h1>Hello, Web Component!</h1>';
  }
}

customElements.define('my-component', MyComponent);

<my-component></my-component>

5. 자바스크립트를 통한 런타임 통합(Run-time integration via Javascript)

장점

1. 높은 유연성: 동적으로 컴포넌트를 로드하고 관리할 수 있으므로 매우 유연합니다.
2. 빠른 개발: 자바스크립트를 사용하므로 개발 속도가 빠를 수 있습니다.
3. 프레임워크 독립성: 필요한 마이크로 프론트 엔드를 동적으로 로드할 수 있으므로 다양한 프레임워크와 호환됩니다.
4. 강력한 상호작용: 자바스크립트를 통해 복잡한 상호작용과 통신이 가능합니다.
5. 사용자 경험 개선: 런타임에 컴포넌트를 동적으로 변경하므로 사용자 경험을 맞춤화 할 수 있습니다.

단점

1. 복잡성: 동적 로딩과 관리는 복잡한 로직을 필요로 할 수 있습니다.
2. 보안 문제: 신뢰되지 않은 코드를 동적으로 로드할 위험이 있습니다.
3. 높은 종속성: 서로 다른 마이크로 프론트 엔드 간의 높은 종속성이 유지보수를 어렵게 만들 수 있습니다.
4. 성능 이슈: 동적 로딩은 초기 로딩 시간에 영향을 미칠 수 있습니다.
5. 테스팅 어려움: 동적 로딩과 높은 결합도로 인해 테스팅이 복잡해질 수 있습니다.

예시

<script>
  function loadMicroFrontend(url) {
    const script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);
  }

  loadMicroFrontend('micro-frontend-1.js');
  loadMicroFrontend('micro-frontend-2.js');
</script>

 

참고 자료

1. https://martinfowler.com/articles/micro-frontends.html
   - 마이크로 프론트엔드의 개념과 여러가지 기법, 문제점 등을 설명
2. https://blog.gangnamunni.com/post/saas-microfrontends/
   - 자바스크립트를 통한 런타임 통합 기법 중 Module Federation 구현 방법에 대해 설명