Show pageOld revisionsBacklinksExport to PDFBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== Open Micro Frontends ====== > 오픈 마이크로 프론트엔드(Open Micro Frontends)란 마이크로 프론트엔드(Micro Frontend) 아키텍처의 한 형태로, 여러 개의 독립적인 프론트엔드 애플리케이션(모듈)을 하나의 큰 웹 애플리케이션으로 통합하는 방식이며, 특히 다양한 팀이나 기술 스택의 프론트엔드 모듈들을 자유롭게 결합하고 개방적으로 공유 및 확장할 수 있도록 하는 구조를 의미. 이는 마이크로서비스 아키텍처(MSA)의 개념을 프론트엔드에 적용하여, 각 팀이 독립적으로 개발하고 배포하면서도 유기적으로 연결된 사용자 경험을 제공하는 것이 핵심 ==== 주요 특징 ==== * **독립적인 개발 및 배포**: 각 마이크로 프론트엔드는 자체 기술 스택과 배포 파이프라인을 가질 수 있어 개발 속도와 유연성을 높임. * **모듈화**: 쇼핑몰의 상품 목록, 검색, 로그인 등 특정 기능별로 프론트엔드를 분리하여 관리. * **런타임 통합**: 여러 개의 분리된 프론트엔드 조각들을 사용자가 보는 시점에 동적으로 통합하여 하나의 페이지로 보여줌. * **기술 스택 다양성**: 각 팀이 자신의 모듈에 가장 적합한 기술(React, Vue 등)을 선택하여 사용할 수 있음. * **개방성 (Openness)**: 기존 모놀리식(Monolithic) 구조의 단점을 극복하고, 새로운 기술이나 서비스를 유연하게 추가/확장할 수 있는 개방적인 구조를 지향. ==== 왜 필요한가? ==== * **대규모 애플리케이션 관리**: 애플리케이션이 커질수록 발생하는 복잡성과 유지보수 어려움을 해결. * **개발팀의 자율성 증대**: 작은 팀이 특정 기능에 집중하여 개발하고 빠르게 배포할 수 있도록 지원. * **점진적 현대화**: 기존 레거시 시스템에 새로운 프론트엔드 기술을 점진적으로 도입하기 용이. ==== 기술적 구현 방법 (예시) ==== * **Webpack Module Federation**: Webpack 5의 핵심 기능 중 하나로, 여러 빌드 결과물을 런타임에 공유하고 로딩하는 방식. * **Web Components**: 표준 웹 기술을 사용하여 재사용 가능한 컴포넌트를 만드는 방식입. * **iframe**: 가장 간단한 방법이지만 성능 및 통신 이슈가 있을 수 있음. ==== 결론 ==== 오픈 마이크로 프론트엔드는 복잡한 웹 애플리케이션을 작고 독립적인 단위로 쪼개어 개발 효율성과 확장성을 극대화하면서도, 사용자에게는 끊김 없는 통합된 경험을 제공하는 현대적인 프론트엔드 아키텍처 패턴 public/computer/open_micro_frontends.txt Last modified: 2026/01/12 23:46by alex