KR20230054474A

KR20230054474A - 마이크로프론트엔드 시스템, 서브애플리케이션 로딩 방법, 전자 디바이스, 컴퓨터 프로그램 제품 및 컴퓨터로 판독 가능한 저장 매체

Info

Publication number: KR20230054474A
Application number: KR1020237010638A
Authority: KR
Inventors: 시밍 천; 리앙치 루오; 지앙송 천; 펑 쟝
Original assignee: 텐센트 테크놀로지(센젠) 컴퍼니 리미티드
Priority date: 2020-12-21
Filing date: 2021-12-10
Publication date: 2023-04-24
Also published as: JP7451825B2; CN114647518A; WO2022135178A1; JP2023541033A; US20230036980A1

Abstract

본 출원의 실시예는 마이크로프론트엔드 시스템, 서브애플리케이션 로딩 방법, 전자 디바이스, 컴퓨터 프로그램 제품 및 컴퓨터로 판독 가능한 저장 매체를 제공한다. 상기 마이크로프론트엔드 시스템은 라우팅 등록 서비스, 명령줄 도구 및 마이크로프론트엔드 실행 프레임워크를 포함한다. 상기 라우팅 등록 서비스는 독립적으로 유지되고 실행되는 노드 백엔드 서비스이며, 기본 애플리케이션의 상기 마이크로프론트엔드 실행 프레임워크를 위한 서브애플리케이션의 라우팅 정보, 상기 서브애플리케이션의 로딩 방식 및 상기 서브애플리케이션의 배포 정보를 제공하도록 구성되고; 상기 명령줄 도구는 명령줄을 통해 서브애플리케이션 생성 기능, 서브애플리케이션 액세스 기능 및 서비스 등록 기능을 제공하도록 구성되고; 상기 마이크로프론트엔드 실행 프레임워크는 상기 기본 애플리케이션에서 실행되는 프레임워크이며, 취득된 네트워크 요청에 기초하여 상기 서브애플리케이션을 로딩 및 실행하고 다중 프레임워크 서브애플리케이션 실행 능력을 제공하도록 구성된다.

Description

마이크로프론트엔드 시스템, 서브애플리케이션 로딩 방법, 전자 디바이스, 컴퓨터 프로그램 제품 및 컴퓨터로 판독 가능한 저장 매체

관련 출원

본 출원은 2020년 12월 21일에 출원된 중국 특허출원 제202011520184.6호에 대한 우선권을 주장하며, 그 전체 내용은 참조로 본 출원에 통합된다.

본 출원의 실시예는 인터넷 기술 분야에 관한 것으로, 마이크로프론트엔드(micro-frontend) 시스템, 서브애플리케이션(sub-application) 로딩 방법, 전자 디바이스, 컴퓨터 프로그램 제품 및 컴퓨터로 판독 가능한 저장 매체에 관한 것이지만 이에 한정되지 않는다.

프론트엔드 개발 과정에서, 개발 프로젝트가 점점 커지고 있다. 또한 제품 기능이 복잡하고 코드 충돌이 자주 발생하며 그 영향이 크다. 일련의 문제에 대응하여, 마이크로프론트엔드가 등장했다. 백엔드 마이크로 서비스(backend micro-service)의 개념을 참조하면 마이크로프론트엔드의 경우, 거대한 프론트엔드 프로젝트가 소규모 프로젝트로 분할된다. 이러한 소규모 프로젝트는 독립적으로 개발되고 실행될 수 있다. 전체 시스템은 이러한 소규모 프로젝트의 협력을 통해 모든 페이지의 표시 및 상호작용을 달성한다.

관련 기술의 마이크로프론트엔드 프레임워크 라우팅 서비스는 Nginx 서비스에 의해 포워딩되기 때문에 비효율적이다. 중앙 라우팅(central routing)은 Nginx 서비스의 안정성에 의존하므로 재해 복구 솔루션이 복잡하다. Nginx 서비스는 Nginx 서비스 구성에 크게 의존한다. 구성을 수정하는 경우, 중앙 라우팅 Nginx 서비스를 다시 시작해야 하므로 유지 관리 비용이 많이 든다.

본 출원의 실시예는 마이크로프론트엔드 시스템, 서브애플리케이션 로딩 방법, 전자 디바이스, 컴퓨터 프로그램 제품 및 컴퓨터로 판독 가능한 저장 매체를 제공한다. 독립적으로 유지 및 실행되는 노드 서비스를 통해 확장 및 재해 복구 능력이 향상되고, 다중 프레임워크 서브애플리케이션 실행 능력이 제공된다.

본 출원의 실시예에서의 기술 솔루션은 다음과 같이 구현된다:

본 출원의 일 실시예는 마이크로프론트엔드 시스템을 제공하며, 상기 마이크로프론트엔드 시스템은,

라우팅 등록 서비스(routing registration service), 명령줄 도구(command line tool) 및 마이크로프론트엔드 실행 프레임워크(micro-frontend running framework)를 포함하고,

상기 라우팅 등록 서비스는 독립적으로 유지되고 실행되는 노드 백엔드 서비스(Node backend service)이며, 기본 애플리케이션(primary application)의 상기 마이크로프론트엔드 실행 프레임워크를 위한 서브애플리케이션의 라우팅 정보, 상기 서브애플리케이션의 로딩 방식 및 상기 서브애플리케이션의 배포 정보를 제공하도록 구성되고;

상기 명령줄 도구는 명령줄을 통해 서브애플리케이션 생성 기능, 상기 서브애플리케이션 액세스 기능 및 서비스 등록 기능을 제공하도록 구성되고;

상기 마이크로프론트엔드 실행 프레임워크는 상기 기본 애플리케이션에서 실행되는 프레임워크이며, 취득된 네트워크 요청에 기초하여 상기 서브애플리케이션을 로딩 및 실행하고 다중 프레임워크 서브애플리케이션 실행 능력을 제공하도록 구성된다.

본 출원의 일 실시예는 서브애플리케이션 로딩 방법을 제공하며, 상기 서브애플리케이션 로딩 방법은 전자 디바이스에 의해 실행되고 마이크로프론트엔드 시스템으로서 구성되며, 상기 마이크로프론트엔드 시스템은 라우팅 등록 서비스, 서브애플리케이션 로딩 모듈 및 서브애플리케이션 실행 모듈을 포함하고; 상기 서브애플리케이션 로딩 방법은,

서브애플리케이션을 액세스하도록 구성된 네트워크 액세스 요청을 취득하는 단계 - 상기 네트워크 액세스 요청은 상기 서브애플리케이션의 URL(Uniform Resource Locator) 주소를 실어 전달함 -;

상기 서브애플리케이션의 URL 주소에 기초하여 상기 라우팅 등록 서비스로부터 대응하는 라우팅 정보를 가져오는 단계;

상기 라우팅 정보에 기초하여, 상기 액세스될 페이지가 서브애플리케이션 페이지인 것으로 결정되는 경우, 상기 서브애플리케이션 로딩 모듈이 상기 라우팅 정보에 기초하여 상기 라우팅 등록 서비스로부터 상기 라우팅 등록에 대응하는 서브애플리케이션 자원을 취득하는 단계;

상기 서브애플리케이션 자원의 로딩이 필요한 경우, 상기 서브애플리케이션 로딩 모듈이 상기 서브애플리케이션 자원을 로딩하는 단계; 및

상기 서브애플리케이션 실행 모듈이 상기 서브애플리케이션 자원을 실행하고, 상기 서브애플리케이션 페이지를 렌더링하는 단계를 포함한다.

본 출원의 일 실시예는 실행 가능한 명령어를 저장하는, 컴퓨터로 판독 가능한 저장 매체를 제공하며, 상기 실행 가능한 명령어는 프로세서에 의해 실행될 때, 상기 마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법을 구현하도록 구성된다.

본 출원의 일 실시예는 메모리 및 프로세서를 포함하는 전자 디바이스를 제공하며, 상기 메모리는 컴퓨터 프로그램을 저장하고, 상기 프로세서는 상기 컴퓨터 프로그램을 사용하여 상기 마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법을 수행하도록 구성된다.

본 출원의 일 실시예는 컴퓨터 프로그램을 포함하는 컴퓨터 프로그램 제품을 제공하며, 상기 컴퓨터 프로그램은 프로세서에 의해 실행될 때, 상기 마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법을 구현한다.

본 출원의 이 실시예는 다음과 같은 유익한 효과를 갖는다:

본 출원의 일 실시예에 의해 제공되는 마이크로프론트엔드 시스템은 라우팅 등록 서비스, 명령줄 도구 및 마이크로프론트엔드 실행 프레임워크를 포함한다. 독립적으로 유지되고 실행되는 노드 백엔드 서비스를 통해 매우 우수한 확장 및 재해 복구 능력이 제공될 수 있으며; 라우팅 등록 서비스는 기본 애플리케이션의 프레임워크를 실행하는 마이크로프론트엔드에 대해 서브애플리케이션의 라우팅 정보 및 로딩 방식과 서브애플리케이션의 배포 정보를 제공한다. 명령줄 도구는 서브애플리케이션 생성, 서브애플리케이션 액세스 및 서비스 등록 기능을 제공한다. 다중 프레임워크 서브애플리케이션 실행 능력(multi-framework sub-application running ability)이 제공된다.

도 1은 본 출원의 일 실시예에 따라 제공되는 마이크로프론트엔드 시스템의 구성 구조의 개략도이다.
도 2는 본 출원의 일 실시예에 따라 제공되는 마이크로프론트엔드 시스템의 다른 구성 구조의 개략도이다.
도 3은 본 출원의 일 실시예에 따라 제공되는 마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법의 구현 프로세스의 개략도이다.
도 4는 본 출원의 일 실시예에 따라 제공되는 마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법의 다른 구현 프로세스의 개략도이다.
도 5는 본 출원의 일 실시예에 따라 제공되는 마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법의 구현 프로세스의 개략도이다.
도 6은 본 출원의 일 실시예에 따라 제공되는 마이크로프론트엔드 시스템의 아키텍처의 개략도이다.
도 7은 본 출원의 일 실시예에 따라 제공되는 마이크로프론트엔드 시스템의 통신 메커니즘의 개략도이다.
도 8은 본 출원의 일 실시예에 따라 제공되는 서브애플리케이션 로딩 모듈에 의해 서브애플리케이션 자원을 로딩하는 구현 프로세스의 개략도이다.
도 9는 본 출원의 일 실시예에 따라 제공되는 JS 샌드박스의 개략 설계도이다.
도 10은 본 출원의 일 실시예에 따라 제공되는 애플리케이션 계층화의 개략도이다.

본 출원의 목적, 기술 솔루션 및 이점을 보다 명확하게 하기 위해, 이하에서는 첨부된 도면을 참조하여 본 출원을 더욱 상세하게 설명한다. 설명된 실시예는 본 출원에 대한 한정으로 간주되어서는 안 된다. 창의적인 노력 없이 당업자에 의해 획득된 다른 모든 실시예는 본 출원의 보호 범위 내에 속한다.

이하의 설명에서, 관련된 "일부 실시예"는 모든 가능한 실시예의 서브세트를 설명한다. 그러나, "일부 실시예"는 모든 가능한 실시예의 동일한 서브세트 또는 상이한 서브세트일 수 있고, 충돌 없이 서로 결합될 수 있음을 이해할 수 있다.

달리 정의되지 않는 한, 본 실시예에서 사용되는 모든 기술 및 과학 용어의 의미는 본 출원의 실시예가 속하는 기술 분야의 통상의 지식을 가진 자에 의해 일반적으로 이해되는 것과 동일하다. 본 출원의 실시예에서 사용된 용어는 단지 본 출원의 실시예의 목적을 설명하려는 의도로 사용된 것으로, 본 출원을 한정하려는 의도가 아니다.

본 출원의 실시예를 더 상세히 설명하기 전에, 본 출원의 실시예에 관련된 용어에 대해 설명하고, 본 출원의 실시예에 관련된 용어는 이하의 설명에 적용될 수 있다.

