AEM Headless의 고급 개념
이 종단간 튜토리얼은 AEM(Adobe Experience Manager) Headless 및 GraphQL의 기본 사항을 다루는 기본 튜토리얼을 계속합니다. 고급 자습서에서는 클라이언트 애플리케이션에서 GraphQL 지속 쿼리를 사용하는 등 콘텐츠 조각 모델, 콘텐츠 조각 및 AEM GraphQL 지속 쿼리를 사용하여 작업하는 측면을 자세히 설명합니다.
사전 요구 사항
AEM as a Cloud Service에 대한 빠른 설정을 완료하여 AEM as a Cloud Service 환경을 구성하십시오.
이 고급 자습서를 진행하기 전에 이전 기본 자습서 및 비디오 시리즈 자습서를 완료하는 것이 좋습니다. 로컬 AEM 환경을 사용하여 자습서를 완료할 수 있지만 이 자습서에서는 AEM as a Cloud Service의 워크플로우만 다룹니다.
목표
이 튜토리얼에서는 다음 주제를 다룹니다.
- 유효성 검사 규칙 과 탭 자리 표시자, 중첩된 조각 참조, JSON 개체 및 날짜 및 시간 데이터 유형과 같은 고급 데이터 유형을 사용하여 콘텐츠 조각 모델을 만듭니다.
- 중첩된 콘텐츠 및 조각 참조로 작업하는 동안 콘텐츠 조각을 작성하고 콘텐츠 조각 작성 거버넌스에 대한 폴더 정책을 구성합니다.
- 변수 및 지시문과 함께 GraphQL 쿼리를 사용하여 AEM GraphQL API 기능을 살펴보십시오.
- AEM의 매개 변수를 사용하여 GraphQL 쿼리를 지속하고 지속된 쿼리와 함께 캐시 제어 매개 변수를 사용하는 방법을 알아봅니다.
- AEM Headless JavaScript SDK를 사용하여 지속 쿼리에 대한 요청을 샘플 WKND GraphQL React 앱에 통합합니다.
AEM Headless 개요의 고급 개념
다음 비디오에서는 이 자습서에서 다루는 개념에 대한 높은 수준의 개요를 제공합니다. 이 자습서에는 고급 데이터 유형이 포함된 콘텐츠 조각 모델을 정의하고, 콘텐츠 조각을 중첩하며, AEM에서 GraphQL 쿼리를 지속하는 작업이 포함되어 있습니다.
프로젝트 설정
WKND 사이트 프로젝트에는 필요한 모든 구성이 있으므로 빠른 설정을 완료한 후 바로 자습서를 시작할 수 있습니다. 이 섹션에서는 고유한 AEM Headless 프로젝트를 만들 때 사용할 수 있는 몇 가지 중요한 단계만 강조합니다.
기존 구성 검토
AEM에서 새 프로젝트를 시작하는 첫 번째 단계는 구성, 작업 공간 및 GraphQL API 엔드포인트를 만드는 것입니다. 구성을 검토하거나 만들려면 도구 > 일반 > 구성 브라우저 로 이동하십시오.
자습서에 대해 WKND Shared 사이트 구성이 이미 생성되었는지 확인하십시오. 프로젝트에 대한 구성을 만들려면 오른쪽 상단에서 만들기 를 선택하고 표시되는 구성 만들기 모달에서 양식을 작성합니다.
GraphQL API 엔드포인트 검토
다음으로, GraphQL 쿼리를 전송할 API 끝점을 구성해야 합니다. 기존 끝점을 검토하거나 새로 만들려면 도구 > 일반 > GraphQL(으)로 이동합니다.
WKND Shared Endpoint이(가) 이미 만들어졌는지 확인하십시오. 프로젝트의 끝점을 만들려면 오른쪽 상단에서 만들기 를 선택하고 워크플로를 따릅니다.
WKND 콘텐츠 구조 및 언어 루트 폴더 검토
잘 정의된 콘텐츠 구조는 AEM Headless 구현의 성공을 위한 핵심 요소입니다. 콘텐츠의 확장성, 유용성 및 권한 관리에 유용합니다.
언어 루트 폴더는 EN 또는 FR과 같은 ISO 언어 코드가 있는 폴더입니다. AEM 번역 관리 시스템은 이러한 폴더를 사용하여 콘텐츠의 기본 언어와 콘텐츠 번역을 위한 언어를 정의합니다.
탐색 > Assets > 파일(으)로 이동합니다.
WKND 공유 폴더로 이동합니다. 제목이 "English"이고 이름이 "EN"인 폴더를 관찰합니다. 이 폴더는 WKND 사이트 프로젝트의 언어 루트 폴더입니다.
프로젝트에 대해 구성 내에 언어 루트 폴더를 만듭니다. 자세한 내용은 폴더 만들기 섹션을 참조하십시오.
중첩된 폴더에 구성 할당
마지막으로, 프로젝트의 구성을 언어 루트 폴더에 할당해야 합니다. 이 할당을 통해 프로젝트 구성에 정의된 콘텐츠 조각 모델을 기반으로 콘텐츠 조각을 만들 수 있습니다.
언어 루트 폴더를 구성에 할당하려면 폴더를 선택한 다음 상단 탐색 막대에서 속성 을 선택합니다.
그런 다음 Cloud Service 탭으로 이동하여 클라우드 구성 필드에서 폴더 아이콘을 선택합니다.
표시되는 모달에서 이전에 만든 구성을 선택하여 언어 루트 폴더를 할당합니다.
모범 사례
다음은 AEM에서 나만의 프로젝트를 만들 때의 모범 사례입니다.
- 폴더 계층 구조는 현지화 및 번역을 염두에 두고 모델링해야 합니다. 즉, 언어 폴더를 구성 폴더 내에 중첩하여 해당 구성 폴더 내의 콘텐츠를 쉽게 번역할 수 있습니다.
- 폴더 계층 구조는 단순하고 간단하게 유지되어야 합니다. 특히 라이브 사용을 위해 게시한 후에는 조각 참조 및 GraphQL 쿼리에 영향을 줄 수 있는 경로를 변경하므로 나중에 폴더 및 조각을 이동하거나 이름을 변경하지 마십시오.
스타터 및 솔루션 패키지
두 개의 AEM 패키지 를 사용할 수 있으며 패키지 관리자를 통해 설치할 수 있습니다.
- Advanced-GraphQL-Tutorial-Starter-Package-1.1.zip은(는) 자습서에서 나중에 사용되며 샘플 이미지와 폴더를 포함합니다.
- Advanced-GraphQL-Tutorial-Solution-Package-1.2.zip에는 새 콘텐츠 조각 모델, 콘텐츠 조각 및 지속 GraphQL 쿼리를 포함하여 챕터 1-4에 대한 완성된 솔루션이 포함되어 있습니다. 클라이언트 응용 프로그램 통합 장으로 바로 건너뛰려는 사용자에게 유용합니다.
React 앱 - 고급 자습서 - WKND 모험 프로젝트를 사용하여 샘플 응용 프로그램을 검토하고 탐색할 수 있습니다. 이 샘플 애플리케이션은 지속 GraphQL 쿼리를 호출하여 AEM에서 콘텐츠를 검색하고 몰입형 경험에서 렌더링합니다.
시작
이 고급 자습서를 시작하려면 다음 단계를 따르십시오.
- AEM as a Cloud Service을(를) 사용하여 개발 환경을 설정합니다.
- 콘텐츠 조각 모델 만들기에서 자습서 챕터를 시작합니다.