하나의 도메인, 열 개의 독립 배포 —
Micro Frontend 백오피스 플랫폼

흩어지면 운영이 느리고, 합치면 배포가 느립니다

Host는 뼈대를, Remote는 화면만

Host가 인증·레이아웃·라우팅·권한을 소유하고, Remote는 ./App 진입점 하나만 노출합니다.

한 팀의 실수가 다른 팀 화면을 멈추지 못하게

Remote마다 Error Boundary로 감싸 로드 실패·렌더 에러를 그 화면 안에 가둡니다.

공통 인프라는 Host가 주고, Remote는 물려받습니다

공유 싱글턴 4개 — React 트리·라우터·쿼리 캐시가 전부 같은 상속 구조입니다.
대표 사례가 QueryClient입니다: Host 안에서는 상속해 캐시를 공유하고, 단독 실행이면 자체 생성합니다.

// remote App.tsx — 자기 Provider보다 위의 Context를 읽는다
const standaloneQueryClient = new QueryClient()

const App = () => {
  // Host 안이면 Host의 클라이언트를 상속해 캐시 공유, standalone이면 자체 생성
  const queryClient = useContext(QueryClientContext) ?? standaloneQueryClient
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}

단, 조건이 하나 있습니다 — Host와 Remote가 같은 react-query 인스턴스를 써야 합니다. 인스턴스가 다르면 Context도 달라서 상속이 끊기기 때문입니다.

상속의 실질 효과 — 쿼리 키가 remote 사이에서 공유됩니다

독립 배포를 안전하게 만드는 원칙들

실제 사고를 겪으며 만든 규칙들입니다. 지키는 일은 사람의 주의가 아니라 CI와 설정에 맡겼습니다.

프론트엔드 개발자가 아니어도 어드민을 만듭니다

플랫폼이 공통 문제를 미리 풀어두면, 각 팀에게 남는 일은 자기 화면뿐입니다.

그 결과 프론트엔드 개발자가 아닌 구성원들이 10개에 달하는 어드민을 대부분 질문 없이 직접 만들었고, 회사 전체 구성원이 사용하고 있습니다.