올리브영, 모듈 페더레이션 PoC로 프론트엔드 혁신 시동!
by DD
7개월 전
조회수 10
모듈 페더레이션(MF)은 마이크로 프론트엔드 간 코드 공유를 위한 아키텍처 패턴이다.
Next.js 기반 PoC를 통해 MF의 핵심 개념과 구현 방법을 검증함.
코드 중복 감소, 독립적 배포 등 장점과 성능 이슈, 의존성 관리 등의 과제 제시.
모듈 페더레이션, 런타임 통합의 핵심
모듈 페더레이션(MF)은 마이크로 프론트엔드 간 런타임에 코드와 리소스를 공유한다. 구체적으로 호스트와 리모트 애플리케이션 간 모듈을 동적으로 로딩한다. 따라서 독립적 배포와 코드 재사용성을 동시에 확보하며, 빌드 시간 단축을 가능하게 한다.
MF의 장단점: 성능 vs 유연성
MF는 개발 속도 향상과 확장성 개선을 제공하지만, 초기 로딩 시간 증가와 의존성 관리의 어려움이 존재한다. 반면, Nx와 같은 도구를 활용하면 의존성 관리 문제를 완화하고, 개발 생산성을 높일 수 있다. 따라서 트레이드오프를 고려한 전략적 접근이 필요하다.
Next.js 환경에서의 MF 구현
Next.js 환경에서 MF 구현은 CSR과 SSR 방식으로 나뉜다. 구체적으로 Webpack 설정을 통해 호스트와 리모트 간 모듈을 연결한다. 따라서 getServerSideProps와 같은 Next.js의 기능을 활용하여 SSR 환경에서도 MF를 구현할 수 있다. 하지만, SSR 구현은 복잡성이 높다.
