매쉬업에서 지연 로드 사용
지연 로드를 통해 리소스 요구 및 데이터 집약적 작업을 줄이거나 지연시켜 매쉬업 로드 시간 및 성능을 향상시킬 수 있습니다. 지연 로드를 사용하면 필수 구성 요소를 로드하도록 매쉬업을 구성한 다음 사용자가 수행하는 작업에 따라 추가 데이터를 로드하고 서비스를 실행할 수 있습니다. 또한 컨테이너를 볼 수 없는 경우 DOM에서 컨테이너를 언로드하여 시스템 리소스를 해제하고 성능을 향상시킬 수 있습니다. 이를 통해 사용자가 중요한 기능에 더 빠르게 액세스할 수 있으므로 매쉬업의 전체 반응성이 향상됩니다. Mashup Builder에서 지연 로드는 다음 컨테이너 유형에 대한 속성, 이벤트 및 서비스를 사용하여 지원됩니다.
• 레이아웃 컨테이너
• 탭 및 동적 패널 위젯 내의 컨테이너
일반적으로 매쉬업 Loaded 이벤트는 데이터를 볼 수 없는 경우에도 매쉬업에서 데이터 서비스 및 함수를 실행하는 데 사용됩니다. 더 복잡한 매쉬업을 설계하기 때문에 다음이 포함된 매쉬업을 사용하는 사용자는 긴 로드 시간과 성능 저하를 경험할 수 있습니다.
• 동시에 실행되는 많은 수의 데이터 서비스
• 리소스를 다운로드하는 데 걸리는 시간에 영향을 줄 수 있는 큰 미디어 엔티티
• 복잡한 그리드 및 컬렉션 위젯과 같이 렌더링 성능에 영향을 줄 수 있는 많은 양의 데이터를 표시하는 시각화
예를 들어, 탭 위젯을 사용하여 각 탭에 다른 유형의 시각화 또는 입력 위젯 집합이 포함된 레이아웃을 만드는 매쉬업을 고려해 보십시오. 사용자가 일부 탭만 볼 필요가 있을 때 모든 탭에 대한 데이터를 병렬로 로드하면 로드 시간과 서버에 대한 총 네트워크 요청 수가 늘어납니다. 사용자가 수행하는 작업, 서비스의 출력 또는 식 함수를 기반으로 특정 탭을 로드하도록 선택할 수 있습니다. 탭 위젯에서 지연 로드를 사용하는 방법에 대한 자세한 내용은 탭 위젯(테마 사용 가능)을 참조하십시오.
모범 사례 및 사용 고려 사항
• 매쉬업 이벤트 대신 컨테이너의 Loaded 이벤트를 사용하여 지연 로드된 위젯에 바인딩된 서비스를 실행합니다. 지연 로드된 컨테이너에 대한 서비스를 실행하기 위해 매쉬업 Loaded 이벤트를 바인딩하면 LoadContainer 서비스가 실행되지 않는 한 어떠한 결과도 표시되지 않습니다.
• 솔루션의 레이아웃을 설계한 다음 별도로 로드할 수 있는 매쉬업 부분을 결정합니다. 솔루션의 일반적인 사용 사례를 고려하고 해당 정보를 사용하여 콘텐츠를 로드하는 방법을 결정합니다. 어떤 경우에는 처음에 필요한 것보다 더 많은 데이터를 로드하면 사용자가 다른 보기 사이를 빠르게 전환해야 할 때 사용자 경험이 더 나아질 수 있으므로 한 번에 각 탭을 로드하는 시간이 줄어듭니다. 컨테이너 또는 탭을 열 때마다 두 번째 또는 두 개의 데이터를 로드하는 대신 특정 데이터를 미리 로드하도록 선택할 수 있습니다. 매쉬업을 만든 후에는 로드 시간과 성능을 측정한 다음 이를 설계의 예상 사용 사례와 비교해야 합니다.
• 컨테이너가 콘텐츠를 로드하는 데 몇 초가 걸리는 경우 현재 보기에 콘텐츠가 더 이상 없는 경우에도 해당 콘텐츠를 로드된 상태로 유지하는 것이 좋습니다. 콘텐츠를 로드된 상태로 유지하면 사용자가 다른 보기로 전환한 다음 이전 보기로 돌아갈 때마다 콘텐츠가 다시 로드될 때까지 기다리지 않아도 됩니다. 사용자가 수동으로 데이터를 다시 로드할 수 있도록 버튼을 추가하고 해당 버튼을 ReloadContainer 위젯에 바인딩할 수 있습니다.
• 지연 로드된 컨테이너의 데이터는 컨테이너가 로드된 후에만 다른 위젯, 함수 또는 서비스에서 사용되어야 합니다.
• 매쉬업에는 항상 모든 사용자와 관련이 있는 것은 아닌 많은 위젯 및 섹션이 포함될 수 있습니다. 위젯 및 데이터의 로드 및 표시 유형을 제어하는 서비스 및 함수를 사용하여 규칙을 만듭니다. 사용자 입력 또는 런타임에 발생하는 이벤트를 기반으로 콘텐츠를 로드할 수 있습니다.
지연 로드된 컨테이너에서 표시 유형 규칙을 사용할 때 필요할 때만 표시되도록 합니다.
• 지연 로드된 위젯의 입력 매개 변수를 사용하는 함수는 상위 컨테이너가 로드된 후 실행되어야 합니다. 바인딩된 참가자가 모두 표시되거나 적어도 한 번 표시된 경우에만 매쉬업 함수가 작동할 수 있습니다.
컨테이너에 대한 지연 로드 속성을 구성하려면 다음을 수행하십시오.
1. Mashup Builder의 캔버스에서 또는 탐색기 패널을 사용하여 컨테이너를 선택합니다.
2. 속성 패널에서 컨테이너 LazyLoading 속성을 True로 설정합니다. 지연 로드에 대한 추가 속성, 서비스 및 이벤트가 표시됩니다.
◦ 컨테이너에 대한 데이터를 언로드하려면 EnableContainerUnload 속성을 True로 설정한 다음 UnloadContainer 서비스를 실행하는 이벤트를 바인딩합니다.
◦ 런타임에 컨테이너를 로드하려면 LoadContainer 서비스를 위젯, 함수 또는 데이터 서비스 이벤트에 바인딩합니다.
 |
