AEM에서 첫 번째 React SPA 만들기 overview

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

을 처음 사용하는 개발자를 위해 설계된 멀티 파트 튜토리얼 시작 SPA 편집기 Adobe Experience Manager(AEM)의 기능입니다. 이 튜토리얼에서는 가상 라이프스타일 브랜드인 WKND에 대한 React 애플리케이션의 구현을 안내합니다. React 앱은 React 구성 요소를 AEM 구성 요소에 매핑하는 AEM SPA Editor와 함께 배포되도록 개발 및 디자인되었습니다. AEM에 배포된 완성된 SPA은 AEM의 기존 인라인 편집 도구를 사용하여 동적으로 작성할 수 있습니다.

구현된 최종 SPA

WKND SPA 구현

정보

튜토리얼은 AEM as a Cloud Service 이전 버전과 호환 가능 AEM 6.5.4+AEM 6.4.8+.

최신 코드

모든 튜토리얼 코드는에서 찾을 수 있습니다. GitHub.

다음 최신 코드 베이스 는 다운로드 가능한 AEM 패키지로 사용할 수 있습니다.

사전 요구 사항

이 자습서를 시작하려면 먼저 다음 항목이 필요합니다.

  • HTML, CSS 및 JavaScript에 대한 기본 지식
  • 에 대한 기본 친숙도 반응

필수는 아니지만 의 기본 사항을 이해하는 것이 좋습니다. 기존 AEM Sites 구성 요소 개발.

로컬 개발 환경 local-dev-environment

이 자습서를 완료하려면 로컬 개발 환경이 필요합니다. 스크린샷 및 비디오는 를 사용하여 Mac OS 환경에서 실행되는 AEM as a Cloud Service SDK를 사용하여 캡처합니다 Visual Studio 코드 IDE로. 명령과 코드는 별도로 명시하지 않는 한 로컬 운영 체제와 독립적이어야 합니다.

필수 소프트웨어

NOTE
AEM을 as a Cloud Service으로 처음 사용하십니까? 다음을 확인하십시오. AEM as a Cloud Service SDK를 사용하여 로컬 개발 환경을 설정하는 방법에 대한 다음 안내서입니다.
AEM 6.5를 처음 사용하십니까? 다음을 확인하십시오. 로컬 개발 환경 설정에 대한 다음 안내서.

다음 단계 next-steps

무엇을 기다리고 있습니까?! 다음 위치로 이동하여 자습서를 시작하십시오. 프로젝트 만들기 챕터 및 AEM Project Archetype을 사용하여 SPA 편집기 활성화 프로젝트를 생성하는 방법에 대해 알아봅니다.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4