1) Vue 프레임워크: 사용자 인터페이스를 구축하기 위한 프로그레시브 프론트엔드 프레임워크의 세트이다. Vue의 핵심 라이브러리는 뷰 계층(view layer)에만 관심이 있다.

2) React 프레임워크: 사용자 인터페이스의 JavaScript(JS) 라이브러리를 구축하도록 구성되며, 주로 사용자 인터페이스를 구축하도록 구성된다. React는 진술 코드(statement code)와 같은, 다양한 유형의 파라미터를 송신하고 사용자 인터페이스를 렌더링할 수 있거나, 정적 요소일 수 있거나, 동적 변수를 송신할 수 있으며 상호작용 애플리케이션 구성요소일 수도 있다.

3) JavaScript 샌드박스 메커니즘: 실행 중인 프로그램(running program)에 격리 환경을 제공하기 위한 보안 메커니즘이다. JS 코드는 외부와 격리된 실행 환경(execution environment)을 제공함으로써 실행된다. JavaScript 샌드박스 메커니즘은 유지관리 비용을 줄이기 위해, 독립적인 온라인 비간섭 코드(non-interfering code)를 분리하는 데 도움이 되도록 마이크로프론트엔드에서 자주 사용된다.

4) Web Worker: HTML(HyperText Markup Language, 하이퍼텍스트 마크업 언어)5에 의해 제공되는 자바스크립트 멀티스레드 솔루션이다. 계산량이 많은 일부 코드는 사용자 인터페이스를 동결(freezing)하지 않고 Web Worker에서 실행될 수 있다. Web Worker는 다른 스크립트와 독립적이며 페이지의 성능에 영향을 미치지 않을 것이다.

5) 섀도우 문서 객체 모델(shadow document object model): 하이퍼텍스트 마크업 언어의 규범(norm)이며, 문서 렌더링 전에 문서 객체 모델 요소 서브트리의 보간을 허용한다. 섀도우 문서 객체 모델은 브라우저 개발자가 자신의 HTML 레이블, CSS(Cascading Style Sheet) 및 특정 JavaScript 코드를 패키징할 수 있게 하며, 개발자는 또한 <input>, <video> 및 <audio>와 유사한 맞춤형 일급 레이블(customized first-level label)을 생성할 수 있다.

6) Props 송신: 부모 구성요소(parent component)의 템플릿은 자식 구성요소(child component)를 포함한다. 부모 구성요소는 데이터 또는 파라미터를 자식 구성요소에게 순방향으로 송신해야 한다. 자식 구성요소는 데이터 또는 파라미터를 수신한 후 다른 파라미터에 따라 다른 콘텐츠를 렌더링하거나 조작을 실행한다. 순방향으로 데이터를 송신하는 이 프로세스는 Props에 의해 달성된다.

7) 커스텀 이벤트(custom event) 송신: JavaScript와 HTML 간의 상호작용은 이벤트를 통해 달성된다. 이벤트는 문서 또는 브라우저 윈도에서 발생하는 특정 상호작용 순간이다. 특정 커스텀 이벤트는 JavaScript를 통해 언제든지 트리거될 수 있으며, 이러한 이벤트는 브라우저에 의해 생성된 이벤트와 동일하다.

8) PostMessage: HTML5에 의해 도입된 애플리케이션 프로그래밍 인터페이스 방법으로, 서로 다른 소스로부터의 스크립트들이 비동기 방식으로 효과적으로 통신할 수 있도록 지원한다. 이는 크로스 텍스트(cross-text) 문서와 다중윈도(multi-window) 및 크로스 도메인(cross-domain) 메시지 송신을 달성할 수 있다. PostMessage는 대부분 윈도 간의 데이터 통신을 달성하도록 구성되며, 이는 크로스 도메인 통신을 위한 효과적인 솔루션이기도 하다.

9) Iframe: 다른 문서를 포함하는 인라인 프레임워크(즉, Iframe)를 생성하도록 구성된 하이퍼텍스트 마크업 언어 레이블이다.

10) Node.js: Chrome V8 엔진 기반의 JavaScript 런타임 환경이다. 이벤트 구동 비차단(event-driven non-blocking) I/O 모델은 JavaScript가 서버 측 개발 플랫폼에서 실행되도록 하는 데 사용된다. JavaScript는 PHP, Python, Perl 및 Ruby와 같은 서버 측 언어와 동일한 스크립팅 언어로 만들어진다.

11) Polyfilling: JavaScript 규범에 메소드(method)가 존재하지만 특정 JavaScript 엔진에 의해 지원되지 않아, 메소드는 수동으로 구현되어 빌트인 프로토타입(built-in prototype)을 채우기 위해 사용될 수 있음을 나타낸다.

12) Single-SPA: 마이크로프론트엔드 프레임워크의 세트이며, 애플리케이션 전환의 목적을 달성하기 위해 브라우저 주소 전환을 인수하고 시작부터 소멸까지 각 애플리케이션의 라이프 사이클을 관리한다. (애니메이션과 같은) 추가 기능은 라이프 사이클 변경 프로세스에서 추가될 수 있으며, 동시에 Single-SPA는 기존 애플리케이션을 통합하기 위해 상이한 SPA 프레임워크에 대한 플러그인도 제공한다.

13) 마이크로프론트엔드(micro-frontend): 기본 애플리케이션과 서브애플리케이션을 포함하고, 애플리케이션 프로그램을 복수의 수직 슬라이스로 나누며, 각각의 슬라이스는 하위(underlying) 데이터베이스에서 상위 계층 사용자 인터페이스로 구축된다. 기본 애플리케이션은 주로 로그인, 메뉴 및 네비게이션을 통합하고, 전역 데이터 및 공용 메서드를 제공하는 프레임워크이다. 특정 기능 모듈은 가능한 한 서브애플리케이션에서 구현된다. 예를 들어 기본 애플리케이션의 기능으로는 로그인, 메뉴 및 네비게이션을 포함할 수 있고; 서브애플리케이션의 기능은 특정 웹 콘텐츠에 대응할 수 있다.

14) 웹팩(Webpack): 프로젝트 구조를 분석하여 브라우저가 직접 실행할 수 없는 JavaScript 모듈 및 확장 언어를 찾아 브라우저가 사용하기에 적합한 포맷으로 변환 및 패킹하는데 사용된다. 도 10을 참조하면, 도 10은 본 출원의 일 실시예에 따라 제공되는 애플리케이션 계층화의 개략도이다. 설명을 위해 실제 백 관리 시스템(back management system)을 예로 들어 설명한다. 백 관리시스템은 로그인 인증이 필요하며, 왼쪽에 메뉴바, 위에 개인 정보 네비게이션바가 있다. 중간 부분은 특정 페이지 콘텐츠를 보여준다. 이러한 특성에 기초하여, 백 관리 시스템은 두 부분, 즉 기본 애플리케이션(로그인 모듈 + 메뉴 모듈 + 네비게이션 모듈)과 서브애플리케이션(특정 콘텐츠 페이지 모듈)으로 나눌 수 있다. 기본 애플리케이션은 본체 프레임워크(main body framework)이며, 주로 로그인 모듈, 메뉴 모듈 및 네비게이션 모듈을 통합하고 글로벌 데이터 및 공용 메소드를 제공한다. 서브애플리케이션은 추가적인 독립성을 고려해야 한다. 서브애플리케이션은 마이크로프론트엔드 환경에 있으면, 전체 애플리케이션의 일부로서 사용된다. 따라서 서브애플리케이션은 기본 애플리케이션과 밀접하게 관련되지만 서브애플리케이션 자체도 상대적으로 독립적이다. 즉, 서브애플리케이션도 기본 애플리케이션과 독립적으로 실행될 수 있다. 서브애플리케이션은 기본 애플리케이션에 통합되어 마이크로프론트엔드 아키텍처에서 실행될 수 있으며, 기본 애플리케이션과 독립적으로 실행될 수도 있다. 예를 들어, 기본 애플리케이션은 웹 페이지 검색 애플리케이션이고, 서브애플리케이션은 광고 추천 애플리케이션, 상위 검색(top search) 애플리케이션 등이다.

관련 기술의 마이크로프론트엔드 솔루션에서, Nginx 서비스에 의해 라우팅 서비스가 포워딩되어 비효율적이다. 중앙 라우팅은 Nginx 서비스의 안정성에 의존하므로 재해 복구 솔루션이 복잡하다. Nginx 솔루션은 Nginx 서비스 구성에 크게 의존한다. 구성을 수정하는 경우에는 중앙 라우팅 Nginx 서비스를 다시 시작해야 하므로, 유지관리 비용이 많이 든다. 단일 통신 메커니즘은 다수 애플리케이션으로 인한 포스트이벤트의 관리를 어렵게 할 것이다. Iframe은 애플리케이션 로더로 사용되어, 서브애플리케이션에 대한 정렬 및 제어 능력이 부족하다. 관련 기술의 마이크로프론트엔드 솔루션은 다중 프론트엔드 프레임워크 하의 서브애플리케이션 실행 능력을 고려하지 않고, 다중 레벨 라우팅 하의 서브애플리케이션의 활성화 능력을 고려하지 않고, 기본 애플리케이션을 통한 서브애플리케이션의 활성 호출 및 활성화 능력을 고려하지 않고, 자원에 대한 크로스 도메인 솔루션을 제공하지 않으며; 관련 기술의 마이크로프론트엔드 솔루션은 자원을 통합된 방식으로 배포하지만, 인터페이스 요청, 사유 정적 자원(private static resource), CDN(Content Delivery Network) 정적 자원, Web Worker 자원 등을 포함하지만 이에 한정되지 않는, 자원의 분산 배포 후 자원의 프론트엔드 크로스 도메인 호출의 문제가 있다:

본 출원의 실시예는 Vue 프레임워크, React 프레임워크와 같은 상이한 프레임워크의 프론트엔드 애플리케이션을 로딩하도록 구성된 애플리케이션 로더 모듈을 제공하는 마이크로프론트엔드 시스템을 제공하고; JS 환경 격리를 보장하기 위해 JavaScript 샌드박스 메커니즘을 구현한다. 이 시스템은 추가로 서브애플리케이션 Web Worker의 크로스 도메인 처리를 제공하고, 서브애플리케이션에 CSS 접두사를 패킹 및 주입하고, 서브애플리케이션 실행 중에 CSS 접두사를 주입하고, Shadow Dom에 의해 서브애플리케이션을 로딩함으로써 CSS 격리를 구현한다. Props 송신, Custom Event 및 PostMessage를 포함한 세 개의 부모 및 자식 애플리케이션 통신 메커니즘이 제공되고; 라우팅 등록 서비스가 제공되고; 중앙집중화된 라우팅 탐색 능력이 제공되고; 원본 Iframe 하의 실행이 지원된다.

본 출원의 일 실시예에 의해 제공되는 마이크로프론트엔드 시스템의 예시적인 애플리케이션이 아래에 설명된다. 도 1은 본 출원의 일 실시예에 따라 제공되는 마이크로프론트엔드 시스템의 구성 구조의 개략도이다. 도 1에 도시된 바와 같이, 마이크로프론트엔드 시스템(100)은 라우팅 등록 서비스(101), 명령줄 도구(102) 및 마이크로프론트엔드 실행 프레임워크(103)를 포함한다. 라우팅 등록 서비스(101)는 독립적으로 유지되고 실행되는 노드 백엔드 서비스이며, 기본 애플리케이션의 마이크로프론트엔드 실행 프레임워크를 위한 서브애플리케이션의 라우팅 정보, 서브애플리케이션의 로딩 방식 및 서브애플리케이션의 배포 정보를 제공하도록 구성된다. 독립적으로 유지되고 실행되는 Node 서비스인 라우팅 등록 서비스를 제공함으로써, 마이크로프론트엔드의 서브애플리케이션의 등록 및 로딩 라우팅을 유지하기 위한 매우 우수한 확장 및 재해 복구 능력을 제공한다.

