Vue Academy · 강의

Vue에서 Webpack Module Federation 사용

ModuleFederationPlugin, exposes, remotes, 공유 의존성과 원격 컴포넌트 로딩을 다룹니다.

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

웹팩의 Module Federation

웹팩 5에는 Module Federation이 기본으로 포함되어 있습니다. 이를 통해 한 빌드가 다른 빌드에 모듈을 공개하고, 실행 시점에 다른 빌드의 모듈을 사용할 수 있습니다. 이는 실행 시점 마이크로 프런트엔드의 기반입니다.

호스트와 원격 앱

두 가지 역할이 있습니다. 원격 앱은 컴포넌트를 공개하고, 호스트 앱은 이를 사용합니다. 하나의 앱이 두 역할을 모두 맡을 수도 있습니다. 호스트 앱은 빌드 시점이 아니라 실행 시점에 웹을 통해 원격 앱의 코드를 불러옵니다.

ModuleFederationPlugin

웹팩의 plugins 배열에 ModuleFederationPlugin을 추가하여 페더레이션을 구성합니다. 이 플러그인의 옵션에서 이름, 공개할 항목, 사용할 항목, 공유 의존성을 정의합니다.

const { ModuleFederationPlugin } = require("webpack").container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "checkout",
    }),
  ],
}

이름 옵션

name은 이 빌드의 고유한 전역 식별자입니다. 호스트 앱은 이 이름으로 원격 앱을 참조합니다.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
})

공개 항목 설정(원격 앱)

원격 앱은 exposes에 공유할 모듈을 나열합니다. 키는 공개 경로이고, 값은 로컬 파일 경로입니다.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
  exposes: {
    "./CartButton": "./src/components/CartButton.vue",
  },
})

remoteEntry 매니페스트

원격 앱은 공개된 모듈을 설명하는 remoteEntry.js 매니페스트를 빌드합니다. 호스트 앱은 실행 시점에 이 파일을 불러와 원격 앱의 코드를 검색하고 가져옵니다.

// host loads: https://checkout.example.com/remoteEntry.js

원격 앱 설정(호스트 앱)

호스트 앱은 remotes에 사용할 원격 앱을 선언하고, 로컬 별칭을 원격 앱의 이름과 해당 remoteEntry.js URL에 연결합니다.

new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    checkout: "checkout@https://checkout.example.com/remoteEntry.js",
  },
})

공유 설정

shared에는 양쪽에서 공유해야 할 의존성을 나열하여 같은 의존성을 두 개 불러오는 일을 방지합니다. 뷰와 같은 프레임워크는 모든 마이크로 프런트엔드가 하나의 인스턴스를 사용하도록 반드시 공유해야 합니다.

new ModuleFederationPlugin({
  name: "shell",
  remotes: { /* ... */ },
  shared: ["vue"],
})

뷰를 단일 인스턴스로 설정하기

뷰는 페이지에 정확히 하나만 존재하는 단일 인스턴스여야 합니다. 뷰 인스턴스가 두 개면 반응성과 컴포넌트 식별성이 깨집니다. 버전 요구 사항과 함께 단일 인스턴스로 표시하십시오.

shared: {
  vue: {
    singleton: true,
    requiredVersion: "^3.4.0",
  },
}

원격 컴포넌트 사용하기

실행 시점에 원격 모듈을 동적으로 가져오십시오. 네트워크를 통해 로드되므로 동적 import()를 사용하며, 뷰에서는 일반적으로 defineAsyncComponent으로 감쌉니다.

import { defineAsyncComponent } from "vue"

const CartButton = defineAsyncComponent(() =>
  import("checkout/CartButton")
)

원격 앱 렌더링하기

비동기 컴포넌트를 템플릿에서 다른 컴포넌트와 동일하게 사용하십시오. 웹팩은 처음 렌더링할 때 원격 앱의 코드를 가져오고 이를 캐시합니다.

<template>
  <header>
    <CartButton />
  </header>
</template>

빠른 확인

뷰에서 Module Federation을 이해했는지 확인해 보십시오.

복습

웹팩의 Module Federation을 배웠습니다.

ModuleFederationPlugin이 페더레이션을 구성하고, name이 빌드를 식별합니다.
원격 앱은 exposes를 나열하고 remoteEntry.js 매니페스트를 생성합니다.
호스트 앱은 별칭을 name@URL/remoteEntry.js에 연결하는 remotes를 나열합니다.
shared가 중복 의존성을 방지하며, 뷰에는 singleton: true가 필요합니다.
동적 import("remote/Module")을 사용해 원격 앱을 가져오며, 대개 defineAsyncComponent과 함께 사용합니다.

자주 묻는 질문

“Vue에서 Webpack Module Federation 사용” 강의는 무료인가요?

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

“Vue에서 Webpack Module Federation 사용”에서 뭘 배우나요?

ModuleFederationPlugin, exposes, remotes, 공유 의존성과 원격 컴포넌트 로딩을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“Vue에서 Webpack Module Federation 사용” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기