0Pricing
Micro Frontends Architecture with Module Federation · 강의

원격 앱 간 상태와 유틸리티 공유

라이브러리뿐 아니라 상태 저장소, 디자인 토큰, 유틸리티 모듈까지 페더레이션된 원격 앱 간에 안전하게 공유하는 고급 패턴을 배웁니다.

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

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Beyond Libraries

Module Federation can share more than third-party libraries. You can expose your own stateful stores, utilities, and design tokens so all remotes use one consistent source.

Sharing a Utility Module

Expose a shared utilities package from one app and consume it everywhere, eliminating copy-pasted helper code.

exposes: { "./format": "./src/utils/format" }
// elsewhere
import { formatPrice } from "shared/format";

Sharing Design Tokens

Expose colors, spacing, and typography as a shared module so every micro frontend stays visually consistent without bundling its own copy of the theme.

exposes: { "./tokens": "./src/theme/tokens" }

Sharing a State Store

A shared store (e.g. a Redux or Zustand instance) lets remotes read and update common data. The key is sharing a single instance, not separate copies.

Why Singleton Matters for State

If two remotes each load their own store, their state diverges. Marking the store package singleton: true guarantees they share the same live instance.

shared: {
  "@app/store": { singleton: true }
}

Exposing the Store Instance

Expose the already-created store, not a factory, so consumers attach to the same object.

import { createStore } from "./store";
export const store = createStore();
// exposes: { "./store": "./src/store-instance" }

Consuming Shared State

Remotes import the shared store and subscribe to it like any local store, but updates from any remote are visible to all.

import { store } from "shell/store";
store.subscribe(() => render(store.getState()));

The Coupling Trade-off

Shared mutable state increases coupling. Overuse recreates the tight dependencies micro frontends try to avoid. Share state only for truly cross-cutting concerns like auth or cart.

Prefer Events for Loose Coupling

Where possible, prefer a shared event channel over a shared mutable store. Events keep remotes decoupled while still letting them react to each other.

Versioning Shared State Contracts

Treat the shape of shared state and utilities as a public contract. Changing it is a breaking change, so version it and communicate updates to consuming teams.

A Layered Sharing Strategy

A healthy strategy layers sharing:

  • Libraries: share freely (React, etc.)
  • Utilities and tokens: share for consistency
  • Mutable state: share sparingly and deliberately

Quick Check

Test your advanced sharing knowledge.

Recap

You learned advanced sharing:

  • Share utilities and design tokens for consistency
  • Share a singleton store for cross-cutting state
  • Expose the instance, not a factory
  • Prefer events to limit coupling
  • Version shared contracts carefully

Thoughtful sharing balances consistency with independence.

자주 묻는 질문

“원격 앱 간 상태와 유틸리티 공유” 강의는 무료인가요?

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

“원격 앱 간 상태와 유틸리티 공유”에서 뭘 배우나요?

라이브러리뿐 아니라 상태 저장소, 디자인 토큰, 유틸리티 모듈까지 페더레이션된 원격 앱 간에 안전하게 공유하는 고급 패턴을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 Micro Frontends Architecture with Module Federation을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Micro Frontends Architecture with Module Federation을(를) 시작하는 데 경험이 필요한가요?

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

“원격 앱 간 상태와 유틸리티 공유” 강의는 얼마나 걸리나요?

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

이 Micro Frontends Architecture with Module Federation 강의에서 코드를 작성하고 실행할 수 있나요?

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

이 강의의 모든 강의

  1. 공유 종속성 사용
  2. 싱글턴 모듈 및 버전 관리
  3. 동적 모듈 로딩
  4. 원격 앱 간 상태와 유틸리티 공유
← Micro Frontends Architecture with Module Federation(으)로 돌아가기