개요

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

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

이 튜토리얼은 WKND GraphQL 앱, AEM GraphQL API를 통해 AEM 콘텐츠 조각 콘텐츠를 사용하지만 SPA 콘텐츠의 컨텍스트 내 작성을 제공하지 않는 React 앱입니다.

튜토리얼 기본 정보

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

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

튜토리얼은 AEM as a Cloud Service 및 는 다음 두 개의 프로젝트로 구성됩니다.

최신 코드

사전 요구 사항

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

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

1. AEM for SPA 편집기 구성

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

2. SPA Bootstrap

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

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

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

4. 편집 가능한 컨테이너 구성 요소

그런 다음 편집 가능한 "컨테이너 구성 요소"를 SPA에 추가해 보십시오. 개발자가 컨테이너 구성 요소를 SPA에 배치하는 방법을 보여 줍니다. 컨테이너 구성 요소를 사용하여 작성자는 허용된 구성 요소를 배치하고 구성 요소의 레이아웃을 조정할 수 있습니다.

5. 동적 경로 및 편집 가능한 구성 요소

마지막으로, 이전 장에서 설명한 개념을 사용하여 동적 경로(경로의 매개 변수를 기반으로 다른 콘텐츠를 표시하는 경로)를 살펴보십시오. 이렇게 하면 AEM SPA Editor를 사용하여 프로그래밍 방식으로 구동되고 파생되는 경로의 콘텐츠를 작성하는 방법을 보여 줍니다.

추가 리소스