일례로서, 라우팅 등록 서비스는 HTTP 서비스를 제공하는 서버일 수 있다. 실제 구현에서는 이를 Node.js로 구현할 수 있다. Koa 프레임워크를 통해 라우팅 기록, 라우팅 삭제, 라우팅 조회 및 로그인 권한 부여의 기능을 구비한 웹측 서버의 세트가 구현된다. 데이터베이스는 관계형 데이터베이스 관리 시스템(예: MySQL)을 사용한다. 라우팅 등록 서비스(101)는 Java Spring Cloud, C++ Server Kit 등과 같이 임의의 서버 또는 언어로 동일한 기능을 구현하는 서비스일 수 있다.

라우팅 등록 서비스는 독립적으로 유지되고 실행되는 노드 백엔드 서비스이므로, 또한 부하 밸런싱(load balancing) 서비스가 라우팅 등록 서비스 앞에 배치될 수 있다. 네트워크 요청이 취득된 후, 네트워크 요청은 다양한 라우팅 등록 서비스의 부하에 기초하여 부하가 낮은 라우팅 등록 서비스에 할당될 수 있고; 복수의 라우팅 등록 서비스의 부하가 모두 높다면 매우 우수한 확장 및 재해 복구 능력도 제공될 수 있다.

명령줄 도구(102)는 명령줄을 통해 서브애플리케이션 생성 기능, 서브애플리케이션 액세스 기능 및 서비스 등록 기능을 제공하도록 구성된다.

일례로서, 사용자가 명령줄과 상호작용하기 위한 도구, 즉 명령줄 도구(102)가 Inquirer.js를 통해 제공될 수 있다. 구현 중에, 명령줄 도구는 명령줄 인터페이스(command-line interface, CLI) 도구이거나 npm 라이브러리 또는 GUI(Graphical User Interface) 도구일 수 있다. 명령줄 도구(102)를 통해 사용자D에 의해 입력되는 서브애플리케이션 생성, 서브애플리케이션 액세스 등과 같은 명령(command)이 수신될 수 있으며, 수신된 명령에 기초하여 서비스 등록이 수행된다.

마이크로프론트엔드 실행 프레임워크(103)는 획득한 네트워크 요청에 기초하여 서브애플리케이션을 로드 및 실행하도록 구성된 기본 애플리케이션에서 실행되는 프레임워크이며 다중 프레임워크 서브애플리케이션 실행 능력을 제공할 수 있다.

일례로서, 기본 애플리케이션은 프레임워크를 실행하는 마이크로프론트엔드에 임의로 액세스되는 애플리케이션이기도 하다. 구현 시에, 마이크로프론트엔드 실행 프레임워크는 Single-SPA에 기초하여 다중 프레임워크 서브애플리케이션 로딩 능력을 제공할 수 있다.

본 출원의 일 실시예에 의해 제공되는 마이크로프론트엔드 시스템은 라우팅 등록 서비스, 명령줄 도구 및 마이크로프론트엔드 실행 프레임워크를 포함한다. 라우팅 등록 서비스는 독립적으로 유지되고 실행되는 노드 백엔드 서비스이므로, 매우 우수한 확장 및 재해 복구 능력이 제공될 수 있고; 라우팅 등록 서비스는 기본 애플리케이션의 프레임워크를 실행하는 마이크로프론트엔드를 위해 서브애플리케이션의 라우팅 정보 및 로딩 방식과 서브애플리케이션의 배포 정보를 제공한다. 명령줄 도구는 명령줄을 통해 서브애플리케이션 생성 기능, 서브애플리케이션 액세스 기능, 서비스 등록 기능을 제공하도록 구성된다. 마이크로프론트엔드 실행 프레임워크는 기본 애플리케이션에서 실행되는 프레임워크이며, 취득된 네트워크 요청에 기초하여, 서브애플리케이션을 로딩하여 실행하도록 구성되며 다중 프레임워크 서브애플리케이션 실행 능력을 제공할 수 있다.

일부 실시예에서, 도 1에 도시된 바와 같이, 마이크로프론트엔드 시스템은 다음을 더 포함한다: 프론트엔드 인터페이스(104)는 라우팅 등록 서비스에 대응하고, 애플리케이션 등록을 위해 설정되어야 하는 서브애플리케이션 등록 정보는 프론트엔드 인터페이스(104)를 통해 취득되어 라우팅 등록 서비스에 송신된다.

서브애플리케이션 등록 정보는 서브애플리케이션 프레임워크, 서브애플리케이션 라우팅 모드 및 서브애플리케이션 로딩 모드를 포함한다. 예를 들어 서브애플리케이션 프레임워크는 Vue, React 등을 포함할 수 있고; 서브애플리케이션 라우팅 모드는 해시(hash) 모드, 히스토리(history) 모드 등을 포함할 수 있고; 서브애플리케이션 로딩 모드는 JS 로딩 모드, CSS 로딩 모드, HTML 로딩 모드 등을 포함할 수 있다.

일부 실시예에서, 서브애플리케이션 등록 정보는 서비스 명칭, 서브애플리케이션 로컬 개발 환경 주소, 서브애플리케이션 온라인 환경 주소 등을 더 포함할 수 있다.

라우팅 등록 서비스(101)는 서브애플리케이션 등록 정보를 수신하고 서브애플리케이션 등록 정보에 기초하여 서브애플리케이션을 등록하도록 구성된다.

일부 실시예에서, 명령줄 도구(102)는 서브애플리케이션 생성 커맨드를 수신하고 서브애플리케이션의 라우팅 정보 및 자원 정보와 서브애플리케이션 템플릿 정보를 취득하도록 구성된다.

본 출원의 이 실시예에서, 서브애플리케이션의 라우팅 정보는 서브애플리케이션 자원 주소 및 서브애플리케이션 자원 등록 경로를 포함할 수 있고; 서브애플리케이션 자원 정보는 서브애플리케이션 자원 명칭 및 서브애플리케이션 자원 유형을 포함할 수 있으며; 서브애플리케이션 템플릿 정보는 템플릿 식별자를 포함할 수 있다.

명령줄 도구(102)는 서브애플리케이션 템플릿 정보에 기초하여 서브애플리케이션 템플릿을 생성하고, 서브애플리케이션 생성 요청을 라우팅 등록 서비스(101)p 송신하며, 서브애플리케이션 생성 요청은 라우팅 정보 및 자원 정보를 실어 전달한다. 일부 실시예에서, 라우팅 등록 서비스(101)는 서브애플리케이션 생성 요청을 수신한 후 서브애플리케이션 생성 요청에 실려 전달되는 라우팅 정보 및 자원 정보에 기초하여 서브애플리케이션을 등록한다.

본 출원의 이 실시예에서, 명령줄 도구(102)가 라우팅 등록 서비스에 서브애플리케이션 생성 요청을 전송한 후, 명령줄 도구(102)는 서브애플리케이션 배포 요청을 배포 서버에 전송하고, 배포 서버는 배포 요청에 있는 서브애플리케이션 자원 주소에 기초하여 자원 배포를 수행한다.

일부 실시예에서, 명령줄 도구(102)는 추가로, 서브애플리케이션 액세스 명령을 수신하고, 서브애플리케이션의 라우팅 정보 및 자원 정보를 추득하고, 라우팅 등록 서비스(101)에 서브애플리케이션 액세스 요청을 전송하도록 구성되며, 서브애플리케이션 액세스 요청은 서브애플리케이션의 라우팅 정보 및 자원 정보를 실어 전달한다.

라우팅 등록 서비스(101)는 추가로, 서브애플리케이션 액세스 요청을 수신하고, 서브애플리케이션의 라우팅 정보 및 자원 정보에 기초하여 서브애플리케이션을 등록하도록 구성된다.

일부 실시예에서, 도 1에 도시된 마이크로프론트엔드 실행 프레임워크(103)의 구성 구조가 도 2에 도시되어 있으며, 기본 기능 라이브러리 모듈(1031), 통신 모듈(1032), 통합 라우팅 모듈(1033), 서브애플리케이션 로딩 모듈(1034) 및 서브애플리케이션 실행 모듈(1035)을 포함한다.

기본 기능 라이브러리 모듈(1031)은 공용 메서드 및 공용 구성요소를 제공하고, 전역 변수 및 함수에 의해 공용 메서드 및 공용 어셈블리를 서브애플리케이션에 의한 사용을 위해 서브애플리케이션에 주입하도록 구성된다.

일부 실시예에서, 기본 기능 라이브러리 모듈은 또한 서브애플리케이션에 의한 사용을 위해 공통 Polyfilling을 제공할 수 있다.

통신 모듈(1032)은 기본 애플리케이션에서 서브애플리케이션으로의, 서브애플리케이션에서 서브애플리케이션으로의 그리고 서브애플리케이션에서 기본 애플리케이션으로의 통신 메커니즘을 지원하도록 구성된다.

본 출원의 이 실시예에서, 기본 애플리케이션에서 서브애플리케이션으로의 통신 메커니즘은 Props 송신 및 Custom Event 송신을 포함하고; 서브애플리케이션에서 서브애플리케이션으로의 통신 메커니즘은 상이한 소스 스크립트의 비동기식 PostMessage 송신을 포함하고; 서브애플리케이션에서 기본 애플리케이션으로의 통신 메커니즘은 Custom Event 송신을 포함한다. Props 송신은 반응형(responsive) 양방향 데이터 전송 능력을 제공할 수 있다. Custom Event는 구성요소에 기초한 이벤트의 배포 및 등록을 정의할 수 있어, 애플리케이션이 너무 많은 경우 관련 없는 이벤트의 영향을 회피할 수 있다. PostMessage는 전역 이벤트 송신 및 수신을 제공하며, 브로드캐스트 메시지 통지를 구현하는 데 사용된다. 본 출원의 이 실시예에서, 수단은 풍부하고 부작용은 적은, 각각의 통신 차원에 대응하는 구현 스킴이 있다.

본 출원의 이 실시예는 Props 송신, Custom Event 송신 및 PostMessage 송신을 포함한 세 가지 유형의 통신 지원을 제공한다. Props 송신은 반응형 양방향 데이터 전송 능력을 제공할 수 있다. Custom Event는 애플리케이션이 너무 많은 경우 관련 없는 이벤트의 영향을 피하면서 구성 요소에 기초하여 이벤트의 배포 및 등록을 정의할 수 있다. PostMessage는 전역 이벤트 송신 및 수신을 제공하며, 브로드캐스트 메시지 통지를 구현하는 데 사용된다. 수단은 풍부하고 부작용은 적은, 각각의 통신 차원에 대응하는 구현 스킴이 있다.

통합 라우팅 모듈(1033)은 브라우저 라우팅 변경을 모니터링하도록 구성된다.

구현 시에, 통합 라우팅 모듈(1033)은 Single-SPA를 사용하여 브라우저 라우팅 변경을 모니터링하고 지정된 프레임워크 하에서 서브애플리케이션 또는 기본 애플리케이션 서브경로를 로딩, 활성화 및 실행한다. 기본 애플리케이션이 초기화되는 경우, 통합 라우팅 모듈(1033) 하의 서브애플리케이션 등록 경로, 자원 및 기타 정보를 라우팅 등록 서비스로부터 끌어온다.

서브애플리케이션 로딩 모듈(1034)은 라우팅 등록 서비스로부터 취득된 서브애플리케이션 자원 주소에 기초하여 서브애플리케이션 자원 주소에 대응하는 자원을 취득 및 로딩하도록 구성된다.

일례로서, 서브애플리케이션 로딩 모듈(1034)이 서브애플리케이션 자원 주소에 대응하는 자원을 로딩하는 경우, 서브애플리케이션 로딩 모듈은 서브애플리케이션 등록 정보에 있는 서브애플리케이션 로딩 모드에 따라 서브애플리케이션 자원을 로딩할 것이다. 서브애플리케이션 로딩 모듈의 서브애플리케이션을 로딩하는 모드는 적어도 HTML 엔티티 모드, JS 엔티티 모드 및 Iframe 모드를 포함한다. 로딩 모드가 HTML 엔티티 모드인 경우, HTML 파일이 로딩된다. 로딩 모드가 JS 엔티티 모드인 경우, JS 파일이 로딩된다. 로딩 모드가 Iframe 모드인 경우, URL이 Iframe에 바로 삽입되고 열린다.

