Frontend Academy · 강의

마이크로 프런트엔드: Module Federation

Webpack Module Federation 또는 Vite Federation을 사용해 대규모 프런트엔드를 독립적으로 배포되는 원격 모듈로 분할하고, 셸 앱에서 이를 사용합니다.

마이크로 프런트엔드: Module Federation은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

마이크로 프런트엔드란?

대규모 프런트엔드를 독립적으로 개발하고 배포할 수 있는 여러 부분으로 나누는 방식입니다. 일반적으로 팀이나 비즈니스 영역마다 하나씩 둡니다. 각 부분은 자체 프레임워크, 저장소, 배포 처리 흐름, 심지어 기술 스택까지 사용할 수 있습니다. 셸 앱이 런타임에 이들을 연결합니다.

마이크로 프런트엔드를 사용하는 이유

프런트엔드 팀이 10개 이상인 조직은 하나의 저장소가 만드는 병목, 느린 빌드 시간, 서로 충돌하는 릴리스 일정이라는 한계에 부딪힙니다. 마이크로 프런트엔드를 사용하면 팀이 독립적으로 배포할 수 있지만, 그 대가로 아키텍처가 더 복잡해집니다.

모듈 페더레이션 — 핵심 기법

Webpack 모듈 페더레이션(Webpack 5, 플러그인을 통한 Vite에서도 사용 가능)을 사용하면 셸 앱이 독립적으로 배포된 원격 앱에서 런타임에 코드를 가져올 수 있습니다. 원격 앱은 특정 모듈을 노출하고 셸이 이를 사용합니다.

원격 구성

원격 앱은 webpack 구성에서 모듈을 노출합니다.

// remote app: webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  output: { publicPath: 'https://product-team.example.com/' },
  plugins: [
    new ModuleFederationPlugin({
      name: 'productApp',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductPage': './src/ProductPage',
        './productClient': './src/api/client'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

셸(호스트) 구성

셸은 가져올 원격 앱을 선언합니다.

// shell app: webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        product: 'productApp@https://product-team.example.com/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

원격 모듈 가져오기

동적 가져오기를 사용하면 webpack이 페더레이션 런타임을 통해 이를 확인합니다.

// shell src/App.tsx
import { lazy, Suspense } from 'react';

const ProductPage = lazy(() => import('product/ProductPage'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <ProductPage />
    </Suspense>
  );
}

Vite 페더레이션

Vite는 @originjs/vite-plugin-federation 플러그인을 통해 모듈 페더레이션을 지원하며, API도 유사합니다.

// vite.config.ts
import federation from '@originjs/vite-plugin-federation';

export default {
  plugins: [federation({
    name: 'shell',
    remotes: { product: 'https://product-team.example.com/remoteEntry.js' },
    shared: ['react', 'react-dom']
  })]
};

공유 종속성

React와 같은 라이브러리를 shared에 나열하면 두 번 번들로 묶이지 않습니다. 페더레이션 런타임은 런타임에 호환 가능한 가장 높은 버전을 확인합니다.

독립적 배포

각 원격 앱은 자체 빌드 및 배포 처리 흐름을 가집니다. 셸은 URL을 가리키므로 새 원격 앱을 배포하면 모든 사용 앱에 자동으로 적용됩니다.

앱 간 통신

직접 가져오기로 상태를 공유하지 말고 이벤트(CustomEvent), 작은 공유 버스 또는 postMessage를 사용합니다. 독립성을 유지하려면 경계를 명확하게 유지해야 합니다.

대안: iframe과 웹 컴포넌트

iframe: 가장 강력한 격리를 제공하지만 탐색과 CSS 사용이 불편합니다. 웹 컴포넌트: 브라우저에서 기본 지원되며 특정 프레임워크에 종속되지 않지만 공유 상태가 제한적입니다. Module Federation은 격리와 개발자 경험 사이에서 균형을 이룹니다.

장단점

장점: 독립적인 배포, 기술 선택의 자유, 팀 자율성입니다. 비용: 복잡한 빌드 설정, 공유 종속성 충돌, 디버깅하기 어려운 런타임 오류, 증가한 번들 복잡성입니다. 실제로 규모가 큰 조직에서만 사용할 가치가 있습니다.

사용을 피해야 할 때

단일 팀 프로젝트, MVP, 프런트엔드 인력이 100명 미만인 사이트에는 적합하지 않습니다. 복잡성에 따른 비용은 실제로 발생하므로 대부분의 팀은 대신 모노레포를 사용해야 합니다.

빠른 확인

마이크로 프런트엔드 아키텍처에서 Webpack Module Federation은 무엇을 가능하게 합니까?

복습: 마이크로 프런트엔드

독립적으로 배포할 수 있도록 팀이나 도메인별로 프런트엔드를 나눕니다. Module Federation(webpack 5 / Vite 플러그인)을 사용하면 셸이 런타임에 원격 모듈을 가져옵니다. 원격 애플리케이션은 모듈을 공개하고, 셸은 원격 애플리케이션을 선언하며, 양쪽에서 react 같은 종속성을 공유합니다. 앱 간 통신에는 이벤트를 사용합니다. 복잡하므로 실제로 규모가 큰 조직에서만 사용해야 합니다.

자주 묻는 질문

“마이크로 프런트엔드: Module Federation” 강의는 무료인가요?

네 — “마이크로 프런트엔드: Module Federation” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“마이크로 프런트엔드: Module Federation”에서 뭘 배우나요?

Webpack Module Federation 또는 Vite Federation을 사용해 대규모 프런트엔드를 독립적으로 배포되는 원격 모듈로 분할하고, 셸 앱에서 이를 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“마이크로 프런트엔드: Module Federation” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기