대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 2. 모듈 페더레이션 PoC

간단 소개

올리브영이 대규모 프론트엔드 아키텍처 개선을 위해 모듈 페더레이션(MF)을 Next.js 기반으로 PoC하고, 그 특징, 장단점 및 구현 시 발견된 개선점을 공유합니다.

AI Summary

모듈 페더레이션(MF) 정의 및 이점

MF는 JavaScript 애플리케이션 분산화 아키텍처로, 런타임에 코드/리소스를 공유하여 **마이크로 프론트엔드(MFE)**를 구현, 코드 중복 감소 및 독립적 배포를 가능하게 합니다.
호스트, 리모트, Shared Dependencies 개념이 핵심입니다. MF의 도전 과제 및 Next.js PoC
모놀리식 대비 독립 개발/배포 장점에도 불구하고, 초기 로딩 증가, 의존성 충돌, 개발/배포 복잡성, SEO 등 기술적 이슈가 존재합니다.
올리브영 Next.js 기반 PoC에서 CSR/SSR 환경 구현을 검증했으나, Page Router만 지원하며 SSR 구현이 특히 어려웠습니다. PoC를 통한 개선점 및 향후 계획
PoC 결과, Webpack 설정/타입 정의 수동 작업 등 자동화 및 체계화 필요성이 드러났습니다.
향후 Nx 활용, 설계 표준화를 통해 불편함을 해결하고 MFE 아키텍처를 정착시킬 계획입니다.