Vue Academy · 강의

마이크로 프런트엔드 간 상태 공유

Pinia 스토어 공유, CustomEvent를 이용한 이벤트 버스와 공유 상태로서의 URL을 다룹니다.

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

공유 상태의 과제

독립적인 마이크로 프런트엔드도 서로 조율해야 합니다. 한 슬라이스에서 login하면 다른 슬라이스의 헤더가 업데이트되어야 합니다. 하지만 강한 결합은 마이크로 프런트엔드의 목적을 무너뜨립니다. 목표는 느슨하고 의도적인 통신입니다.

암묵적 전역 상태 피하기

모든 것을 window나 거대한 공유 저장소에 넣으면 모놀리스의 결합 구조가 다시 만들어집니다. 슬라이스 간에 명시적이고 최소한의 계약을 사용하여 팀이 독립적으로 발전할 수 있게 하십시오.

통신에 CustomEvent 사용하기

브라우저의 CustomEvent 인터페이스는 프레임워크와 무관한 전달 통로입니다. 한 마이크로 프런트엔드가 window에서 이벤트를 전달하면 다른 마이크로 프런트엔드가 이를 수신합니다. 공유 가져오기는 필요하지 않습니다.

const event = new CustomEvent("cart:add", {
  detail: { productId: 42, qty: 1 },
})
window.dispatchEvent(event)

이벤트 수신하기

다른 슬라이스는 addEventListener로 구독하고 event.detail에서 데이터를 읽습니다. 이렇게 하면 송신자와 수신자가 분리되며, 이벤트 이름과 데이터 형식에만 합의하면 됩니다.

window.addEventListener("cart:add", (e) => {
  console.log("Added", e.detail.productId)
})

뷰에서 수신기 정리하기

누수를 방지하고 컴포넌트가 다시 마운트될 때 중복 처리기가 등록되지 않도록 onMounted에서 수신기를 등록하고 onUnmounted에서 제거하십시오.

import { onMounted, onUnmounted } from "vue"

function onAdd(e) { /* ... */ }
onMounted(() => window.addEventListener("cart:add", onAdd))
onUnmounted(() => window.removeEventListener("cart:add", onAdd))

타입이 지정된 이벤트 계약

모든 팀이 이벤트 이름과 데이터 형식을 알 수 있도록 이벤트를 계약으로 문서화하십시오. 이는 마이크로 프런트엔드 간의 공개 API입니다.

// events contract
// "cart:add"    -> { productId: number, qty: number }
// "auth:login"  -> { userId: string }
// "auth:logout" -> {}

공유 상태로서의 URL

URL은 탐색과 필터를 위한 자연스러운 공유 저장소입니다. 전역이며 북마크할 수 있고 모든 슬라이스에서 읽을 수 있습니다. 활성 필터나 페이지처럼 여러 기능에 걸친 상태는 쿼리 params에 저장하십시오.

const params = new URLSearchParams(location.search)
const category = params.get("category") // shared across slices

URL 상태 업데이트하기

공유 필터 및 탐색 상태를 방문 기록 인터페이스로 URL에 기록하면 다른 사람과 공유할 수 있고 뒤로 가기에도 잘 대응할 수 있습니다. 모든 슬라이스는 새로운 URL을 읽어 반응합니다.

function setCategory(value) {
  const url = new URL(location.href)
  url.searchParams.set("category", value)
  history.pushState({}, "", url)
}

단일 피니아 저장소

한 페이지 안에서 더 풍부한 공유 상태가 필요하다면 단일 피니아 저장소를 사용할 수 있습니다. 단, 모든 슬라이스가 같은 인스턴스를 사용하도록 페더레이션 전체에서 피니아를 단일 인스턴스로 공유해야 합니다.

// federation config (both sides)
shared: {
  pinia: { singleton: true },
  vue: { singleton: true },
}

공유 저장소 사용하기

피니아를 단일 인스턴스로 공유하면 두 슬라이스에서 가져온 저장소가 동일한 저장소 인스턴스가 됩니다. 한쪽에서 기록한 상태를 다른 쪽에서 반응형으로 읽습니다.

// slice A writes
const auth = useAuthStore()
auth.login(user)

// slice B reads the same reactive state
const auth = useAuthStore()
console.log(auth.user)

전략 선택하기

CustomEvent — 느슨하고 프레임워크와 무관한 알림입니다.
URL — 탐색, 필터, 그 밖에 공유하거나 북마크할 수 있는 모든 항목에 사용합니다.
단일 피니아 저장소 — 풍부한 페이지 내 반응형 상태를 제공하며 singleton: true가 필요합니다.

필요를 충족하는 가장 느슨한 선택지를 우선하십시오.

빠른 확인

MFE 간 상태 공유를 이해했는지 확인해 보십시오.

복습

마이크로 프런트엔드 간에 상태를 공유하는 방법을 배웠습니다.

암묵적인 전역 상태보다 느슨하고 명시적인 계약을 우선하십시오.
window의 CustomEvent와 addEventListener를 사용하면 프레임워크와 무관하게 메시지를 전달할 수 있습니다. onUnmounted에서 수신기를 정리하십시오.
URL은 방문 기록 인터페이스를 통한 쿼리 params에 공유 가능한 탐색 및 필터 상태를 저장합니다.
단일 피니아 저장소는 풍부한 반응형 상태를 공유하지만, 페더레이션에서 singleton: true로 설정한 경우에만 가능합니다.

자주 묻는 질문

“마이크로 프런트엔드 간 상태 공유” 강의는 무료인가요?

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

“마이크로 프런트엔드 간 상태 공유”에서 뭘 배우나요?

Pinia 스토어 공유, CustomEvent를 이용한 이벤트 버스와 공유 상태로서의 URL을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“마이크로 프런트엔드 간 상태 공유” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기