확장 가능한 웹 애플리케이션을 위한 avaScript 마이크로프론트엔드 패턴

다작 작가로서 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 id="My-Custom-Element">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 id="My-Custom-Element">My Custom Element</h1>
        <p>This is a custom element used in a microfrontend architecture.</p>
      </div>
    `;
  }
}

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

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

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

---

101권

101 Books는 작가 Aarav Joshi가 공동 설립한 AI 기반 출판사입니다. 우리의 AI 기술은 출판 비용을 낮게 유지합니다. 일부 도서의 가격은 $4에 불과하여 지식에 대한 접근성을 높입니다.

Amazon에서 Golang Clean Code 책을 찾아보세요.

최신 소식을 받아보세요! 더 많은 타이틀과 특별 혜택을 보려면 Aarav Joshi를 검색하세요!

우리의 창작물

저희 작업 살펴보기:

인베스터 센트럴 | 투자자 중앙 스페인어 | 중앙독일 투자자 | 스마트리빙 | 시대와 메아리 | 수수께끼의 미스터리 | 힌두트바 | 엘리트 개발자 | JS 학교

---

Medium에 있습니다

테크 코알라 인사이트 | Epochs & Echoes World | 투자자중앙매체 | 수수께끼 미스터리 매체 | 과학과 신기원 매체 | 현대 힌두트바

위 내용은 확장 가능한 웹 애플리케이션을 위한 avaScript 마이크로프론트엔드 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!