이 게시물은 웹앱을 런타임 통합 Micro Frontends 아키텍처로 전환한 경험과 문제 해결 과정을 공유합니다.

핵심 내용

• 공통 UI 문제로 인해 전체 앱 롤백 위험을 줄이기 위해 Micro Frontends 전환 결정
• 18개 이상의 복잡한 기능을 가진 통합 HR SaaS인 flex에서 스쿼드별 독립 개발·배포 필요
• 참고 레퍼런스와 적합한 프레임워크 부재로 React 기반 Node.js 자체 Micro Frontends 프레임워크 제작
• 점진적 전환 불가로 빌드타임 코드 바꿔치기 플러그인 제작 및 인터페이스 호환 함수 일괄 구현으로 마이그레이션 수행
• 광범위 회귀 테스트를 위해 스쿼드와 협업, 문서 제공 및 Q&A로 전사적 전환 지원
• 결과적으로 UI 컴포넌트 단위 배포로 각 스쿼드의 독립성 확보 및 런타임 통합으로 사용자 경험 개선, 다만 개발자 경험 개선 과제 남음