마이크로 프론트 엔드에 대해
마이크로 프론트엔드는 프론트엔드 아키텍처 패턴으로, 팀이 대규모이고 복잡한 프론트엔드 애플리케이션을 더 잘 구축하고 유지할 수 있도록 돕습니다. 이는 마이크로서비스 아키텍처의 개념을 차용하여 프론트엔드 애플리케이션을 더 작은 독립적인 부분으로 분리하며, 각 부분은 서로 다른 팀에서 개발, 테스트 및 배포할 수 있습니다.
전통적인 단일 프론트 엔드 응용 프로그램은 계속해서 확장되면서 유지 및 확장이 어려워질 수 있습니다. 마이크로 프론트 엔드의 목표는 응용 프로그램을 더 작고 관리 가능한 모듈로 분할하여 개발 팀이 이러한 모듈을 독립적으로 개발하고 배포할 수 있도록하여 팀의 효율성과 응용 프로그램의 유지 보수성을 향상시키는 것입니다.
ofa.js는 마이크로 프론트 엔드의 특성을 갖춘 기본적으로 개발된 프레임워크입니다. 다른 프레임워크와의 차이점은 ofa.js를 기반으로 개발된 컴포넌트, 페이지 및 애플리케이션을 사전 컴파일할 필요가 없다는 것입니다. React, Vue, Angular 등의 일부 프레임워크와 달리 이들은 노드.js 환경에서 빌드를 수행하여 클라이언트용 코드를 생성해야 합니다. 그러나 ofa.js의 개발 코드는 추가적인 빌드 단계 없이 정적 서버에 직접 배치할 수 있으며, 실시간으로 확인, 사용 및 실행할 수 있습니다.
ofa.js는 마이크로 프론트엔드를 따르는 특징을 가지고 있습니다.
독립적인 배포: 각 구성요소와 페이지는 독립적으로 개발, 테스트 및 배포할 수 있어 팀이 새로운 기능을 신속하게 출시하고 문제를 해결할 수 있게 합니다.
통합: ofa.js로 개발된 애플리케이션은 다양한 모듈을 함께 조합할 수 있습니다. 이는 애플리케이션, 페이지, 구성 요소 등의 방법으로 조합을 공유할 수 있습니다.
독립된 팀: 각 프론트엔드 모듈(구성 요소/페이지/애플리케이션)은 독립된 팀에 의해 개발과 유지보수가 가능하여 팀의 자율성과 혁신을 장려합니다.
공유 자원: ofa.js 프로젝트에서는 일관성과 효율성을 보장하기 위해 스타일, 구성 요소, 페이지 등과 같이 일부 공유 자원이 존재합니다.
요구에 따른 로딩: ofa.js의 애플리케이션은 필요에 따라 모듈을 로딩하여 애플리케이션의 성능과 로딩 속도를 향상시킬 수 있습니다.
ofa.js는 직접적으로 Vue 및 React와 같은 프레임워크로 개발된 컴포넌트를 사용할 수 없지만, ofa.js로 개발된 컴포넌트는 Vue 및 React에서 사용할 수 있으므로 다양한 기술 스택 개발자에게 더 큰 유연성과 확장성을 제공합니다.
Vue에서 웹 컴포넌트 사용:
React에서 Web Components를 사용하는 방법: