SPA 구성 요소를 AEM 구성 요소에 매핑 map-components

SPA 코드로 이동하기 전에 AEM에서 제공하는 JSON 모델을 이해하는 것이 중요합니다. 핵심 구성 요소 라이브러리(으)로 이동하여 텍스트 구성 요소에 대한 페이지를 봅니다. 핵심 구성 요소 라이브러리는 모든 AEM 핵심 구성 요소의 예를 제공합니다.

다음 예제 중 하나에 대해 JSON 탭을 선택하십시오.

세 개의 속성(text, richText 및 :type)이 표시됩니다.

:type은(는) AEM 구성 요소의 sling:resourceType(또는 경로)을(를) 나열하는 예약된 속성입니다. :type의 값은 AEM 구성 요소를 SPA 구성 요소에 매핑하는 데 사용되는 값입니다.

text 및 richText은(는) SPA 구성 요소에 노출되는 추가 속성입니다.

http://localhost:4502/content/wknd-spa-react/us/en.model.json에서 JSON 출력을 봅니다. 다음과 유사한 항목을 찾을 수 있어야 합니다.

"text": {
    "id": "text-a647cec03a",
    "text": "<p>Hello World! Updated content!</p>\r\n",
    "richText": true,
    ":type": "wknd-spa-react/components/text",
    "dataLayer": {}
   }

선택한 IDE에서 SPA용 AEM 프로젝트를 엽니다. ui.frontend 모듈을 확장하고 ui.frontend/src/components/Text/Text.js에서 Text.js 파일을 엽니다.

검사해야 할 첫 번째 영역은 class Text의 ~줄 40입니다.

class Text extends Component {

    get richTextContent() {
        return (<div
                id={extractModelId(this.props.cqPath)}
                data-rte-editelement
                dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(this.props.text)}} />
                );
    }

    get textContent() {
        return <div>{this.props.text}</div>;
    }

    render() {
        return this.props.richText ? this.richTextContent : this.textContent;
    }
}

Text은(는) 표준 React 구성 요소입니다. 구성 요소는 this.props.richText을(를) 사용하여 렌더링할 콘텐츠가 서식 있는 텍스트인지 일반 텍스트인지를 결정합니다. 사용된 실제 "콘텐츠"는 this.props.text에서 가져옵니다.

잠재적인 XSS 공격을 방지하기 위해 콘텐츠를 렌더링하기 위해 위험한SetInnerHTML을(를) 사용하기 전에 DOMPurify을(를) 통해 서식 있는 텍스트가 이스케이프됩니다. 연습 앞부분에서 JSON 모델에서 richText 및 text 속성을 회수합니다.

ui.frontend/src/components/import-components.js을(를) 열고 ~86번 줄에서 TextEditConfig을(를) 봅니다.

const TextEditConfig = {
emptyLabel: 'Text',

    isEmpty: function(props) {
        return !props || !props.text || props.text.trim().length < 1;
    }
};

위의 코드는 AEM 작성 환경에서 자리 표시자를 렌더링할 시기를 결정합니다. isEmpty 메서드가 true ​을(를) 반환하면 자리 표시자가 렌더링됩니다.

마지막으로 ~94행의 MapTo 호출을 살펴보십시오.

export default MapTo('wknd-spa-react/components/text')(LazyTextComponent, TextEditConfig);

MapTo은(는) AEM SPA Editor JS SDK(@adobe/aem-react-editable-components)에서 제공합니다. wknd-spa-react/components/text 경로는 AEM 구성 요소의 sling:resourceType을(를) 나타냅니다. 이 경로는 이전에 관찰된 JSON 모델에 의해 노출된 :type과(와) 일치합니다. MapTo은(는) JSON 모델 응답을 구문 분석하고 올바른 값을 props(으)로 SPA 구성 요소에 전달합니다.

ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/text에서 AEM Text 구성 요소 정의를 찾을 수 있습니다.

프로젝트 코드에서 ui.frontend/src/components의 import-components.js 파일을 엽니다.
이 파일은 AEM 구성 요소에 매핑되는 모든 SPA 구성 요소를 가져옵니다. SPA Editor 구현의 동적 특성이 주어지면 AEM 작성자 가능 구성 요소에 연결된 SPA 구성 요소를 명시적으로 참조해야 합니다. 이를 통해 AEM 작성자는 애플리케이션에서 원하는 위치에 구성 요소를 사용할 수 있습니다.

다음 가져오기 구문에는 프로젝트에 작성된 SPA 구성 요소가 포함됩니다.

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';