일부 실시예에서, 서브애플리케이션 로딩 모듈(1034)은 서브애플리케이션 자원 주소에 대응하는 자원을 취득한 후, 자원에 기초하여 서브애플리케이션의 비즈니스 코드를 취득하고, 취득된 비즈니스 코드를 파싱하며, 파싱된 비즈니스 코드를 서브애플리케이션 실행 모듈(1035)에 송신한다.

서브애플리케이션 실행 모듈(1035)은 서브애플리케이션 자원 주소에 대응하는 자원을 실행하여 서브애플리케이션 페이지를 렌더링하도록 구성된다.

서브애플리케이션 실행 모듈(1035)은 런타임 환경 샌드박스를 포함하고, 서브애플리케이션 실행 모듈에 의해 획득되는 파싱된 비즈니스 코드가 런타임 환경 샌드박스에서 실행된다.

실제 구현에서, 런타임 환경 샌드박스는 JS 샌드박스, CSS 샌드박스 및 Web Worker 샌드박스를 포함한다. 기본 JS 샌드박스는 with 문장과 프록시를 사용하여 달성된다. 기본 보안은 제어 가능한 서브애플리케이션 하에서 달성되고, 작용 범위 탈출 방법(action scope escape method)은 스택 검사 및 키워드 검사를 통해 극복된다. 프록시는 서브애플리케이션에 의해 액세스 가능한 객체 모음(object collection)이며, JS 샌드박스는 서브애플리케이션의 비즈니스 코드가 프록시의 액세스 가능한 객체에만 액세스 가능할 수 있게 하고, 다른 서브애플리케이션이나 기본 애플리케이션의 객체에 액세스할 수 없게 한다. 파싱된 비즈니스 코드가 JS 샌드박스에서 실행되는 경우, 파싱된 비즈니스 코드는 프록시를 전역 루트 객체(global root object)로 취함으로써 실행을 위해 샌드박스에 넣어진다. 즉, 비즈니스 코드는 프록시의 객체와 속성에만 액세스할 수 있고, 외부 계층의 다른 변수에 영향을 주지 않아, 안전한 격리를 달성한다.

본 출원의 이 실시예에서는 3개의 CSS 샌드박스 수단이 제공된다: 첫 번째 CSS 샌드박스 수단은 서브애플리케이션 웹팩 접두사(webpack prefix)에 기초한다. 서브애플리케이션 웹팩 접두사는 각각의 서브애플리케이션의 스타일에 별개의 명칭공간을 할당하여, 서로 영향을 미치는 스타일의 상호 영향을 회피하는 것이다. 두 번째 CSS 샌드박스 수단은 스타일 충돌을 회피하기 위해 서브애플리케이션 실행 중에 서브애플리케이션 스타일에 대한 접두사를 동적으로 추가하는 서브애플리케이션 런타임 접두사에 기초한다. 세 번째 CSS 샌드박스 수단은 Shadow Dom에 기초한다. Shadow Dom에 기초하는 CSS 샌드박스는 브라우저 레벨의 스타일 격리 능력을 제공할 수 있고 완전한 격리를 달성할 수 있다.

Web Worker 샌드박스는 Web Worker에 할당된 스크립트 파일에 대해 인라인 실행(inline running)을 수행하여 Web Worker의 크로스 도메인 호출을 달성하도록 구성된다.

서브애플리케이션 자원 로딩 모듈은 자원 로딩하는 경우 *.worker.js 파일을 하이재킹하고, 그 파일을 브라우저 내부 메모리에 텍스트 콘텐츠로 다시 로딩하여, Web Worker 샌드박스를 사용하는 Web Worker의 스크립트 파일(*.worker.js)에 대해 인라인 실행을 수행하며, 인라인 Web Worker 스크립트 파일은 크로스 도메인 문제를 일으키지 않으므로, Web Worker의 크로스 도메인 문제를 해결한다.

일부 실시예에서, 마이크로프론트엔드 시스템은 크로스 도메인 자원 공유를 지원하는 서버를 더 포함한다. 구현 시에, 서버는 CORS(Cross-origin Resource Sharing)를 지원하는 헤더를 자동으로 실어 전달하여, 브라우저가 크로스 도메인들의 사유 정적 자원 및 CDN 정적 자원에 액세스할 수 있도록 한다.

본 출원의 이 실시예는 크로스 도메인을 지원하기 위한 인터페이스 자원을 포함하는 서버측 CORS 스킴을 제공하며; CDN 정적 자원은 CORS 스킴을 제공하고; Web Worker는 작업자의 크로스 도메인 호출의 문제를 해결하기 위해 인라인 구축 로더와 인라인 실행 로더를 제공한다. 본 출원의 이 실시예는 캐싱, 사전 로딩 및 Web Worker와 같은 수단을 추가로 제공하여 서브애플리케이션의 로딩 및 호출을 가속화한다.

일부 실시예에서, 도 2에 도시된 바와 같이, 마이크로프론트엔드 실행 프레임워크(103)는 데이터 관리 모듈(1036), 성능 모니터링 모듈(1037), 오류 처리 모듈(1038)을 더 포함한다.

데이터 관리 모듈(1036)은 Props 송신 메커니즘에 의해 제공되는 데이터에 의해 양방향 데이터 바인딩 기능을 실현하도록 구성되어, 부모 애플리케이션과 자식 애플리케이션의 데이터를 공유한다.

본 출원의 이 실시예에서, 부모 애플리케이션과 자식 애플리케이션이 동일한 런타임 환경에 로딩되는 경우, 기본 애플리케이션은 모니터링 기능이 있는 객체를 서브애플리케이션에 송신할 것이며, 서브애플리케이션의 변경은 객체에 의해 모니터링되어, 부모 애플리케이션과 자식 애플리케이션의 데이터 공유가 달성될 수 있도록 한다.

성능 모니터링 모듈(1037)은 서브애플리케이션의 로딩 기간(loading duration) 및 실행 기간(running duration)을 모니터링하도록 구성된다.

구현 시에, 기본 애플리케이션은 미리 설정된 기능을 통해 서브애플리케이션의 로딩 시간 및 실행 시간과 같은 정보를 모니터링한다.

오류 처리 모듈(1038)은 로딩 프로세스 및 실행 프로세스에서 서브애플리케이션의 오류 정보를 모니터링하고 처리하도록 구성된다.

구현 시에, 기본 애플리케이션은 window.addEventListener('error', errorHandler) 및 window.addEventListener('unhandledrejection', errorHandler)를 등록하여 서브애플리케이션 오류를 모니터링하고 처리하여, 서브애플리케이션의 오류 정보가 적시에 처리되어 마이크로프론트엔드 시스템의 신뢰성을 보장할 수 있도록 한다.

전술한 실시예에 의해 제공되는 마이크로프론트엔드 시스템에 기초하여, 본 출원의 이 실시예는 전술한 실시예에 의해 제공되는 마이크로프론트엔드 시스템으로 구성되는 마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법을 더 제공한다. 도 3은 본 출원의 일 실시예에 따라 제공되는 마이크로프론트엔드 시스에 기초한 서브애플리케이션 로딩 방법의 구현 프로세스의 개략도이다. 도 3에 도시된 바와 같이, 이 서브애플리케이션 로딩 방법은 다음을 포함한다:

단계 S301. 네트워크 액세스 요청을 취득한다.

일례로서, 네트워크 액세스 요청은 URL 주소를 실어 전달한다. 네트워크 액세스 요청은 사용자의 네트워크 액세스 조작에 의해 트리거될 수 있다. 기능적 네트워크 액세스 요청은 기본 애플리케이션에 액세스하도록 구성된 요청일 수 있거나, 서브애플리케이션에 액세스하기 위한 요청일 수 있다. 서브애플리케이션에 액세스하기 위한 네트워크 액세스 요청인 경우, 서브애플리케이션에 대한 네트워크 액세스 요청은 사용자가 기본 애플리케이션의 URL 주소를 브라우저에 입력하고 브라우저가 기본 애플리케이션 인터페이스를 렌더링한 후, 기본 애플리케이션 인터페이스에 제공된 서브애플리케이션의 아이콘에 기초하여 트리거될 수 있다.

본 출원의 이 실시예에서, 마이크로프론트엔드 시스템은 단계 S301 이전에, 기본 애플리케이션의 배포 및 라우팅 등록 서비스의 배포를 완료하였으며, CLI 도구를 통해 서브애플리케이션의 생성 및 등록을 완료하였다.

단계 S302. 대응하는 라우팅 정보를 URL 주소에 기초하여 마이크로프론트엔드 시스템의 라우팅 등록 서비스로부터 끌어온다.

일례로서, 단계 S302의 구현 시에, URL 주소는 라우팅 등록 서비스에 전송될 수 있으며, 라우팅 등록 서비스는 URL 주소에 따라 액세스될 애플리케이션 식별자를 결정한 다음, 대응하는 애플리케이션 식별자에 기초하여 대응하는 라우팅 정보를 끌어온다.

단계 S303. 마이크로프론트엔드 시스템의 서브애플리케이션 로딩 모듈은 라우팅 정보에 기초하여, 액세스될 페이지가 서브애플리케이션 페이지인 것으로 결정되는 경우 라우팅 정보에 기초하여, 라우팅 등록 서비스로부터 라우팅 정보에 대응하는 서브애플리케이션 자원을 취득한다.

일례로서, 애플리케이션에 대응하는 라우팅 정보가 취득된 후, 액세스될 페이지가 서브애플리케이션 페이지인 것으로 결정되면, 라우팅 등록 서비스는 CSS, JS 및 기타 정적 자원 문서와 같은, 대응하는 서브애플리케이션 자원을 획득할 수 있다.

단계 S304. 서브애플리케이션 로딩 모듈은 서브애플리케이션 자원의 로딩을 필요로 하는 경우 서브애플리케이션 자원을 로딩한다.

본 출원의 이 실시예에서, 서브애플리케이션 자원을 취득한 후, 서브애플리케이션 로딩 모듈은 먼저 서브애플리케이션 자원의 로딩이 필요한지를 판정한 다음, 서브애플리케이션 자원의 로딩이 필요한 경우 서브애플리케이션 자원의 로딩 모드에 기초하여 서브애플리케이션을 로딩하고, 서브애플리케이션 자원의 로딩이 필요 없는 것으로 결정되는 경우 서브애플리케이션 자원이 이미 로드되어 있음을 지시한다. 이때, 서브애플리케이션 자원이 바로 실행되어 서브애플리케이션 페이지를 렌더링한다.

단계 S305. 마이크로프론트엔드 시스템의 서브애플리케이션 실행 모듈이 서브애플리케이션 자원을 실행하여 서브애플리케이션 페이지를 렌더링한다.

일부 실시예에서, 서브애플리케이션 로딩 모듈은 서브애플리케이션 자원을 취득한 후, 서브애플리케이션 자원에 기초하여 서브애플리케이션의 비즈니스 코드를 취득하고, 취득된 서브애플리케이션의 비즈니스 코드를 파싱하고, 파싱된 비즈니스 코드를 서브애플리케이션 실행 모듈에 송신한다. 서브애플리케이션 실행 모듈은 파싱된 비즈니스 코드를 획득한 후, 파싱된 비즈니스 코드를 자체 런타임 환경 샌드박스에서 실행하여 서브애플리케이션 페이지를 렌더링한다.

