Shell과 Remote 앱 구성
React · TypeScript와 Module Federation으로 Shell 1개와 Remote 앱 4개를 구성했습니다. Remote 앱의 독립 실행 환경을 만들고 Shell에서의 앱 로딩과 라우팅을 통합했습니다.
대표 프로젝트로01 02 03
MICRO FRONTENDS · HAIi
React 마이크로 프론트엔드 구축
16개 사내 프로젝트를 위한 통합 어드민과 4개 팀의 독립 개발·배포 환경 구축
- 기간
- 2024.11 — 2025.11
- 역할
- 16개 사내 프로젝트 통합 어드민 · 프론트엔드 전담
CONTEXT
배경과 과제
16개 사내 프로젝트를 위한 통합 어드민의 프론트엔드를 전담했습니다. 4개 팀이 각 앱을 독립적으로 개발·배포하면서도 하나의 어드민에서 사용할 수 있도록 실행 환경과 라우팅을 구성했습니다.
COMPONENTS
구현 구성
- Shell · 통합 라우팅
- Remote 앱 × 4 · 독립 실행
- 앱별 배포 파이프라인
IMPLEMENTATION
설계와 구현
앱별 독립 배포
각 Remote 앱의 개발·배포 파이프라인과 Firebase CLI 기반 배포 스크립트를 작성했습니다. Git 브랜치 전략과 연계한 CI/CD 워크플로를 구성해 앱 단위로 업데이트할 수 있도록 했습니다.
공유 라이브러리와 환경 전환
공유 라이브러리 전략으로 중복 번들을 줄이고, 환경별 설정이 자동으로 전환되도록 구성했습니다. 독립 실행과 통합 환경 양쪽에서 사용할 수 있는 개발 기반을 마련했습니다.
OUTCOME
성과
- 4개 팀이 독립적으로 개발하고 배포할 수 있는 협업 구조를 구축했습니다.
- 전체 어드민을 재배포하지 않고 개별 앱을 업데이트할 수 있도록 했습니다.
- 공유 라이브러리 전략을 적용해 전체 번들 크기를 약 40% 절감했습니다.