개요

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

초급
개발자

[Edge Delivery Services을 사용하여 AEM Sites에서 게시하려면 여기를 클릭하세요.]{class="badge positive" title="AEM에서 Edge Delivery Services으로 Publish"}

AEM SPA Editor를 사용하여 편집 가능한 AEM 콘텐츠로 기존 React 기반(또는 Next.js) 원격 SPA을 추가하려는 개발자를 위한 멀티 파트 튜토리얼에 오신 것을 환영합니다.

이 자습서는 AEM의 GraphQL API에 대해 AEM 콘텐츠 조각 콘텐츠를 사용하는 React 앱인 WKND SPA 앱을 기반으로 빌드되지만 GraphQL 콘텐츠의 컨텍스트 내 작성은 제공하지 않습니다.

https://video.tv.adobe.com/v/333272?quality=12&learn=on

튜토리얼 기본 정보

이 자습서는 원격 SPA 또는 AEM 컨텍스트 밖에서 실행되는 SPA을 업데이트하여 AEM에서 작성된 콘텐츠를 소비 및 제공하는 방법을 보여 주기 위한 것입니다.

자습서의 대부분의 활동은 JavaScript 개발에 중점을 두지만 AEM을 중심으로 중요한 측면이 다룹니다. 이러한 측면에서는 콘텐츠가 AEM에서 작성 및 저장되는 위치를 정의하고 SPA 경로를 AEM Pages에 매핑하는 작업이 포함됩니다.

자습서는 AEM as a Cloud Service 에서 작동하도록 디자인되었으며 두 개의 프로젝트로 구성됩니다.

AEM 프로젝트 에 AEM에 배포해야 하는 구성 및 콘텐츠가 포함되어 있습니다.
WKND 앱 프로젝트는 AEM의 SPA 편집기와 통합할 SPA입니다.

사전 요구 사항

이 자습서에서는 다음 작업을 수행해야 합니다.

이 자습서에서는 다음과 같이 가정합니다.

IDE로 Microsoft® Visual Studio 코드
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial의 작업 디렉터리
http://localhost:4502에서 작성자 서비스로 AEM SDK 실행
암호가 admin인 로컬 admin 계정으로 AEM SDK를 실행하는 중
http://localhost:3000에서 SPA 실행

NOTE

로컬 개발 환경을 설정하는 데 도움이 필요하십니까? AEM as a Cloud Service SDK를 사용하여 로컬 개발 환경을 설정하는 방법에 대한 다음 안내서를 확인하십시오.

1. AEM for SPA 편집기 구성

AEM 편집기와 SPA을 통합하려면 AEM SPA 구성이 필요합니다. 이러한 구성은 AEM 프로젝트를 통해 관리 및 배포됩니다. 이 장에서는 필요한 구성과 이를 정의하는 방법에 대해 알아봅니다.

AEM for SPA Editor를 구성하는 방법 알아보기

2. SPA Bootstrap

AEM SPA Editor가 SPA을 작성 컨텍스트에 통합하려면 SPA에 몇 가지 사항을 추가해야 합니다.

SPA for AEM SPA Editor를 부트스트랩하는 방법에 대해 알아봅니다

3. 편집 가능한 고정 구성 요소

먼저 편집 가능한 "고정 구성 요소"를 SPA에 추가하는 방법을 살펴봅니다. 개발자가 SPA에서 특정 편집 가능한 구성 요소를 배치하는 방법을 보여 줍니다. 작성자는 구성 요소의 콘텐츠를 변경할 수 있지만 구성 요소를 제거하거나 배치, 위치 또는 크기를 변경할 수 없습니다.