실제 구현에서, 런타임 환경 샌드박스는 JS 샌드박스, CSS 샌드박스 및 Web Worker 샌드박스를 포함한다. 기본 JS 샌드박스는 with 문장과 프록시를 사용하여 달성된다. 기본 보안은 제어 가능한 서브애플리케이션 하에서 달성되고, 작업 범위 탈출 방법은 스택 검사 및 키워드 검사를 통해 극복된다. 프록시는 서브애플리케이션에 의해 액세스 가능한 객체 모음이며, JS 샌드박스는 서브애플리케이션의 비즈니스 코드가 프록시의 액세스 가능한 객체에만 액세스 가능할 수 있게 하고, 다른 서브애플리케이션이나 기본 애플리케이션의 객체에 액세스할 수 없게 한다. 파싱된 비즈니스 코드가 JS 샌드박스에서 실행되는 경우, 파싱된 비즈니스 코드는 프록시를 전역 루트 객체로 취함으로써 실행을 위해 샌드박스에 넣어진다. 즉, 비즈니스 코드는 프록시의 객체와 속성에만 액세스할 수 있고, 외부 계층의 다른 변수에 영향을 주지 않아, 안전한 격리를 달성한다.

본 출원의 이 실시예에서는 3개의 CSS 샌드박스 수단이 제공된다: 첫 번째 CSS 샌드박스 수단은 서브애플리케이션 웹팩 접두사에 기초한다. 서브애플리케이션 웹팩 접두사는 각각의 서브애플리케이션의 스타일에 별개의 명칭공간을 할당하여, 서로 영향을 미치는 스타일의 상호 영향을 회피하는 것이다. 두 번째 CSS 샌드박스 수단은 서브애플리케이션 런타임 접두사에 기초하여, 스타일의 충돌을 회피하기 위해 서브애플리케이션 실행 중에 애플리케이션 스타일을 동적으로 로딩하지 않는다. 세 번째 CSS 샌드박스 수단은 Shadow Dom에 기초한다. Shadow Dom에 기초한 CSS 샌드박스는 브라우저 레벨의 스타일 격리 능력을 제공할 수 있고 완전한 격리를 달성할 수 있다.

Web Worker 샌드박스는 Web Worker에 할당된 스크립트 파일에 대해 인라인 실행을 수행하여 Web Worker의 크로스 도메인 호출을 달성하도록 구성된다. 서브애플리케이션 자원 로딩 모듈은 자원을 로딩하는 경우 *.worker.js 파일을 하이재킹하고, 그 파일을 브라우저 내부 메모리에 텍스트 콘텐츠로서 다시 로딩하여, Web Worker 샌드박스를 사용하는 Web Worker의 스크립트 파일(*.worker.js)에 대해 인라인 실행을 수행하며, 인라인 Web Worker 스크립트 파일은 크로스 도메인 문제를 일으키지 않으므로, Web Worker의 크로스 도메인 문제를 해결한다.

본 출원의 이 실시예에 따라 제공되는 마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법에서, 네트워크 액세스 요청이 취득된 후, 네트워크 액세스 요청에 실려 전달된 URL 주소에 기초하여 마이크로프론트엔드 시스템의 라우팅 등록 서비스로부터 대응하는 라우팅 정보를 끌어오며; 라우팅 정보에 기초하여, 액세스될 페이지가 서브애플리케이션 페이지인것으로 결정되는 경우, 마이크로프론트엔드 시스템의 서브애플리케이션 로딩 모듈은 라우팅 정보에 기초하여 라우팅 등록 서비스로부터 라우팅 정보에 대응하는 서브애플리케이션 자원을 취득하고; 서브애플리케이션 자원의 로딩이 필요한 경우, 서브애플리케이션 로딩 모듈은 서브애플리케이션 자원을 로딩하고, 마이크로프론트엔드 시스템의 서브애플리케이션 실행 모듈은 서브애플리케이션 자원을 실행하여 서브애플리케이션 페이지를 렌더링한다.

일부 실시예에서, 도 4에 도시된 바와 같이, 단계 S304 이전에, 마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법은 다음을 더 포함한다:

단계 S003. 서브애플리케이션 자원이 사전 로딩되었는지 또는 개방되었는지를 판정한다.

일례로서, 서브애플리케이션 자원이 사전 로딩되지 않고 개방되지 않은 경우, 서브애플리케이션 자원의 로딩이 필요한 것으로 결정하고, 이때 단계 S304가 실행된다. 서브애플리케이션 자원이 사전 로딩되었거나 개방된 경우, 서브애플리케이션 자원을 다시 로딩할 필요가 없다고 결정하고, 이때 단계 S305가 실행된다. 이로써 서브애플리케이션의 로딩 및 호출 속도를 높일 수 있다.

일부 실시예에서, 서브애플리케이션이 로딩되기 전에, 서브애플리케이션은 먼저 등록되고 배포될 필요가 있으며, 서브애플리케이션 등록 프로세스는 다음 단계를 통해 구현될 수 있다:

단계 S001. 서브애플리케이션 등록을 위해 설정되어야 하는 서브애플리케이션 등록 정보를 취득한 다음 라우팅 등록 서비스에 송신한다.

일례로서, 서브애플리케이션 등록 정보는 적어도 서브애플리케이션 프레임워크, 서브애플리케이션 라우팅 모드 및 서브애플리케이션 로딩 모드를 포함한다.

마이크로프론트엔드 시스템은 라우팅 등록 서비스에 대응하는 프론트엔드 인터페이스를 포함할 수 있고, 서브애플리케이션을 생성하고 서브애플리케이션에 액세스하도록 구성된 명령줄 도구도 포함할 수 있다. 이에 상응하여, 단계 S001에 대한 두 가지 구현이 있다:

I. 라우팅 등록 서비스에 대응하는 프론트 엔드 인터페이스에 의해 서브애플리케이션 등록을 위한 입력 조작이 취득되고, 입력 조작에 기초하여 서브애플리케이션 등록 정보가 결정된다.

제1 방식에 기초하여 서브애플리케이션 등록 정보를 취득하는 동안, 프론트엔드 인터페이스를 열기 위한 조작 명령에 기초하여 프론트엔드 인터페이스가 먼저 제시되고, 그런 다음 프론트엔드 인터페이스를 통해 서브애플리케이션에 대한 입력 조작이 수신된다. 서브애플리케이션 등록을 입력하기 위해 설정해야 하는 파라미터로서, 입력 조작은 예를 들어 서비스 명칭, 서브애플리케이션 프레임워크, 서브애플리케이션 로컬 개발 환경 주소, 서브애플리케이션 온라인 환경 주소, 서브애플리케이션 등록 서브라우팅, 서브애플리케이션 라우팅 모드(해시 또는 히스토리) 및 서브애플리케이션 로딩 모드를 포함할 수 있다. ,

일부 실시예에서, 프론트엔드 인터페이스는 등록을 결정하기 위한 그래픽 제어를 추가로 제공한다. 사용자가 서브애플리케이션 등록 정보의 설정의 완료를 결정한 후, 사용자는 그래픽 제어를 클릭하거나 터치 제어하여 라우팅 등록 서비스에 서브애플리케이션 등록 정보를 전송할 수 있다. 서브애플리케이션 등록 정보가 라우팅 등록 서비스에 전송되는 경우, 서브애플리케이션 등록을 위한 HTTP 요청이 라우팅 등록 서비스에 전송될 수 있다. HTTP 요청은 서브애플리케이션 등록 정보를 실어 전달할 수 있다.

II. 서브애플리케이션 생성 명령은 명령줄 도구를 통해 수신된다. 서브애플리케이션 생성을 위한 입력 조작이 취득되고; 서브애플리케이션 등록 정보는 입력 조작에 기초하여 결정된다.

제1 구현 방식과 유사하게, 제2 구현은 다음과 같다: 명령줄 도구에 기초하여 서브애플리케이션 등록 정보를 취득하는 경우, 명령줄 도구가 먼저 개시되어야 하고, 그런 다음 명령줄 도구는 서브애플리케이션 생성 명령을 수신한 다음 서브애플리케이션 생성을 위한 입력 조작을 취득하는 데 사용된다. 입력 조작은 서브애플리케이션 등록을 입력하기 위해 설정되어야 하는 파라미터로 사용되어, 입력 조작에 따라 서브애플리케이션 등록 정보가 획득되도록 하며, 예를 들어 서브애플리케이션 자원 명칭, 서브애플리케이션 자원 주소, 서브애플리케이션 자원 유형 및 서브애플리케이션 자원 등록 경로를 포함할 수 있다. 구현 시에, 명령줄 도구를 통해 서브애플리케이션 템플릿 식별자가 선택되고, 그런 다음 대응하는 템플릿이 명령줄 도구에 의해 자동으로 생성되며; 서브애플리케이션 자원 주소, 서브애플리케이션 자원 등록 주소 및 기타 정보가 주입된다. 서브애플리케이션 등록 정보가 라우팅 등록 서비스에 전송되는 경우, 정보 전송 명령을 입력함으로써 정보 전송 명령에 기초하여 서브애플리케이션 등록 정보가 라우팅 등록 서비스에 전송된다.

단계 S002, 라우팅 등록 서비스가 서브애플리케이션을 수신하고, 서브애플리케이션 등록정보에 기초하여 서브애플리케이션을 등록한다.

위의 단계 S001 내지 S002를 통해, 마이크로프론트엔드 시스템은 자체적으로 서브애플리케이션의 라우팅 정보 및 자원 정보를 등록할 수 있어, 서브애플리케이션 등록의 유연성을 향상시킬 수 있다.

일부 실시예에서, 도 3에 도시된 단계 S304 "서브애플리케이션 자원의 로딩이 필요한 경우 서브애플리케이션 로딩 모듈이 서브애플리케이션 자원을 로딩한다"는 다음 단계로 구현될 수 있다:

단계 S3041. 서브애플리케이션 자원의 로딩이 필요한 경우 서브애플리케이션의 프레임워크 식별자와 자원 로딩 모드를 취득한다.

일례로서, 서브애플리케이션의 프레임워크 식별자는 Vue, React 등을 포함할 수 있고, 자원 로딩 모드는 JS 엔티티 로딩 모드, CSS 엔티티 로딩 모드, Iframe 로딩 모드 등을 포함할 수 있다.

단계 S3042. 서브애플리케이션 자원이 자원 로딩 유형에 따라 프레임워크 식별자에 대응하는 서브애플리케이션 프레임워크에 로딩된다.

일례로서, 로딩 모드가 HTML 개체 모드인 경우, HTML 파일을 로딩한다. 로딩 모드가 JS 엔티티 모드인 경우, JS 파일이 로딩된다. 로딩 모드가 Iframe 모드인 경우, URL이 Iframe에 직접 삽입되어 열린다.

일부 실시예에서, 도 5에 도시된 바와 같이, 단계 S302 후에, 상기 방법은 다음의 단계를 더 포함한다:

단계 S201. 액세스될 페이지가 기본 애플리케이션 페이지인지를 라우팅 정보에 기초하여 판정한다.

일례로서, 단계 S202는 라우팅 정보에 기초하여 액세스될 페이지가 기본 애플리케이션 페이지인 것으로 결정되는 경우 실행되며; 단계 S303은 라우팅 정보에 기초하여 액세스될 페이지가 서브애플리케이션 페이지인 것으로 결정되는 경우 실행된다.

단계 S202. 기본 애플리케이션의 현재 탑재된 서브애플리케이션이 라이프 사이클에 따라 결정된다.

단계 S203. 렌더링될 타깃 서브애플리케이션이 현재 탑재된 서브애플리케이션으로부터 결정된다.

일례로서, 단계 S203은 다음과 같을 수 있다: 미리 설정된 규칙에 따라 현재 탑재된 서브애플리케이션 중에서 적어도 하나의 렌더링될 타깃 서브애플리션이 결정된다. 예를 들어 가장 자주 액세스되는 현재 탑재되어 있는 하나 이상의 서브애플리케이션을 선택하여 타깃 서브애플리케이션으로 결정한다.

단계 S204, 노출된 로딩 함수 및 타깃 서브애플리케이션에 기초하여 라우팅 전환을 시뮬레이션하고, 서브애플리케이션 자원 및 타깃 서브애플리케이션의 기본 애플리케이션 자원을 취득한다.

