Open Micro Frontends

오픈 마이크로 프론트엔드(Open Micro Frontends)란 마이크로 프론트엔드(Micro Frontend) 아키텍처의 한 형태로, 여러 개의 독립적인 프론트엔드 애플리케이션(모듈)을 하나의 큰 웹 애플리케이션으로 통합하는 방식이며, 특히 다양한 팀이나 기술 스택의 프론트엔드 모듈들을 자유롭게 결합하고 개방적으로 공유 및 확장할 수 있도록 하는 구조를 의미. 이는 마이크로서비스 아키텍처(MSA)의 개념을 프론트엔드에 적용하여, 각 팀이 독립적으로 개발하고 배포하면서도 유기적으로 연결된 사용자 경험을 제공하는 것이 핵심

• 독립적인 개발 및 배포: 각 마이크로 프론트엔드는 자체 기술 스택과 배포 파이프라인을 가질 수 있어 개발 속도와 유연성을 높임.
• 모듈화: 쇼핑몰의 상품 목록, 검색, 로그인 등 특정 기능별로 프론트엔드를 분리하여 관리.
• 런타임 통합: 여러 개의 분리된 프론트엔드 조각들을 사용자가 보는 시점에 동적으로 통합하여 하나의 페이지로 보여줌.
• 기술 스택 다양성: 각 팀이 자신의 모듈에 가장 적합한 기술(React, Vue 등)을 선택하여 사용할 수 있음.
• 개방성 (Openness): 기존 모놀리식(Monolithic) 구조의 단점을 극복하고, 새로운 기술이나 서비스를 유연하게 추가/확장할 수 있는 개방적인 구조를 지향.

• 대규모 애플리케이션 관리: 애플리케이션이 커질수록 발생하는 복잡성과 유지보수 어려움을 해결.
• 개발팀의 자율성 증대: 작은 팀이 특정 기능에 집중하여 개발하고 빠르게 배포할 수 있도록 지원.
• 점진적 현대화: 기존 레거시 시스템에 새로운 프론트엔드 기술을 점진적으로 도입하기 용이.

• Webpack Module Federation: Webpack 5의 핵심 기능 중 하나로, 여러 빌드 결과물을 런타임에 공유하고 로딩하는 방식.
• Web Components: 표준 웹 기술을 사용하여 재사용 가능한 컴포넌트를 만드는 방식입.
• iframe: 가장 간단한 방법이지만 성능 및 통신 이슈가 있을 수 있음.

오픈 마이크로 프론트엔드는 복잡한 웹 애플리케이션을 작고 독립적인 단위로 쪼개어 개발 효율성과 확장성을 극대화하면서도, 사용자에게는 끊김 없는 통합된 경험을 제공하는 현대적인 프론트엔드 아키텍처 패턴