지연 로드에 대해 구성된 탭으로 전환하면 탭 위젯 내에서 지연 로드된 컨테이너가 자동으로 로드, 언로드, 다시 로드됩니다.
|
◦ 컨테이너 내의 콘텐츠를 다시 로드하려면 ReloadContainer 서비스를 버튼 클릭과 같은 이벤트에 바인딩합니다.
3. 선택한 컨테이너의 Loaded 이벤트를 바인딩하여 위젯, 데이터 서비스 또는 함수 내에서 서비스를 실행합니다.
또는 DOM에서 컨테이너가 제거될 때 작업을 수행하도록 Unloaded 이벤트를 바인딩합니다.
4. 저장을 클릭한 다음 매쉬업 보기를 클릭합니다.
런타임에 LoadContainer가 실행되면 Loaded 이벤트는 식 또는 유효성 검사기 함수의 Evaluate 서비스 또는 차트에 대한 데이터와 같은 바인딩된 서비스를 트리거하고 실행합니다.
지연 로드 속성
다음 표에는 매쉬업의 컨테이너에 대한 지연 로드를 활성화하고 구성하는 데 사용할 수 있는 속성, 이벤트 및 서비스가 나와 있습니다.
|
속성
|
설명
|
기본 유형
|
기본값
|
|---|---|---|---|
|
LazyLoading
|
런타임에 위젯, 함수 또는 서비스 이벤트를 사용하여 컨테이너를 로드, 언로드 및 다시 로드할 수 있습니다.
|
BOOLEAN
|
False
|
|
LoadContainer
|
위젯, 함수 또는 서비스 이벤트를 사용하여 런타임에 컨테이너를 로드, 언로드 및 다시 로드할 수 있는 바인딩 가능한 서비스입니다.
|
서비스
|
|
|
Loaded
|
컨테이너가 런타임 매쉬업 보기에서 로드되고 표시될 때 트리거되는 이벤트입니다. 이 이벤트를 사용하여 컨테이너 내의 위젯에 바인딩된 서비스를 실행할 수 있습니다.
|
이벤트
|
|
|
EnableContainerUnload
|
LazyLoading 속성이 활성화된 경우 UnloadContainer 서비스를 사용하여 컨테이너 및 해당 콘텐츠를 언로드할 수 있습니다.
|
BOOLEAN
|
False
|
|
UnloadContainer
|
런타임 매쉬업 보기에서 하위 컨테이너를 포함하여 컨테이너 및 해당 콘텐츠를 언로드합니다. 이 이벤트를 버튼 위젯 Clicked 이벤트 또는 유효성 검사 함수 True 이벤트와 같은 매쉬업의 이벤트에 바인딩합니다.
|
서비스
|
|
|
ReloadContainer
|
런타임 매쉬업 보기에서 컨테이너 및 해당 콘텐츠를 언로드하고 로드하여 다시 로드합니다. 이 속성은 EnableContainerUnload가 선택된 경우에만 사용할 수 있습니다.
|
서비스
|
|
|
Unloaded
|
컨테이너를 언로드하고 런타임 매쉬업 보기에서 제거할 때 트리거되는 이벤트입니다. 이 속성은 EnableContainerUnload가 선택된 경우에만 사용할 수 있습니다.
|
이벤트
|
사용자 정의 위젯 확장 내에서 지연 로드 사용
다음 단원에서는 지연 로드를 지원하도록 사용자 정의 위젯 확장을 업데이트하는 데 필요한 단계에 대해 설명합니다. 컨테이너에 지연 로드 기능을 사용하려면 위젯 <widgetname>.runtime.js 파일을 수동으로 검토하고 업데이트해야 합니다.
위젯은 HTML DOM에서 제거되기 전에 위젯 바인딩 및 데이터를 지우는 데 사용되는 beforeDestroy() 함수를 사용합니다. 이전 버전의 ThingWorx에서 위젯을 DOM에서 제거하는 일반적인 방법은 beforeDestroy가 호출될 때 위젯 객체를 가리키는 변수를 선언한 다음 null 값을 이 변수에 지정하는 것입니다. 예를 들면, 다음과 같습니다.
this.beforeDestroy = function(){
/** Destroy widget
thisWidget = null;
}
/** Destroy widget
thisWidget = null;
}
이 방법을 사용하여 위젯을 폐기하면 호출된 메서드가 이 변수를 사용하려고 할 때 위젯을 다시 로드하면 문제가 발생합니다. 사용자 정의 위젯에 지연 로드를 사용하려면 domOnly 인수를 추가하여 사용자 정의 위젯 확장의 <widgetname>.runtime.js 파일에서 beforeDestroy() 함수에 대한 참조를 업데이트해야 합니다. 다음은 코드의 예입니다.
this.beforeDestroy = function(domOnly) {
if (!domOnly) {
thisWidget = null;
]
};
if (!domOnly) {
thisWidget = null;
]
};
domOnly 인수를 사용하면 위젯을 폐기하지 않고 DOM에서 위젯을 제거하고 나중에 DOM에 다시 로드할 수 있습니다.
기존 확장을 업데이트하려면 다음 단계를 수행합니다.
1. 위젯 확장을 추출한 다음 텍스트 편집기에서 <widgetname>.runtime.js 위젯 소스 파일을 엽니다. 이 JavaScript 파일은 위젯이 매쉬업에서 사용될 때의 위젯 구조 및 해당 동작을 정의합니다.
2. 파일 콘텐츠에서 beforeDestroy() 함수에 대한 참조를 검색합니다. 위젯의 DOM 요소가 제거되고 위젯이 상위 위젯에서 분리되고 폐기되기 전에 이 함수가 호출됩니다.
◦ 메서드가 참조되는 경우 domOnly 인수를 다음과 같이 추가합니다.
this.beforeDestroy = function(domOnly) {
3. domOnly 인수의 값이 false인 경우에만 위젯을 폐기하도록 변수 지정에 대한 조건문을 추가합니다.
if (!domOnly) {
thisWidget = null;
}
thisWidget = null;
}
4. 위젯의 runtime.js 파일을 저장한 다음 사용자 정의 확장을 다시 패키징합니다.
5. Composer에서 업데이트된 위젯을 가져옵니다.
이제 지연 로드된 컨테이너에서 사용자 정의 위젯을 사용할 수 있습니다.