Micro Frontend Monorepo에서 Shared Packages — 완전 가이드

Source: Dev.to

당신의 마이크로 프론트엔드에는 아직 눈치채지 못한 조용한 버그가 있습니다.
사용자는 Auth MFE에서 로그인합니다. 인증 토큰은 Redux 스토어에 저장됩니다. 그 후 Products(모듈 연합을 통해 로드되는 다른 MFE)로 이동합니다. Products 페이지는 사용자가 로그인되지 않았다고 표시합니다.

왜일까요? Products MFE가 자체 Redux 스토어 인스턴스를 만들었기 때문입니다. Auth MFE는 별도의 인스턴스를 가지고 있습니다. 두 개의 스토어, 두 개의 상태, 완전히 동기화되지 않음.

이는 공유 패키지를 사용하지 않고 마이크로 프론트엔드를 구축할 때 팀이 가장 먼저 마주치는 문제(#1)입니다.

공유 패키지란?

모노레포 안에 있는 모든 MFE가 소비하는 내부 라이브러리입니다. 각 MFE가 자체 API 레이어, 자체 Redux 스토어, 자체 UI 컴포넌트를 구축하는 대신, packages/에 한 번만 만들고 어디서든 import 합니다.

프로덕션 MFE 모노레포를 묶어주는 공유 패키지

@myapp/api — 공유 API 레이어

• 요청 인터셉터(JWT 토큰 첨부)와 응답 인터셉터(401 처리 + 토큰 재발급)를 포함한 완전한 axios 인스턴스
• 요청 실패 큐 – 토큰이 만료되면 여러 API 호출이 동시에 실패합니다. 큐가 이를 보관하고 한 번만 재발급한 뒤 모두 재시도합니다.
• 도메인별로 정리된 API 폴더: Inventory-Apis/, Products-Apis/, Order-Apis/ 등, 실제 CRUD 함수 포함
• FormData + 진행률 추적을 이용한 파일 업로드 처리
• 에셋 URL 해석

@myapp/store — 공유 Redux 스토어

• auth reducer가 포함된 configureStore()
• 완전한 authSlice: 7개의 reducer(setIsLoggedIn, setAuthToken, setSessionExpired, setUserInfo, setSellerProfile, setLoading, updateUser) + 9개의 selector
• TypeScript에 최적화된 커스텀 훅(useAppDispatch, useAppSelector)
• Barrel export 패턴 — 모든 것을 하나의 import 경로로 제공
• Module Federation singleton: true 설정으로 모든 MFE에서 ONE 스토어 인스턴스 보장

@myapp/uicomponents — 공유 UI

• react-hot-toast 설정이 포함된 CustomToast
• 재사용 가능한 Button 및 Card 컴포넌트
• 디자인을 한 번만 바꾸면 모든 MFE가 자동으로 업데이트

핵심 연결 고리

• **Webpack resolve.alias**가 빌드 시 @myapp/store를 ./../packages/core/store에 매핑합니다.
• **Module Federation shared: { singleton: true }**가 런타임에 패키지를 중복되지 않게 합니다.

두 설정 모두 필요합니다:

• Alias만 사용 → 각 MFE가 자체 복사본을 번들링합니다.
• Singleton만 사용 → import 경로가 해결되지 않아 중복 번들이 생성됩니다.

환경 설정

• Local: localhost 포트를 사용합니다.
• Production: Nginx 경로를 사용합니다.

두 설정은 소스 코드에서 나란히 확인할 수 있습니다.

추가 자료

전체 가이드를 15개의 코드 블록과 함께 읽어보세요:
https://blog.srinudesetti.in/micro-frontend/react/shared-packages-micro-frontend-monorepo