AEM에서 첫 번째 React SPA 만들기

을 처음 사용하는 개발자를 위해 설계된 멀티 파트 튜토리얼 시작 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 구성 요소 개발.

로컬 개발 환경

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

필수 소프트웨어

노트

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

AEM 6.5를 처음 사용하십니까? 다음을 확인하십시오. 로컬 개발 환경 설정에 대한 다음 안내서.

다음 단계

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

이 페이지에서는