일례로서, 액세스될 페이지가 기본 애플리케이션 페이지인 경우, 라우팅 정보에 따라 기본 애플리케이션 자원을 먼저 취득한다. 본 출원에서는 로딩 함수가 노출되어 있으므로, 로딩 함수는 기본 애플리케이션에 의해 능동적으로 호출될 수 있다. 기본 애플리케이션이 노출된 로딩 함수를 능동적으로 호출하는 경우, 라우트 전환을 시뮬레이션할 수 있으므로 마이크로프론트엔드 시스템의 서브애플리케이션 로딩 모듈을 트리거하여 타깃 서브애플리케이션의 서브애플리케이션 자원을 취득할 수 있다.

단계 S205. 기본 애플리케이션 자원과 서브애플리케이션 자원을 로딩하고 실행하여, 기본 애플리케이션의 렌더링된 페이지에서 서브애플리케이션을 렌더링합니다.

단계 S205의 구현 시에, 기본 애플리케이션 자원이 먼저 로드되고 실행되어 기본 애플리케이션 인터페이스를 렌더링하고, 그 다음에 서브애플리케이션 자원이 실행되어 서브애플리케이션 페이지도 렌더링되므로, 기본 애플리케이션은 다음을 수행할 수 있다. 라우트 등록에 의존하지 않고 서브애플리케이션을 능동적으로 렌더링할 수 있다.

단계 S201 내지 S205의 실시예에서, 액세스될 페이지가 기본 애플리케이션 페이지인 경우, 현재 탑재된 서브애플리케이션은 기본 애플리케이션의 라이프 사이클에 따라 결정될 수 있고, 타깃 서브애플리케이션은 미리 설정된 원칙에 따라 결정될 수 있다. 또한 노출된 로딩 함수를 호출함으로써, 라우트 전환을 시뮬레이션하고 타깃 서브애플리케이션의 서브애플리케이션 자원을 취득하고; 서브애플리케이션 페이지를 기본 애플리케이션의 렌더링된 페이지에 표시하여, 기본 애플리케이션에 의한 서브애플리케이션의 능동 렌더링을 달성한다.

다음은 실제 적용 시나리오에서 본 출원의 이 실시예의 예시적인 적용을 설명한다.

도 6은 본 출원의 일 실시예에 의해 제공되는 마이크로프론트엔드 시스템의 개략도이다. 도 6에 도시된 바와 같이, 마이크로프론트엔드 시스템은 라우팅 등록 서비스(601), 라우팅 등록 서비스에 대응하는 프론트엔드 페이지, 서브애플리케이션 액세스 및 생성 CLI 도구(602) 및 기본 애플리케이션의 마이크로프론트엔드 실행 프레임워크(603)를 포함한다.

라우팅 등록 서비스(601)는 마이크로프론트엔드 실행 프레임 워크(603)에 서브애플리케이션의 라우팅 정보, 로딩 방식 및 서브애플리케이션의 배포 정보를 제공한다.

구현 시에, 라우팅 등록에 필요한 파라미터가 설정될 수 있는 서브애플리케이션 라우팅 등록을 위해 하나의 프론트엔드 인터페이스가 제공될 수 있다. 설정되어야 하는 파라미터로는 서비스 명칭, 서브애플리케이션 프레임워크, 서브애플리케이션 로컬 개발 환경 주소, 서브애플리케이션 온라인 환경 주소, 서브애플리케이션 등록 서브라우팅, 서브애플리케이션 라우팅 모드(해시 또는 히스토리) 및 서브애플리케이션 로딩 모드를 포함하지만 이에 한정되지 않는다.

라우팅 등록 서비스(601)는 HTTP 서비스를 제공하는 서버이며, 주로 Node.js로 구현된다. Koa 프레임워크를 통해 라우팅 기록, 라우팅 삭제, 라우팅 조회 및 로그인 권한 부여 기능을 구비한 웹 페이지 서버의 세트가 구현된다. 데이터베이스는 MySQL 또는 다른 형태의 데이터베이스를 사용한다.

구현 시에, 라우팅 등록 서비스는 서브애플리케이션의 등록 정보를 수신하는 노드 백엔드 서비스일 수 있다. 애플리케이션 로더는 노드 백엔드 서비스를 통해 서브애플리케이션을 파싱 및 발견하고, 정보를 통해 서브애플리케이션을 로딩하는 방법을 결정한다. 다중 노드 단일 서비스는 PM2를 통해 시작된다. PM2는 부하 밸런싱 기능이 있는 노드 애플리케이션 프로세스 관리자이다. 또한 라우팅 등록 서비스는 서비스의 재해 복구 및 확장 능력을 제공하도록 구성된 부하 밸런싱 서비스도 포함할 수 있다.

CLI 도구(602)는 서브애플리케이션 생성 기능, 서브애플리케이션 액세스 기능, 서비스 등록 및 배포 기능 등을 포함하는 기능을 제공한다.

구현 시에, 서브애플리케이션 생성, 서브애플리케이션 액세스 및 서비스 등록 및 배포 기능을 제공하는 명령줄 도구의 세트가 Inquirer.js를 통해 제공된다.

서브애플리케이션 생성의 구현 시에, 사용자는 먼저 명령줄에 서브애플리케이션 생성 명령을 입력하고, 서브애플리케이션 자원 명칭, 서브애플리케이션 자원 주소, 서브애플리케이션 자원 유형 및 서브애플리케이션 자원 등록 경로를 기입하고, 서브애플리케이션 템플릿을 선택할 수 있다. CLI 도구는 자동으로 대응하는 템플릿을 생성하고, 라우팅 정보를 주입하며, 자원 정보를 라우팅 등록 서비스에 자동으로 등록한다.

서브애플리케이션의 구현 시에, 사용자는 명령줄에 서브애플리케이션 액세스 명령을 입력하고, 서브애플리케이션 자원 명칭, 서브애플리케이션 자원 주소, 서브애플리케이션 자원 유형, 및 서브애플리케이션 자원 등록 경로를 기입한다. CLI 도구는 서브애플리케이션 엔트리 파일을 자동으로 검색하고, 기본 애플리케이션이 필요로하는 라이프 사이클 기능을 추가한다. CLI 도구는 자원 정보를 라우팅 등록 서비스에 자동으로 등록한다.

서비스 등록 기능의 구현 시에, CLI 도구는 서브애플리케이션 생성 명령을 실어 전달하고, 서브애플리케이션 자원 명칭, 서브애플리케이션 자원 주소, 서브애플리케이션 자원 유형, 서브애플리케이션 자원 등록 경로 및 기타 파라미터를 기입하고, 그것들을 HTTP 요청을 통해 라우팅 등록 서비스에 전송한다.

배포 기능의 구현 시에, CLI 도구는 HTTP 요청을 통해 라우팅 등록 서비스에 배포 요청을 전송한다.

마이크로프론트엔드 실행 프레임워크(603)는 기본 애플리케이션에서 실행되는 프레임워크이다. 기본 애플리케이션은 부모 애플리케이션 또는 APP 쉘(shell)이라고도 한다. APP 쉘은 공용 자원 라이브러리, 애플리케이션 로더, 자원 로더(resource loader)(Single-SPA 팩) 및 런타임 환경 샌드박스를 포함한다. 런타임 환경 샌드박스로는 js 샌드박스, Web Worker 인라인 샌드박스 및 CSS 환경 격리 샌드박스를 포함한다. APP 쉘은 또한 Iframe 모드에서의 실행을 지원한다.

기본 애플리케이션은 마이크로프론트엔드 실행 프레임워크에 액세스하는 임의의 애플리케이션이다.

도 6의 603에 의해 도시된 바와 같이, 마이크로프론트엔드 실행 프레임워크는 기본 기능 라이브러리, 통신 모듈, 데이터 관리 모듈, 성능 모니터링 모듈, 오류 처리 모듈, 통합 라우팅 모듈, 서브애플리케이션 로딩 모듈 및 서브애플리케이션 실행 모듈을 포함한다.

기본 기능 라이브러리는 공통 polyfills, 공용 메서드 및 구성요소를 제공하며, 이들은 서브애플리케이션에 의한 사용하기 위해 전역 변수 및 함수를 통해 서브애플리케이션에 주입된다.

통신 모듈은 Custom Event를 통한 이벤트 통신, PostMessage를 통한 메시지 통신, 라이프 사이클에서의 Props 송신을 통한 시스템 데이터 통신을 제공한다.

도 7은 본 출원의 일 실시예에 따라 제공되는 마이크로프론트엔드 시스템의 통신 메커니즘의 개략도이다. 도 7에 도시된 바와 같이, 기본 애플리케이션에서 서브애플리케이션으로의 통신 방식은 두 가지 통신 메커니즘, 즉 Props와 Custom Event를 포함할 수 있다. 서브애플리케이션과 기본 애플리케이션의 통신 방식으로는 Custom Event(구성요소) 및 Custom Event(윈도)의 두 가지 통신 메커니즘을 포함할 수 있다. 서브애플리케이션에서 서브애플리케이션으로의 통신 방식은 두 가지 통신 방식, 즉 PostMessage와 BroadcastChannel을 포함한다.

데이터 관리 모듈은 Props에 의해 제공되는 데이터를 통해 양방향 데이터 바인딩 기능을 구현하여 부모 애플리케이션과 자식 애플리케이션의 데이터를 공유할 수 있다.

성능 모니터링 모듈은 기본 애플리케이션의 기능을 통해 서브애플리케이션의 로팅 시간, 실행 시간 및 기타 데이터를, 기본 애플리케이션에 의해 모니터링하도록 구성된다.

오류 처리 모듈은 로딩 및 실행 프로세스에서 서브애플리케이션의 오류 정보를 모니터링하고 처리하도록 구성된다.

일례로서, 기본 애플리케이션은 등록된 모니터로, 서브애플리케이션에 의해 보고된 오류를 모니터링하고 처리하며, 등록된 모니터는 window.addEventListener('error', errorHandler) 및 window.addEventListener('unhandledrejection', errorHandler)를 포함한다.

통합 라우팅 모듈은 Single-SPA를 사용하여 브라우저 라우팅 변경을 모니터링하고, 지정된 프레임워크 하의 서브애플리케이션 또는 기본 애플리케이션 서브경로를 로딩, 활성화 및 실행한다. 기본 애플리케이션이 초기화되는 경우, 통합 라우팅 모듈 하의 서브애플리케이션 등록 경로, 자원 및 기타 정보를 라우팅 등록 서비스로부터 끌어온다.

서브애플리케이션 로딩 모듈은 서브애플리케이션 자원을 로딩하도록 구성된다.

도 8은 본 출원의 일 실시예에 따라 제공되는 서브애플리케이션 로딩 모듈에 의해 서브애플리케이션 자원을 로딩하는 구현 프로세스의 개략도이다. 도 8에 도시된 바와 같이, 프로세스는 다음을 포함한다:

단계 S801. 취득된 네트워크 요청에 기초하여 라우팅 등록 서비스로부터 라우팅 및 정적 자원을 끌어온다.

일례로서, 네트워크 요청은 URL 주소를 실어 전달한다. 단계 S801의 구현 시에, 라우팅 등록 서비스로부터 URL 주소에 기초하여 URL 주소에 대응하는 애플리케이션 식별자가 결정될 수 있고, 그 다음에 라우팅 등록 서비스는 애플리케이션 식별자에 따라 대응하는 라우딩 정보를 결정하고, 라우팅 정보에 기초하여 정적 자원을 취득할 수 있다.

단계 S802. 자원 로더가 서브애플리케이션 자원을 로딩한다.

자원 로더는 상이한 프레임워크의 서브애플리케이션을 로딩할 수 있으며, HTML Entry, JS Entry 및 Iframe을 로딩할 수 있다. HTML 모드는 HTML의 참조 자원을 통해 정적 파일을 로딩하고; js 모드는 js를 통해 동적으로 자원을 로딩하며; 전통적인 Iframe 모드도 서브애플리케이션을 로딩하기 위해 제공된다.

