Edge Delivery Services 및 범용 편집기 개발자 튜토리얼

Edge Delivery Services 및 범용 편집기 개발자 튜토리얼

이 튜토리얼에서는 범용 편집기의 강력한 작성 기능과 Edge Delivery Services를 활용한 초고속 콘텐츠 게재 기능 결합하여 AEM 웹 사이트를 빌드하는 기본 사항에 대해 알아봅니다. 이 튜토리얼을 완료하면 새 프로젝트를 만들고, 로컬 개발 환경을 설정하고, 새로운 블록을 빌드하는 방법에 대한 기본적인 이해를 얻게 됩니다.

프로젝트 설정

AEM as a Cloud Service에서 코드 프로젝트를 만들고 새 사이트를 구성하는 방법을 알아봅니다. 이 설정을 사용하면 범용 편집기의 콘텐츠 생성 기능과 Edge Delivery Services를 통한 빠른 콘텐츠 게재 기능을 원활하게 연동하여 개발할 수 있습니다.

코드 프로젝트 만들기

코드 프로젝트 만들기

범용 편집기를 사용하여 편집 가능한 Edge Delivery Services용 코드 프로젝트를 만듭니다.

자세히 알아보기

AEM 사이트 만들기

AEM 사이트 만들기

범용 편집기를 사용하여 편집 가능한 Edge Delivery Services용 AEM Sites 사이트를 만듭니다.

자세히 알아보기

개발 설정

빠른 웹 사이트 개발을 위해 로컬 개발 환경을 구성하는 방법을 알아봅니다. 이 설정을 사용하면 범용 편집기를 통한 원활한 사이트 생성과 Edge Delivery Services를 통한 효율적인 콘텐츠 게재를 결합하여, 원활하고 최적화된 개발 워크플로가 확보됩니다.

로컬 개발 환경 설정

로컬 개발 환경 설정

Edge Delivery Services를 통해 제공되고 범용 편집기로 편집 가능한 사이트에 대한 로컬 개발 환경을 설정합니다.

자세히 알아보기

웹 사이트 브랜딩 추가

웹 사이트 브랜딩 추가

Edge Delivery Services 사이트에 대한 글로벌 CSS, CSS 변수 및 웹 글꼴을 정의합니다.

자세히 알아보기

블록 개발

콘텐츠 모델을 정의하고 테스트 및 개발을 위한 샘플 콘텐츠를 설정하여 새 블록을 만드는 방법을 알아봅니다. 블록을 렌더링하는 두 가지 방법을 살펴보고, AEM 및 Edge Delivery Services에서 최적의 성능과 유연성을 위해 블록을 구성하는 방법을 이해합니다.

블록 만들기

블록 만들기

범용 편집기로 편집 가능한 Edge Delivery Services 웹 사이트용 블록을 빌드합니다.

자세히 알아보기

블록 작성

블록 작성

범용 편집기를 사용하여 Edge Delivery Services 블록을 작성합니다.

자세히 알아보기

CSS로 블록 개발

CSS로 블록 개발

범용 편집기를 사용하여 편집 가능한 Edge Delivery Services용 CSS 블록을 개발합니다.

자세히 알아보기

CSS와 JS로 블록 개발

CSS와 JS로 블록 개발

범용 편집기를 사용하여 편집 가능한 Edge Delivery Services용 CSS와 JavaScript로 블록을 개발합니다.

자세히 알아보기

다음 단계

이 튜토리얼을 완료했으므로, 이제 학습한 내용을 바탕으로 다음의 집중적인 방법을 통해 작업을 진행해 보십시오. 이들 안내서에서는 여기서 다룬 코드와 개념을 확장하여 역할별 사용 사례, 고급 기술, Edge Delivery Services와 범용 편집기 개발 기술을 연마하기 위한 추가 팁을 살펴봅니다.

블록 옵션

블록 옵션

여러 가지 표시 옵션이 있는 블록을 빌드하는 방법을 알아봅니다.

자세히 알아보기

머리글 및 바닥글

머리글 및 바닥글

Edge Delivery Services와 범용 편집기에서 머리글 및 바닥글이 개발되는 방식을 알아봅니다.

자세히 알아보기

범용 편집기 확장 기능 미리보기

범용 편집기 확장 기능 미리보기

개발 중에 로컬에서 실행되는 범용 편집기 확장 기능을 미리보기하는 방법을 알아봅니다.

자세히 알아보기

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d