@adobe/aem-core-components-react-spa 및 @adobe/aem-core-components-react-base의 다른 imports이(가) 몇 개 있습니다. React 코어 구성 요소를 가져와 현재 프로젝트에서 사용할 수 있도록 설정하는 것입니다. 그런 다음 이전 Text 구성 요소 예제와 마찬가지로 MapTo을(를) 사용하여 프로젝트별 AEM 구성 요소에 매핑됩니다.

AEM 시작 화면에서 도구 > 템플릿 > WKND SPA React(으)로 이동합니다.

편집할 SPA 페이지 템플릿을 선택하고 엽니다.

레이아웃 컨테이너 ​를 선택하고 정책 아이콘을 클릭하여 정책을 편집합니다.

허용된 구성 요소 > WKND SPA React - 콘텐츠 > 확인 이미지, 티저 및 제목 ​에서.

기본 구성 요소 > 매핑 추가 ​에서 이미지 - WKND SPA React - 콘텐츠 구성 요소를 선택합니다.

image/*의 mime 유형 ​을(를) 입력하십시오.

정책 업데이트를 저장하려면 완료 ​를 클릭하십시오.

레이아웃 컨테이너 ​에서 Text 구성 요소에 대한 정책 아이콘을 클릭합니다.

WKND SPA 텍스트(이)라는 새 정책을 만듭니다. 플러그인 > 서식 > 모든 상자를 선택하여 추가 서식 옵션을 사용하도록 설정합니다.

플러그인 > 단락 스타일 > 단락 스타일 사용 확인란을 선택합니다.

정책 업데이트를 저장하려면 완료 ​를 클릭하십시오.

홈 페이지 http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html(으)로 이동합니다.

이제 페이지에서 추가 구성 요소 이미지, 티저 및 제목 ​을 사용할 수 있습니다.

전체 화면 모드에서 Text 구성 요소를 편집하고 추가 단락 스타일을 추가할 수도 있습니다.

자산 파인더 ​에서 이미지를 드래그 앤 드롭할 수도 있습니다.

Title 및 Teaser 구성 요소를 사용한 경험.

AEM Assets를 통해 자신의 이미지를 추가하거나 표준 WKND 참조 사이트에 대한 완성된 코드 베이스를 설치하십시오. WKND 참조 사이트에 WKND SPA에서 다시 사용할 수 있는 많은 이미지가 포함되어 있습니다. 패키지는 AEM의 패키지 관리자를 사용하여 설치할 수 있습니다.

브라우저에서 http://localhost:4502/content/wknd-spa-react/us/en.model.json(으)로 이동

레이아웃 컨테이너 구성 요소에 wcm/foundation/components/responsivegrid의 sling:resourceType이(가) 있으며, Text 및 Image 구성 요소와 마찬가지로 :type 속성을 사용하여 SPA 편집기에서 인식됩니다.

SPA 편집기에서 레이아웃 모드를 사용하여 구성 요소 크기를 다시 조정하는 것과 동일한 기능을 사용할 수 있습니다.

http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html(으)로 돌아갑니다. 이미지 구성 요소를 추가하고 레이아웃 옵션을 사용하여 크기를 다시 조정해 보십시오.

JSON 모델 http://localhost:4502/content/wknd-spa-react/us/en.model.json을(를) 다시 열고 columnClassNames을(를) JSON의 일부로 관찰합니다.

클래스 이름 aem-GridColumn--default--4은(는) 구성 요소의 너비가 12개 열 그리드를 기준으로 4열이어야 함을 나타냅니다. 응답형 격자에 대한 자세한 내용은 여기를 참조하십시오.

IDE로 돌아가서 ui.apps 모듈에 ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-grid에 정의된 클라이언트측 라이브러리가 있습니다. less/grid.less 파일을 엽니다.

이 파일은 레이아웃 컨테이너 ​에서 사용하는 중단점(default, tablet 및 phone)을 결정합니다. 이 파일은 프로젝트 사양에 따라 사용자 지정하기 위한 것입니다. 현재 중단점은 1200px 및 768px(으)로 설정되어 있습니다.

Text 구성 요소의 응답형 기능과 업데이트된 서식 있는 텍스트 정책을 사용하여 다음과 같은 보기를 작성할 수 있어야 합니다.

Visual Studio 코드 IDE에서 Marketplace 확장을 통해 VSCode AEM Sync ​가 설치되어 있는지 확인합니다.

프로젝트 탐색기에서 ui.content 모듈을 확장하고 /conf/wknd-spa-react/settings/wcm/templates(으)로 이동합니다.

templates 폴더를 마우스 오른쪽 단추로 클릭 ​하고 AEM Server에서 가져오기 ​를 선택합니다.

콘텐츠를 가져오려면 단계를 반복하되 /conf/wknd-spa-react/settings/wcm/templates/policies에 있는 정책 폴더를 선택하십시오.

ui.content/src/main/content/META-INF/vault/filter.xml에 있는 filter.xml 파일을 Inspect으로 가져옵니다.

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
 <workspaceFilter version="1.0">
     <filter root="/conf/wknd-spa-react" mode="merge"/>
     <filter root="/content/wknd-spa-react" mode="merge"/>
     <filter root="/content/dam/wknd-spa-react" mode="merge"/>
     <filter root="/content/experience-fragments/wknd-spa-react" mode="merge"/>
 </workspaceFilter>

filter.xml 파일은 패키지와 함께 설치된 노드의 경로를 식별합니다. 각 필터에서 mode="merge"을(를) 확인합니다. 이는 기존 콘텐츠는 수정되지 않고 새 콘텐츠만 추가됨을 나타냅니다. 콘텐츠 작성자가 이러한 경로를 업데이트할 수 있으므로 코드 배포는 콘텐츠를 덮어쓰지 ​하지 않는 것이 중요합니다. 필터 요소 작업에 대한 자세한 내용은 FileVault 설명서를 참조하십시오.

ui.content/src/main/content/META-INF/vault/filter.xml과(와) ui.apps/src/main/content/META-INF/vault/filter.xml을(를) 비교하여 각 모듈에서 관리하는 다른 노드를 이해합니다.

핵심 구성 요소 라이브러리의 이미지 예제(으)로 이동합니다.

src, alt 및 title의 속성을 사용하여 SPA Image 구성 요소를 채웁니다.

그런 다음 ui.frontend/src/components 아래에 Image(이)라는 새 폴더를 만듭니다.

Image 폴더 아래에서 Image.js(이)라는 새 파일을 만듭니다.

다음 import 문을 Image.js에 추가합니다.

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

그런 다음 ImageEditConfig을(를) 추가하여 AEM에 자리 표시자를 표시할 시기를 결정합니다.

export const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function(props) {
        return !props || !props.src || props.src.trim().length < 1;
    }
};

src 속성이 설정되지 않은 경우 자리 표시자가 표시됩니다.

다음으로 Image 클래스를 구현합니다.

 export default class Image extends Component {

    get content() {
        return <img     className="Image-src"
                        src={this.props.src}
                        alt={this.props.alt}
                        title={this.props.title ? this.props.title : this.props.alt} />;
    }

    render() {
        if(ImageEditConfig.isEmpty(this.props)) {
            return null;
        }

        return (
                <div className="Image">
                    {this.content}
                </div>
        );
    }
}

위의 코드는 JSON 모델에서 전달된 prop src, alt 및 title을(를) 기반으로 <img>을(를) 렌더링합니다.

MapTo 코드를 추가하여 React 구성 요소를 AEM 구성 요소에 매핑합니다.

MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);

wknd-spa-react/components/image 문자열은 ui.apps의 ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image에 있는 AEM 구성 요소의 위치에 해당합니다.

같은 디렉터리에 이름이 Image.css인 새 파일을 만들고 다음을 추가합니다.

.Image-src {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}

Image.js에서 import 문 아래 맨 위에 있는 파일에 대한 참조를 추가합니다.

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Image.css');

ui.frontend/src/components/import-components.js 파일을 열고 새 Image 구성 요소에 대한 참조를 추가합니다.

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';
import './Image/Image'; //add reference to Image component

import-components.js에서 React 핵심 구성 요소 이미지를 주석 처리합니다.

//MapTo('wknd-spa-react/components/image')(ImageV2, {isEmpty: ImageV2IsEmptyFn});

이렇게 하면 사용자 지정 이미지 구성 요소가 대신 사용됩니다.

프로젝트의 루트에서 Maven을 사용하여 SPA 코드를 AEM에 배포합니다.

$ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage

AEM의 SPA Inspect. 페이지의 모든 이미지 구성 요소는 계속 작동해야 합니다. Inspect에 렌더링된 출력이 표시되면 React 코어 구성 요소 대신 사용자 지정 이미지 구성 요소에 대한 마크업이 표시됩니다.

사용자 지정 이미지 구성 요소 마크업

<div class="Image">
    <img class="Image-src" src="/content/image-src.jpg">
</div>

React 핵심 구성 요소 이미지 마크업

<div class="cmp-image cq-dd-image">
    <img src="/content/image-src.jpg" class="cmp-image__image">
</div>

자체 구성 요소를 확장하고 구현하는 방법을 소개합니다.