본 출원의 이 실시예에서, 성능 및 크로스 도메인 영향을 고려하여, 자원 로더는 사전로딩(preloading), 캐싱(caching), 유휴 로딩(idle loading) 및 기타 수단을 더 제공할 수 있다.

단계 S803. 자원 로더가 서브애플리케이션 자원을 로드한 후 자원 정보 등록이 수행된다.

일례로서, 로딩된 서브애플리케이션 자원 정보는 자원 로더가 서브애플리케이션 자원을 로딩한 후 내부 메모리에 등록된다.

서브애플리케이션 로딩 모듈은 자원 로더와 자원 인스톨러(resource installer)를 포함한다. 자원 인스톨러는 Single-SPA 캡슐화에 기초하며, 다수의 프론트엔드 프레임워크 하에서 서브애플리케이션 실행 능력을 제공할 수 있다. Single-SPA는 라우트 모니터링 기능을 제공한다. 라우팅 전환이 적용되는 경우, 대응하는 서브애플리케이션의 프레임워크 코드와 비즈니스 코드가 라이프 사이클에 따라 로딩되어, 상이한 프레임워크들을 실행하고 다중 레벨 라우팅을 활성화하는 능력을 실현한다. 또한, 라우팅 전환은 노출된 로딩 함수에 의해 시뮬레이션되므로, 기본 애플리케이션이 활성 능력을 능동적으로 호출한다.

서브애플리케이션 실행 모듈은 JS 샌드박스와 CSS 샌드박스(전통적이지 않은 Iframe 모드가 존재함)를 포함하고, 서브애플리케이션 실행 모듈은 서브애플리케이션에 의해 끌려온 js 자원을 로딩하는 책임을 진다.

JS 샌드박스의 디자인은 도 9에 도시되어 있다. with 함수(901) 및 프록시(902)가 기본 js 샌드박스를 구현하는 데 사용된다. 본 출원의 이 실시예에서, Proxy 프록시 및 스냅샷 프록시 모드가 구현될 수 있으며, 스냅샷 프록시 모드는 ES6 Proxy를 지원하지 않는 환경과 호환 가능하다. 도 9에 도시된 바와 같이, 애플리케이션 로더의 자원 로더에 의해 파싱되는 실제 서브애플리케이션 코드(903)가 실행을 위해 프록시 샌드박스에 놓인다. 또한 제어 가능한 서브애플리케이션 하에서 기본 보안을 달성하기 위해, 스택 검사 및 키워드 검사에 의해 일반적인 작용 범위 탈출 방법이 방비된다.

본 출원의 이 실시예에서, 다음의 3가지 CSS 샌드박스 수단이 제공된다:

첫 번째 수단은 서브애플리케이션 웹팩 접두사에 기초한다. 서브애플리케이션은 패킹 도구에 균일하게 액세스해야 하며, 각 서브애플리케이션의 스타일에는 별개의 명칭공간이 할당된다.

두 번째 수단은 서브애플리케이션 런타임 접두사에 기초한다.

@keyframes, @font-face 및 @import와 같은 일부 스타일을 지원하는 것은 어렵고 동적으로 로딩되는 <link> 스타일은 특별한 처리가 필요하므로, 서브애플리케이션의 실행 중에 서브애플리케이션의 스타일에 접두사가 추가될 수 있다.

세 번째 수단은 Shadow Dom에 기초한다. Shadow Dom은 shadow 경계, 이벤트 손실, 액세스 제어(shadowRoot) 및 기타 문제를 처리해야 한다.

본 출원의 이 실시예에 의해 제공되는 마이크로프론트엔드 시스템은 라우팅 등록 서비스를 제공하며, 이는 독립적으로 유지되고 실행되는 노드 서비스로서 우수한 확장 및 재해 복구 능력을 제공하고 마이크로프론트엔드의 서브애플리케이션의 등록 및 로딩 라우팅을 유지한다. 또한 Single-SPA에 기초한 다중 프레임워크 서브애플리케이션 실행 능력이 제공된다. 기본 애플리케이션은 라우팅 등록에 의존하지 않고 능동적으로 서브애플리케이션을 렌더링할 수 있는 능력이 있는 맞춤형 로딩 스킴에 기초하여 제공된다. 또한 통신 메커니즘을 위해 세 가지 유형의 통신 지원, 즉 Props 송신, Custom Event 송신, PostMessage 송신이 제공된다. Props 송신은 반응형 양방향 데이터 전송 능력을 제공할 수 있다. Custom Event는 애플리케이션이 너무 많은 경우 관련 없는 이벤트의 영향을 피하면서, 구성 요소에 기초하여 이벤트의 배포 및 등록을 정의할 수 있다. PostMessage는 전역 이벤트 송신 및 수신을 제공하며, 브로드캐스트 메시지 통지를 구현하는 데 사용된다. 각각의 통신 차원에는 수단은 풍부하고 부작용이 적은, 대응하는 구현 스킴이 있다. 마이크로프론트엔드 시스템은 크로스 도메인을 지원을 위한 인터페이스 자원을 포함하는 서버측 CORS 스킴을 제공하고; 사유 정적 자원 및 CDN 정적 자원은 크로스 도메인을 지원하기 위해 CORS 스킴을 제공하고; Web Worker는 작업자의 크로스 도메인 호출 문제를 해결하기 위해 인라인 구축 로더와 인라인 실행 로더를 제공한다. 캐싱, 사전 로딩, Web Worker 및 기타 수단도 서브애플리케이션의 로딩 및 호출 속도를 높이기 위해 제공된다. 또한 런타임에 서브애플리케이션을 로딩하는 스킴이 제공되며, 이는 런타임에 서브애플리케이션 렌더링 콘텐츠 및 상호작용 논리를 변경할 수 있으므로 더 높은 자유도를 제공한다.

본 출원의 일 실시예는 컴퓨터 프로그램 제품 또는 컴퓨터 프로그램을 제공한다. 컴퓨터 프로그램 제품 또는 컴퓨터 프로그램은 컴퓨터 명령어를 포함하고, 컴퓨터 명령어는 컴퓨터로 판독 가능한 저장 매체에 저장된다. 컴퓨터 디바이스의 프로세서는 컴퓨터로 판독 가능한 저장 매체로부터 컴퓨터 명령어를 읽고, 컴퓨터 명령어를 실행하여, 컴퓨터 디바이스로 하여금 본 출원의 이 실시예에 따른 마이크로프론트엔드 시스템에 기초하여 서브애플리케이션 로딩 방법을 수행하게 한다.

본 출원의 일 실시예는 실행 가능한 명령어를 저장하는 저장 매체를 제공하며, 실행 가능한 명령어는 프로세서에 의해 실행될 때, 프로세서로 하여금 본 출원의 이 실시예에서 제공되는 서브애플리케이션 로딩 방법을 수행하게 한다. 예를 들어, 서브애플리케이션 로딩 방법은 도 3, 도 4 또는 도 5에 도시되어 있다.

일부 실시예에서, 저장 매체는 컴퓨터로 판독 가능한 저장 매체, 예를 들어 FRAM(Ferromagnetic Random Access Memory), ROM(Read-Only Memory), PROM(Programmable ROM), EPROM(Erasable PROM), EEPROM(Electrically EPROM), 플래시 메모리, 자기 표면 메모리, 콤팩트 디스크 또는 콤팩트 디스크 ROM(CD-ROM); 또는 전술한 메모리 중 하나 또는 임의의 조합을 포함하는 다양한 디바이스일 수 있다.

일부 실시예에서, 컴퓨터로 실행 가능한 명령어는 프로그램, 소프트웨어, 소프트웨어 모듈, 스크립트, 또는 코드의 형태로 그리고 임의의 형태의 프로그래밍 언어(컴파일러 또는 인터프리터 언어 또는 선언적 또는 절차적 언어 포함)에 따라 쓰여지고, 독립적인 프로그램 또는 모듈, 구성요소, 서브루틴 또는 컴퓨팅 환경에서 사용하기에 적합한 다른 유닛을 포함한 임의의 형식으로 배포될 수 있다.

일례서, 실행 가능한 명령어는 반드시 그런 것은 아니지만 파일 시스템의 파일에 대응할 수 있으며, 다른 프로그램 또는 기타 데이터를 저장하는 파일의 일부에 저장될 수 있는데, 예를 들어 HTML(Hyper Text Markup Language) 파일에 있는 하나 이상의 스크립트에 저장되거나, 논의 중인 프로그램에 특별히 사용되는 파일에 저장되거나, 복수의 공동 작업 파일에 저장됨(예: 하나 이상의 모듈, 서브프로그램, 또는 코드 부분들이 파일에 저장됨)에 저장될 수 있다. 일례에서, 실행 가능한 명령어는 컴퓨팅 디바이스에서 실행되도록 배포될 수 있거나, 동일한 장소에 있는 복수의 컴퓨팅 디바이스에서 실행되도록 배포될 수 있거나, 복수의 장소에 분산되어 있고 통신망을 사용하여 서로 연결되어 있는 복수의 컴퓨팅 디바이스에서 실행되도록 배포될 수 있다.

이상의 설명은 단지 본 출원의 실시예일 뿐이며 본 출원의 보호 범위를 한정하려는 것은 아니다. 본 출원의 사상과 범위를 벗어나지 않고 이루어진 모든 수정, 동등한 교체 또는 개선은 본 출원의 보호 범위에 속한다.

Claims

