원격 모듈 간 상태와 라우팅 공유하기

각 Module Federation 원격 애플리케이션은 독립적으로 빌드되고 배포되는 애플리케이션입니다. 해당 상태(React useState, Context, Zustand 저장소)는 자체 JavaScript 모듈 범위에 존재합니다. 호스트와 원격 애플리케이션은 상태를 자동으로 공유하지 않으므로 공유 방식을 명시적으로 설계해야 합니다.

가장 간단한 상태 공유 방식은 URL입니다. 모든 원격 애플리케이션은 원격 애플리케이션 간 통신 없이 URL 매개변수, 쿼리 문자열, 해시 값을 읽을 수 있습니다. 이는 기본 탐색 상태, 필터 값, 책갈피로 저장하거나 링크로 공유할 수 있어야 하는 상태에 적합합니다.

브라우저의 EventTarget을 통한 CustomEvents를 사용하면 원격 애플리케이션이 직접 가져오기 없이 통신할 수 있습니다. 한 원격 애플리케이션이 window.dispatchEvent(new CustomEvent('cart:updated', { detail: cart }))를 디스패치하면 다른 모듈(호스트 또는 다른 원격 애플리케이션)이 window.addEventListener('cart:updated', handler)로 수신 대기합니다. 공유 모듈은 필요하지 않습니다.

전용 "상태 원격 애플리케이션"을 만들어 Zustand 또는 Jotai 스토어를 노출합니다. 호스트와 다른 원격 애플리케이션이 이 상태 원격 애플리케이션에서 가져오면 공유 싱글턴이므로 동일한 스토어 인스턴스를 얻습니다. 인증, 장바구니, 사용자 환경 설정 등 복잡한 공유 상태에 강력하지만 배포 의존성이 추가됩니다.

셸(호스트)이 모든 공유 상태를 관리하고 원격 애플리케이션에 속성이나 Context를 통해 전달합니다. 원격 애플리케이션은 onCartUpdate와 같은 콜백을 받고 navigate를 속성으로 전달받습니다. 이렇게 하면 상태가 호스트에 중앙 집중화되지만 호스트가 원격 애플리케이션의 API를 알아야 하므로 긴밀한 결합이 발생합니다.

React Router의 기록 및 위치 상태는 라우터 구성 요소(BrowserRouter 또는 createBrowserRouter)가 제공합니다. Module Federation 설정에는 라우터가 정확히 하나만 있어야 합니다. 각 원격 애플리케이션에 배치하면 서로 경쟁하는 라우팅 컨텍스트가 여러 개 생겨 탐색 충돌이 발생합니다.

설계 원칙은 다음과 같습니다. 호스트(셸)가 라우터를 제공합니다. 원격 애플리케이션은 호스트에서 라우팅 속성을 받거나 URL을 직접 읽습니다. 원격 애플리케이션이 자체 BrowserRouter를 만들어서는 안 됩니다. 호스트의 라우터와 충돌해 전체 애플리케이션의 탐색이 중단되기 때문입니다.

React Context 값은 특정 React 인스턴스와 Context 객체에 연결됩니다. 호스트와 원격 애플리케이션에서 Context가 작동하려면 둘 다 같은 출처에서 동일한 Context 객체를 가져와야 합니다. 일반적으로 공유 상태 원격 애플리케이션이나 공유 유틸리티 패키지에서 가져옵니다. React 싱글턴이 모든 원격 애플리케이션에서 동일한 Context가 작동하도록 보장합니다.

깔끔한 Module Federation 아키텍처에서 셸(호스트)은 HTML 셸, 라우터 제공자, Auth 컨텍스트, 테마/디자인 토큰 제공자, 전역 탐색을 관리합니다. 원격 애플리케이션은 기능 영역 콘텐츠를 관리합니다. 셸은 구현 세부 정보를 알지 못한 채 원격 애플리케이션을 레이아웃에 조합합니다.

가장 큰 Module Federation 안티패턴은 호스트와 원격 애플리케이션 간의 긴밀한 결합입니다. 호스트가 원격 애플리케이션에서 형식을 가져오거나, 원격 애플리케이션이 호스트에서 구성 요소를 가져오거나, 둘 다 동시에 업데이트해야 하는 공통 npm 패키지를 공유하는 경우가 이에 해당합니다. 이러한 결합은 독립 배포의 목적을 무너뜨립니다.

호스트와 원격 애플리케이션 사이에 명시적인 계약을 정의하세요. 여기에는 원격 구성 요소가 받는 속성, 디스패치하는 CustomEvents, 읽는 URL 매개변수가 포함됩니다. 이러한 계약을 공유 타입 패키지의 TypeScript 인터페이스로 문서화하세요. 그러면 팀이 합의된 계약 안에서 독립적으로 발전할 수 있습니다.

Module Federation 아키텍처에서 React Router 제공자(BrowserRouter)는 어디에 배치해야 하나요?

Module Federation 원격 애플리케이션 간 상태 공유에는 URL 상태(가장 간단함), CustomEvents(느슨한 결합), 공유 상태 원격 애플리케이션(중앙 집중식 저장소), 호스트가 관리하며 속성으로 전달하는 상태를 사용할 수 있습니다. 호스트는 하나뿐인 라우터 제공자를 관리해야 하며, 원격 애플리케이션은 자체 라우터를 만들어서는 안 됩니다. TypeScript 인터페이스를 통한 명확한 통신 계약이 팀 간 결합을 줄이고 진정한 독립 배포를 가능하게 합니다.