확장 가능한 웹 애플리케이션을 위한 avaScript 마이크로프론트엔드 패턴-JS 튜토리얼-php.cn

avaScript Microfrontend Patterns for Scalable Web Applications

다작 작가로서 Amazon에서 제 책을 살펴보시기 바랍니다. 지속적인 지원을 받으려면 Medium에서 내 작업을 팔로우하는 것을 잊지 마세요. 감사합니다! 여러분의 참여는 매우 소중합니다!

마이크로프론트엔드 아키텍처는 유지 관리가 가능한 대규모 웹 애플리케이션을 구축하기 위한 솔루션으로 상당한 관심을 얻었습니다. 수많은 대규모 프로젝트에 참여하면서 모놀리식 프런트엔드를 더 작고 관리하기 쉬운 단위로 분해하는 것의 이점을 직접 경험했습니다. 이 문서에서는 애플리케이션 유연성과 확장성을 향상시키는 8가지 JavaScript 마이크로프론트엔드 아키텍처 패턴에 대해 자세히 설명합니다.

모노레포 구조

마이크로프런트엔드 구현에 있어 중요한 초기 결정에는 코드베이스 구성이 포함됩니다. 단일 저장소 내에 여러 프런트엔드 애플리케이션을 수용하는 단일 저장소 구조는 매우 유용한 것으로 입증되었습니다.

Monorepos는 마이크로프런트엔드 간의 코드 공유를 단순화하고 버전 제어를 간소화합니다. 일관성을 강화하고 종속성 관리를 단순화합니다.

샘플 모노레포 구조:

<code>my-microfrontend-app/
├── packages/
│   ├── header/
│   ├── footer/
│   ├── product-list/
│   └── shopping-cart/
├── shared/
│   ├── components/
│   └── utils/
├── package.json
└── lerna.json</code>

로그인 후 복사

각 마이크로프런트엔드는 packages 디렉터리 내에 별도의 패키지로 존재합니다. 공유 리소스는 shared 디렉터리에 있습니다.

모듈 연합

Webpack 5의 모듈 페더레이션은 애플리케이션 간에 코드를 동적으로 로드하고 공유합니다. 이는 런타임 구성 요소 로딩을 지원하는 마이크로프론트엔드에 이상적입니다.

기본 모듈 연합 구성:

<code>// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...other webpack config
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};</code>

로그인 후 복사

이렇게 하면 다른 마이크로프런트엔드에서 사용할 수 있도록 Button의 app1 구성 요소가 노출됩니다.

맞춤 요소

웹 구성 요소, 특히 맞춤 요소는 재사용 가능하고 프레임워크에 구애받지 않는 구성 요소를 만듭니다. 이는 팀이 다양한 프레임워크를 활용할 수 있는 마이크로프런트엔드 아키텍처에서 매우 중요합니다.

맞춤 요소 예:

<code>class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `

        /* Styles for the custom element */
      <div>
        <h1>My Custom Element</h1>
        <p>This is a custom element used in a microfrontend architecture.</p>
      </div>
    `;
  }
}

customElements.define('my-custom-element', MyCustomElement);</code>

로그인 후 복사

이 요소는 기본 프레임워크에 관계없이 마이크로프런트엔드 전체에서 작동합니다.

단일 SPA 프레임워크

Single-SPA는 전용 마이크로프론트엔드 프레임워크입니다. 독립적으로 개발 및 배포된 마이크로프런트엔드를 통해 애플리케이션 구축을 용이하게 합니다.

기본 단일 SPA 설정:

<code>import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'app1',
  app: () => import('./app1/main.js'),
  activeWhen: '/app1',
});

registerApplication({
  name: 'app2',
  app: () => import('./app2/main.js'),
  activeWhen: '/app2',
});

start();</code>

로그인 후 복사

app1과 app2을 등록하여 경로에 따라 활성화합니다.

이벤트 중심 커뮤니케이션

느슨하게 결합된 마이크로프론트엔드 간의 효과적인 커뮤니케이션은 필수적입니다. 게시/구독 또는 맞춤 이벤트를 사용하는 이벤트 기반 접근 방식은 매우 효과적입니다.

맞춤 이벤트 예:

<code>// In one microfrontend
const event = new CustomEvent('itemAdded', { detail: { itemId: 123 } });
window.dispatchEvent(event);

// In another microfrontend
window.addEventListener('itemAdded', (event) => {
  console.log('Item added:', event.detail.itemId);
});</code>

로그인 후 복사

내부 정보를 노출하지 않고도 소통이 가능합니다.

공유 상태 관리

이벤트 기반 커뮤니케이션은 많은 상황에서 충분하지만 중앙 집중식 상태 관리(Redux, MobX)는 마이크로프런트엔드 전체에서 일관성을 보장합니다.

기본 Redux 예:

<code>my-microfrontend-app/
├── packages/
│   ├── header/
│   ├── footer/
│   ├── product-list/
│   └── shopping-cart/
├── shared/
│   ├── components/
│   └── utils/
├── package.json
└── lerna.json</code>

로그인 후 복사

공유 상태는 일관된 데이터 액세스를 보장합니다.

자산 탑재 전략

성능이 중요합니다. 지연 로딩과 마찬가지로 스마트 자산 로딩이 중요합니다. 반응 예시:

<code>// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...other webpack config
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};</code>

로그인 후 복사

지연 로딩은 초기 번들 크기를 줄입니다.

표준화된 빌드 프로세스

배포를 단순화하고 오류를 줄이려면 마이크로프런트엔드 전체에서 일관된 빌드 프로세스가 중요합니다. package.json 예:

<code>class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `

        /* Styles for the custom element */
      <div>
        <h1>My Custom Element</h1>
        <p>This is a custom element used in a microfrontend architecture.</p>
      </div>
    `;
  }
}

customElements.define('my-custom-element', MyCustomElement);</code>

로그인 후 복사

일관적인 빌드 도구는 균일성을 보장합니다.

이러한 패턴은 마이크로프런트엔드 아키텍처를 향상시킵니다. 그러나 각 프로젝트는 고유하며 적절한 패턴을 선택하는 것이 중요하다는 점을 기억하세요. 성공적인 구현을 위해서는 신중한 계획이 중요합니다.