마이크로프론트엔드 시스템으로서,
라우팅 등록 서비스, 명령줄 도구 및 마이크로프론트엔드 실행 프레임워크를 포함하고,
상기 라우팅 등록 서비스는 독립적으로 유지되고 실행되는 노드 백엔드 서비스이며, 기본 애플리케이션(primary application)의 상기 마이크로프론트엔드 실행 프레임워크를 위한 서브애플리케이션의 라우팅 정보, 상기 서브애플리케이션의 로딩 방식 및 상기 서브애플리케이션의 배포 정보를 제공하도록 구성되고;
상기 명령줄 도구는 명령줄을 통해 서브애플리케이션 생성 기능, 상기 서브애플리케이션 액세스 기능 및 서비스 등록 기능을 제공하도록 구성되고;
상기 마이크로프론트엔드 실행 프레임워크는 상기 기본 애플리케이션에서 실행되는 프레임워크이며, 취득된 네트워크 요청에 기초하여 상기 서브애플리케이션을 로딩 및 실행하고 다중 프레임워크 서브애플리케이션 실행 능력을 제공하도록 구성되는,
마이크로프론트엔드 시스템.
제1항에 있어서,
상기 마이크로프론트엔드 시스템은,
상기 라우팅 등록 서비스에 대응하고, 서브애플리케이션 등록을 위해 설정되어야 하는 서브애플리케이션 등록 정보를 취득하고 상기 서브애플리케이션 등록 정보를 상기 라우팅 등록 서비스에 송신하도록 구성된 프론트엔드 인터페이스를 더 포함하고, 상기 서브애플리케이션 등록 정보는 서브애플리케이션 프레임워크, 서브애플리케이션 라우팅 모드 및 서브애플리케이션 로딩 모드를 포함하며;
상기 라우팅 등록 서비스는 추가로, 상기 서브애플리케이션 등록 정보를 수신하고 상기 서브애플리케이션 등록 정보에 기초하여 상기 서브애플리케이션을 등록하도록 구성되는, 마이크로프론트엔드 시스템.
제1항에 있어서,
상기 명령줄 도구는 추가로, 서브애플리케이션 생성 명령을 수신하고 상기 서브애플리케이션의 라우팅 정보, 상기 서브애플리케이션의 자원 정보 및 상기 서브애플리케이션 템플릿 정보를 취득하도록 구성되고;
상기 명령줄 도구는 추가로, 상기 서브애플리케이션 템플릿 정보에 기초하여 서브애플리케이션 템플릿을 생성하고, 상기 라우팅 등록 서비스에 서브애플리케이션 생성 요청을 송신하도록 구성되며, 상기 서브애플리케이션 생성 요청은 상기 라우팅 및 상기 자원 정보를 포함하고;
상기 명령줄 도구는 추가로, 서브애플리케이션 배포 요청을 배포 서버에 송신하도록 추가로 구성되며, 상기 서브애플리케이션 배포 요청은 상기 서브애플리케이션 배포 요청 내의 서브애플리케이션 자원 주소에 기초하여 자원 배포를 수행하도록 상기 배포 서버를 트리거하는 데 사용되는, 마이크로프론트엔드 시스템.
제2항에 있어서,
상기 명령줄 도구는 추가로, 서브애플리케이션 액세스 명령을 수신하고 상기 서브애플리케이션의 라우팅 정보 및 상기 서브애플리케이션의 자원 정보를 취득하도록 구성되며;
상기 명령줄 도구는 추가로, 서브애플리케이션 액세스 요청을 상기 라우팅 등록 서비스에 전송하도록 구성되며, 상기 서브애플리케이션 액세스 요청은 상기 서브애플리케이션의 상기 라우팅 정보 및 상기 자원 정보를 실어 전달하고;
상기 라우팅 등록 서비스는 추가로, 상기 서브애플리케이션 액세스 요청을 수신하고 상기 서브애플리케이션의 상기 라우팅 정보 및 상기 자원 정보에 기초하여 상기 서브애플리케이션을 등록하도록 구성되는, 마이크로프론트엔드 시스템.
제1항에 있어서,
상기 마이크로프론트엔드 실행 프레임워크는 기본 기능 라이브러리 모듈, 통신 모듈, 통합 라우팅 모듈, 서브애플리케이션 로딩 모듈 및 서브애플리케이션 실행 모듈을 포함하며,
상기 기본 기능 라이브러리 모듈은 공용 메서드 및 공용 구성요소를 제공하고, 전역 변수 및 함수에 의해 상기 공용 메서드 및 상기 공용 어셈블리를 상기 서브애플리케이션에 의한 사용을 위해 상기 서브애플리케이션에 주입하도록 구성되고;
상기 통신 모듈은 상기 기본 애플리케이션에서 상기 서브애플리케이션으로의, 상기 서브애플리케이션에서 상기 서브애플리케이션으로의 및 상기 서브애플리케이션에서 상기 기본 애플리케이션으로의 통신 메커니즘을 지원하도록 구성되고;
상기 통합 라우팅 모듈은 브라우저 라우팅 변경을 모니터링하도록 구성되고;
상기 서브애플리케이션 로딩 모듈은 상기 라우팅 등록 서비스로부터 서브애플리케이션 자원 주소를 취득하고 상기 서브애플리케이션 자원 주소에 대응하는 자원을 취득 및 로딩하도록 구성되고;
상기 서브애플리케이션 실행 모듈은 상기 서브애플리케이션 자원 주소에 대응하는 자원을 실행하고 서브애플리케이션 페이지를 렌더링하도록 구성되는, 마이크로프론트엔드 시스템.
제5항에 있어서,
상기 기본 애플리케이션에서 서브애플리케이션으로의 통신 메커니즘은 Props 송신 및 Custom Event 송신을 포함하고; 상기 서브애플리케이션에서 상기 서브애플리케이션으로의 통신 메커니즘은 PostMessage 송신을 포함하고; 상기 서브애플리케이션에서 상기 기본 애플리케이션으로의 통신 메커니즘은 Custom Event 송신을 포함하며;
상기 서브애플리케이션 로딩 모듈은 상기 서브애플리케이션을 로딩하기 위한 HTML(HyperText Markup Language) 엔티티 모드, JS 엔티티 모드 및 Iframe 모드를 포함하는, 마이크로프론트엔드 시스템.
제5항에 있어서,
상기 마이크로프론트엔드 실행 프레임워크는 데이터 관리 모듈, 성능 모니터링 모듈, 오류 처리 모듈을 더 포함하고,
상기 데이터 관리 모듈은 Props 송신 메커니즘에 의해 제공된 데이터에 의해 양방향 데이터 바인딩 기능을 실현하도록 구성되고;
상기 성능 모니터링 모듈은 상기 서브애플리케이션의 로딩 기간 및 실행 기간을 모니터링하도록 구성되고;
상기 오류 처리 모듈은 로딩 및 실행 프로세스에서 상기 서브애플리케이션의 오류 정보를 모니터링하고 처리하도록 구성되는, 마이크로프론트엔드 시스템.
제5항에 있어서,
상기 서브애플리케이션 로딩 모듈은 추가로, 상기 서브애플리케이션의 취득된 서비스 코드를 파싱하고, 파싱된 서비스 코드를 상기 서브애플리케이션 실행 모듈에 송신하도록 구성되고;
상기 서브애플리케이션 실행 모듈은 런타임 환경 샌드박스(runtime environment sandbox)를 포함하고;
상기 파싱된 서비스 코드는 런타임 환경 샌드박스에서 실행되는, 마이크로프론트엔드 시스템.
제8항에 있어서,
상기 런타임 환경 샌드박스는 JS 샌드박스, CSS(Cascading Style Sheet) 샌드박스 및 Web Worker 샌드박스를 포함하는, 마이크로프론트엔드 시스템.
제9항에 있어서,
상기 Web Worker 샌드박스는 상기 Web Worker에 할당된 스크립트 파일에 대해 인라인 실행을 수행하고 상기 Web Worker의 크로스 도메인 호출(cross-domain invocation)을 수행하도록 구성되는, 마이크로프론트엔드 시스템.
제1항 내지 제10항 중 어느 한 항에 있어서,
상기 마이크로프론트엔드 시스템은 크로스 도메인 자원 공유를 지원하는 서버를 더 포함하는 마이크로프론트엔드 시스템.
마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법으로서,
상기 서브애플리케이션 로딩 방법은 전자 디바이스에 의해 실행되고, 상기 마이크로프론트엔드 시스템은 라우팅 등록 서비스, 서브애플리케이션 로딩 모듈 및 서브애플리케이션 실행 모듈을 포함하며;
상기 서브애플리케이션 로딩 방법은,
네트워크 액세스 요청을 취득하는 단계 - 상기 네트워크 액세스 요청은 액세스될 페이지의 URL(Uniform Resource Locator) 주소를 실어 전달함 -;
상기 URL 주소에 기초하여 상기 라우팅 등록 서비스로부터 대응하는 라우팅 정보를 끌어오는 단계;
상기 라우팅 정보에 기초하여, 상기 액세스될 페이지가 서브애플리케이션 페이지인 것으로 결정되는 경우, 상기 서브애플리케이션 로딩 모듈이 상기 라우팅 정보에 기초하여 상기 라우팅 등록 서비스로부터 상기 라우팅 등록에 대응하는 서브애플리케이션 자원을 취득하는 단계;
상기 서브애플리케이션 자원의 로딩이 필요한 경우, 상기 서브애플리케이션 로딩 모듈이 상기 서브애플리케이션 자원을 로딩하는 단계; 및
상기 서브애플리케이션 실행 모듈이 상기 서브애플리케이션 자원을 실행하고, 상기 서브애플리케이션 페이지를 렌더링하는 단계
를 포함하는 서브애플리케이션 로딩 방법.
제12항에 있어서,
상기 서브애플리케이션 로딩 방법은,
상기 서브애플리케이션 자원이 사전 로딩 또는 개방되어 있는지를 판정하는 단계;
상기 서브애플리케이션 자원이 사전 로딩되지도 개방되지도 않은 경우, 상기 서브애플리케이션 자원이 로딩되어야 하는 것으로 결정하는 단계를 더 포함하는 서브애플리케이션 로딩 방법.
제12항에 있어서,
상기 서브애플리케이션 로딩 방법은,
서브애플리케이션 등록을 위해 설정되어야 하는 서브애플리케이션 등록정보를 취득하고, 상기 서브애플리케이션 등록 정보를 상기 라우팅 등록 서비스에 송신하는 단계 - 상기 서브애플리케이션 등록 정보는 서브애플리케이션 프레임워크, 서브애플리케이션 라우팅 모드 및 서브애플리케이션 로딩 모드를 포함함 -;
상기 라우팅 등록 서비스가 상기 서브애플리케이션 등록 정보를 수신하고 상기 서브애플리케이션 등록 정보에 기초하여 상기 서브애플리케이션을 등록하는 단계를 더 포함하는 서브애플리케이션 로딩 방법.
제14항에 있어서,
상기 서브애플리케이션 등록을 위해 설정되어야 하는 상기 서브애플리케이션 등록 정보를 취득하는 단계는,
상기 라우팅 등록 서비스에 대응하는 프론트엔드 인터페이스가 서브애플리케이션 등록을 위한 입력 조작을 취득하는 단계;
상기 입력 조작에 기초하여 상기 서브애플리케이션 등록 정보를 결정하는 단계; 또는
명령줄 도구가 서브애플리케이션 생성 명령을 수신하고, 상기 서브애플리케이션의 라우팅 정보, 상기 서브애플리케이션의 자원 정보 및 서브애플리케이션 템플릿 정보를 취득하는 단계를 포함하는, 서브애플리케이션 로딩 방법.
제12항에 있어서,
상기 서브애플리케이션 자원이 로딩되어야 하는 경우, 상기 서브애플리케이션 로딩 모듈이 상기 서브애플리케이션 자원을 로딩하는 단계는,
상기 서브애플리케이션 자원의 로딩이 필요한 경우, 상기 서브애플리케이션의 프레임워크 식별자 및 자원 로딩 유형을 취득하는 단계; 및
상기 자원 로딩 유형에 따라, 상기 프레임워크 식별자에 대응하는 서브애플리케이션 프레임워크의 서브애플리케이션 자원을 로딩하는 단계를 포함하는, 서브애플리케이션 로딩 방법.
제12항 내지 제16항 중 어느 한 항에 있어서,
상기 서브애플리케이션 로딩 방법은,
상기 라우팅 정보에 기초하여 상기 액세스될 페이지가 기본 애플리케이션 페이지인 것으로 결정하는 경우, 라이프 사이클에 따라 기본 애플리케이션의 현재 탑재된 서브애플리케이션을 결정하는 단계;
상기 현재 탑재된 서브애플리케이션으로부터 렌더링될 타깃 서브애플리케이션을 결정하는 단계;
노출된 로딩 함수 및 상기 타깃 서브애플리케이션에 기초하여 라우팅 전환을 시뮬레이션하고, 상기 타깃 서브애플리케이션의 서브애플리케이션 자원 및 기본 애플리케이션 자원을 취득하는 단계; 및
상기 서브애플리케이션 자원 및 상기 기본 애플리케이션 자원을 로딩하여 실행하고, 상기 기본 애플리케이션의 렌더링된 페이지에 상기 서브애플리케이션을 렌더링하는 단계를 더 포함하는 서브애플리케이션 로딩 방법.
실행 가능한 명령어를 저장하는, 컴퓨터로 판독 가능한 저장 매체로서,
상기 실행 가능한 명령어는 프로세서에 의해 실행될 때, 제12항 내지 제17항 중 어느 한 항에 따라 정보 흐름을 위한 마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법을 구현하는,
컴퓨터로 판독 가능한 저장 매체.
메모리 및 프로세서를 포함하는 전자 디바이스로서,
상기 메모리는 컴퓨터 프로그램을 저장하고;
상기 프로세서는 상기 컴퓨터 프로그램을 통해 제12항 내지 제17항 중 어느 한 항에 따라 마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법을 수행하도록 구성되는,
전자 디바이스.
컴퓨터 프로그램을 포함하는 컴퓨터 프로그램 제품으로서,
상기 컴퓨터 프로그램은 프로세서에 의해 실행될 때, 제12항 내지 제17항 중 어느 한 항에 따라 마이크로프론트엔드 시스템에 기초한 서브애플리케이션 로딩 방법을 구현하는,
컴퓨터 프로그램 제품.