AEM에서 첫 번째 Angular SPA 만들기

AEM(Adobe Experience Manager)의 SPA Editor 기능에 대해 처음 사용하는 개발자를 위해 고안된 여러 부분으로 구성된 자습서입니다. 이 자습서에서는 가상 라이프스타일 브랜드인 WKND에 대한 Angular 응용 프로그램을 구현합니다. angular 앱은 Angular 구성 요소를 AEM 구성 요소에 매핑하는 AEM SPA Editor를 사용하여 배포되도록 개발 및 설계되었습니다. AEM에 배포된 완성된 SPA은 AEM의 기존 인라인 편집 툴을 사용하여 동적으로 제작할 수 있습니다.

구현된 최종 SPA

WKND SPA 구현

정보

이 여러 부분으로 구성된 자습서의 목적은 개발자에게 AEM의 SPA 편집기 기능과 함께 작동하도록 Angular 애플리케이션을 구현하는 방법을 교육하는 것입니다. 실제 시나리오에서 개발 활동은 가상 사용자로 분류되며, 종종 프런트 엔드 개발자백엔드 개발자​이 포함됩니다. AEM SPA 편집기 프로젝트에 참여하여 이 튜토리얼을 완료하는 것은 모든 개발자에게 이로운 작업이라고 생각합니다.

이 자습서는 AEM을 Cloud Service​로 사용하도록 설계되었으며 AEM 6.5.4+AEM 6.4.8+​와 역호환됩니다. SPA은 다음을 사용하여 구현됩니다.

자습서의 각 부분을 통과하는 데 1-2시간을 예상합니다.

최신 코드

모든 자습서 코드는 GitHub에서 찾을 수 있습니다.

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

전제 조건

이 튜토리얼을 시작하기 전에 다음을 수행해야 합니다.

필수 사항은 아니지만 기존의 AEM Sites 구성 요소 를 개발하는 방법에 대한 기본적인 이해를 가지는 것이 좋습니다.

로컬 개발 환경

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

노트

Cloud Service으로 AEM을 처음 사용하시나요? AEM을 Cloud Service SDK로 사용하여 로컬 개발 환경을 설정하는 방법에 대한 다음 가이드를 확인하십시오.

AEM 6.5를 처음 사용하시나요? 로컬 개발 환경을 설정하는 방법은 다음 안내서를 참조하십시오.

다음 단계

뭘 기다리고 있어?SPA Editor 프로젝트 장으로 이동하여 AEM 프로젝트 원형을 사용하여 SPA Editor 지원 프로젝트를 생성하는 방법을 배워서 자습서를 시작합니다.

이전 버전과의 호환성

이 튜토리얼에 대한 프로젝트 코드는 Cloud Service으로 AEM용으로 구축되었습니다. 프로젝트 코드가 6.5.4+6.4.8+​에 대해 호환되게 하기 위해 몇 가지 수정이 이루어졌습니다.

UberJar v6.4.4​이(가) 종속성으로 포함되어 있습니다.

<!-- Adobe AEM 6.x Dependencies -->
<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.4</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>

대상 AEM 6.x 환경에 대한 빌드를 수정하기 위해 classic이라는 추가 Maven 프로필이 추가되었습니다.

  <!-- AEM 6.x Profile to include Core Components-->
    <profile>
        <id>classic</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <build>
        ...
    </profile>

기본적으로 classic 프로필은 비활성화됩니다. AEM 6.x에서 자습서를 따르는 경우 Maven 빌드를 수행하도록 명령할 때마다 classic 프로필을 추가하십시오.

$ mvn clean install -PautoInstallSinglePackage -Pclassic

AEM 구현을 위해 새 프로젝트를 생성할 때는 항상 최신 버전의 AEM Project Preanype을 사용하고 aemVersion를 업데이트하여 의도한 AEM 버전을 대상으로 합니다.

이 페이지에서는

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now