Show Menu
화제×

SPA에 대한 React 구성 요소 구현

단일 페이지 애플리케이션(SPA)을 통해 웹 사이트 사용자에게 매력적인 경험을 제공할 수 있습니다. 개발자는 SPA 프레임워크를 사용하여 사이트를 구축하고, 작성자는 SPA 프레임워크를 사용하여 구축된 사이트에서 AEM 내에서 컨텐츠를 완벽하게 편집하고자 합니다.
SPA 저작 기능은 AEM 내의 SPA를 지원하는 포괄적인 솔루션을 제공합니다. 이 문서에서는 AEM SPA Editor와 연동되는 간단하고 기존 Responsive 구성 요소를 적용하는 방법을 설명합니다.
SPA 편집기는 SPA 프레임워크 기반의 클라이언트측 렌더링(예: 반응 또는 각도)이 필요한 프로젝트에 권장되는 솔루션입니다.

소개

SPA와 SPA Editor가 AEM에서 요구하는 간단한 경량 계약 덕분에 기존의 Javascript 애플리케이션을 도입하여 AEM에서 SPA와 함께 사용할 수 있도록 적응하는 것은 매우 간단합니다.
이 문서에서는 We.Retail Journal 샘플 SPA의 날씨 구성 요소의 예를 설명합니다.
이 문서를 읽으려면 AEM용 SPA 응용 프로그램의 구조에 대해 잘 알고 있어야 합니다.
이 문서에서는 데모용으로만 We.Retail Journal 앱을 사용합니다. 어떤 프로젝트 작업에도 사용해서는 안 됩니다.
모든 AEM 프로젝트는 AEM 프로젝트 원형 (React or Angular)을 사용하여 SPA 프로젝트를 지원하고 SPA SDK를 활용하는 프로젝트 전형(Pretype)을 활용해야 합니다.

날씨 구성 요소

날씨 구성 요소는 We.Retail 저널 앱의 왼쪽 상단에 있습니다. 정의된 위치의 현재 날씨를 표시하여 기상 데이터를 동적으로 가져옵니다.

날씨 위젯 사용

SPA 편집기에서 SPA의 컨텐츠를 작성할 때 날씨 구성 요소는 툴바가 완성되어 다른 AEM 구성 요소로 나타나며 편집 가능합니다.
도시는 다른 AEM 구성 요소와 마찬가지로 대화 상자에서 업데이트할 수 있습니다.
변경 사항이 유지되며 구성 요소는 새로운 날씨 데이터로 자동으로 업데이트됩니다.

날씨 구성 요소 구현

날씨 구성 요소는 실제로 We.Retail Journal 샘플 SPA 응용 프로그램 내에서 구성 요소로 작동하도록 적응된 Reperimate Open Weather 라고 하는 공개적으로 사용 가능한 Repact 구성 요소를 기반으로 합니다.
다음은 React Open Weather 구성 요소의 사용에 대한 NPM 설명서의 조각입니다.
We.Retail 저널 애플리케이션에서 사용자 지정된 날씨 구성 요소( Weather.js )의 코드 검토:
  • 16행 :필요한 경우 반응형 개방형 날씨 위젯이 로드됩니다.
  • 46호선 :이 MapTo 함수는 SPA 편집기에서 편집할 수 있도록 해당 AEM 구성 요소에 이 React 구성 요소를 연결합니다.
  • 22-29호선 :도시 EditConfig 가 채워졌는지 확인하고 비어 있는 경우 값을 정의하는 것이 정의됩니다.
  • 31-44행 :Weather 구성 요소는 Component 클래스를 확장하고 React Open Weather 구성 요소에 대한 NPM 사용 설명서에 정의된 대로 필요한 데이터를 제공하고 구성 요소를 렌더링합니다.
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2018 Adobe Systems Incorporated
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     https://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import React, {Component} from 'react';
import ReactWeather from 'react-open-weather';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Weather.css');

const WeatherEditConfig = {

    emptyLabel: 'Weather',

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

class Weather extends Component {

    render() {
        let apiKey = "12345678901234567890";
        let city;

        if (this.props.cq_model) {
            city = this.props.cq_model.city;
            return <ReactWeather key={'react-weather' + Date.now()} forecast="today" apikey={apiKey} type="city" city={city} />
        }

        return null;
    }
}

MapTo('we-retail-journal/global/components/weather')(Weather, WeatherEditConfig);

백엔드 구성 요소는 이미 존재해야 하지만 프런트 엔드 개발자는 코딩 작업이 거의 없는 We.Retail Journal SPA에서 반응형 개방형 날씨 구성 요소를 활용할 수 있습니다.

다음 단계

AEM용 SPA 개발에 대한 자세한 내용은 AEM용 SPA 개발 문서를 참조하십시오 .