Show Menu
화제×

SPA 페이지 구성 요소

SPA에서 페이지 구성 요소는 하위 구성 요소의 HTML 요소를 제공하지 않지만, 대신 이 요소를 SPA 프레임워크에 위임합니다. 이 문서에서는 SPA의 페이지 구성 요소를 고유하게 만드는 방법을 설명합니다.
SPA 편집기는 SPA 프레임워크 기반의 클라이언트측 렌더링(예: 반응 또는 각도)이 필요한 프로젝트에 권장되는 솔루션입니다.

소개

SPA용 페이지 구성 요소는 JSP 또는 HTL 파일 및 리소스 객체를 통해 하위 구성 요소의 HTML 요소를 제공하지 않습니다. 이 작업은 SPA 프레임워크에 위임됩니다. 하위 구성 요소의 표현은 JSON 데이터 구조(예: 모델)로 가져옵니다. SPA 구성 요소는 제공된 JSON 모델에 따라 페이지에 추가됩니다. 따라서 페이지 구성 요소의 초기 본문 컴포지션은 사전 렌더링된 HTML 시퀀스와 다릅니다.

페이지 모델 관리

페이지 모델의 해상도 및 관리는 제공된 PageModelManager 모듈로 위임됩니다. SPA는 초기화를 통해 초기 페이지 모델을 가져오고 모델 업데이트를 등록하도록 PageModelManager 모듈(작성자가 페이지 편집기를 통해 페이지를 편집할 때 주로 생성됨)과 상호 작용해야 합니다. SPA 프로젝트 PageModelManager 에서 npm 패키지로 이용할 수 있습니다. AEM과 SPA의 인터프리터가 되는 것 PageModelManager 은 SPA를 동반하기 위한 것입니다.
페이지를 작성할 수 있도록 하려면 SPA와 페이지 편집기 간의 통신 채널을 제공하기 위해 이름이 지정된 클라이언트 라이브러리를 추가해야 cq.authoring.pagemodel.messaging 합니다. SPA 페이지 구성 요소가 페이지 wcm/core 구성 요소에서 상속되는 경우 클라이언트 라이브러리 카테고리를 사용할 수 있도록 하는 다음과 같은 옵션이 cq.authoring.pagemodel.messaging 있습니다.
  • 템플릿을 편집할 수 있는 경우 클라이언트 라이브러리 범주를 페이지 정책에 추가합니다.
  • 페이지 구성 요소의 속성을 사용하여 클라이언트 라이브러리 범주 customfooterlibs.html 를 추가합니다.
페이지 편집기의 컨텍스트에 대한 cq.authoring.pagemodel.messaging 카테고리 포함을 제한하는 것을 잊지 마십시오.

통신 데이터 유형

통신 데이터 유형은 속성을 사용하여 AEM 페이지 구성 요소 내의 HTML 요소를 data-cq-datatype 설정합니다. 통신 데이터 유형이 JSON으로 설정되면 GET 요청은 구성 요소의 Sling Model 끝점에 도달합니다. 페이지 편집기에서 업데이트가 발생하면 업데이트된 구성 요소의 JSON 표현이 페이지 모델 라이브러리로 전송됩니다. 그런 다음 페이지 모델 라이브러리가 업데이트 SPA에 경고를 표시합니다.
SPA 페이지 구성 요소 - body.html
<div id="page"></div>

DOM 생성을 지연시키지 않도록 하기 위한 우수 사례 외에도, SPA 프레임워크는 본문 끝에 스크립트를 추가해야 합니다.
SPA 페이지 구성 요소 - customfooterlibs.html
<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"></sly>
<sly data-sly-test="${wcmmode.edit || wcmmode.preview}"
     data-sly-call="${clientLib.js @ categories='cq.authoring.pagemodel.messaging'}"></sly>
<sly data-sly-call="${clientLib.js @ categories='we-retail-journal-react'}"></sly>

SPA 컨텐츠를 설명하는 메타 리소스 속성:
SPA 페이지 구성 요소 - customheaderlibs.html
<meta property="cq:datatype" data-sly-test="${wcmmode.edit || wcmmode.preview}" content="JSON"/>
<meta property="cq:wcmmode" data-sly-test="${wcmmode.edit}" content="edit"/>
<meta property="cq:wcmmode" data-sly-test="${wcmmode.preview}" content="preview"/>
<meta property="cq:pagemodel_root_url" data-sly-use.page="com.adobe.cq.sample.spa.journal.models.AppPage" content="${page.rootUrl}"/>
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='we-retail-journal-react'}"/>
</sly>

기본 모델 선택기는 구성 요소의 슬링 모델 표현을 요청할 때 정적으로 설정됩니다.

메타 속성

  • cq:wcmmode : 편집기의 WCM 모드(예: 페이지, 템플릿)
  • cq:pagemodel_root_url : 앱의 루트 모델의 URL입니다. 하위 페이지 모델이 앱 루트 모델의 일부이므로 하위 페이지에 직접 액세스할 때 매우 중요합니다. 그런 [PageModelManager](/help/sites-developing/spa-page-component.md) 다음 애플리케이션 초기 모델을 루트 시작 지점에서 애플리케이션에 들어갈 때와 같이 체계적으로 재구성합니다.
  • cq:pagemodel_router : 라이브러리 [ModelRouter](/help/sites-developing/spa-routing.md) 를 활성화하거나 PageModelManager 비활성화합니다
  • cq:pagemodel_route_filters : 무시해야 하는 경로를 제공하기 위해 쉼표로 구분된 목록 또는 정규 표현식을 사용할 [ModelRouter](/help/sites-developing/spa-routing.md) 수 있습니다.
이 문서에서는 데모용으로만 We.Retail Journal 앱을 사용합니다. 어떤 프로젝트 작업에도 사용해서는 안 됩니다.
모든 AEM 프로젝트는 React 또는 Angular를 사용하여 SPA 프로젝트를 지원하고 SPA SDK를 활용하는 AEM Project Tranype 을 활용해야 합니다. AEM의 모든 SPA 프로젝트는 SPA Starter Kit용 Maven 원형형을 기반으로 해야 합니다.

페이지 편집기 오버레이 동기화

오버레이의 동기화는 카테고리에서 제공하는 매우 동일한 돌연변이 관찰자에 의해 cq.authoring.page 보장됩니다.

Sling 모델 JSON 내보내기 구조 구성

라우팅 기능이 활성화되면 AEM 탐색 구성 요소의 JSON 내보내기 덕분에 SPA의 JSON 내보내기에 애플리케이션의 다른 경로가 포함되어 있는 것으로 가정합니다. AEM 탐색 구성 요소의 JSON 출력은 다음 두 속성을 통해 SPA의 루트 페이지 컨텐츠 정책에 구성할 수 있습니다.
  • structureDepth : 내보낸 트리 깊이에 해당하는 숫자
  • structurePatterns : 내보낼 페이지에 해당하는 레익스의 배열을 재구성합니다.
SPA 샘플 컨텐츠에 표시될 수 있습니다 /conf/we-retail-journal/react/settings/wcm/policies/we-retail-journal/react/components/structure/page/root .