적응형 양식 핵심 구성 요소 사용자 정의

핵심 구성 요소 식별 및 복제

개발 환경을 구성하는 동안 Archetype 기반 프로젝트를 생성했습니다. 이제 AEM Archetype 프로젝트에서 사용자 정의하려는 특정 핵심 구성 요소를 식별합니다. 식별한 다음 AEM Archetype 기반 프로젝트 내에서 구성 요소의 복제본을 만듭니다. 이 복제본은 다른 적응형 양식 핵심 구성 요소와 병렬로 유지합니다. 이 단계를 통해 사용자 정의 작업이 원래 구성 요소에 영향을 미치지 않도록 하여 자유롭게 실험할 수 있습니다.

복사된 구성 요소 사용자 정의

복제된 구성 요소를 열고 요구 사항에 따라 필요한 수정을 시작합니다.

• HTML 구조 사용자 정의: BEM(블록 요소 수정자) 관리 및 확장 가능한 코드를 위한 스타일 지정 사례를 준수하여 디자인 요구 사항에 맞게 HTML 구조를 조정합니다.
• 레이블 업데이트: 구성 요소의 레이블을 업데이트하여 사용자 정의 버전에 대한 명확하고 설명적인 이름을 제공합니다. 일관성을 위해 제공된 OOTB(기본 제공) 레이블 템플릿을 참조하십시오.
• 위젯 사용자 정의: 특정 사용 사례에 맞게 구성 요소(드롭다운, 확인란) 내에서 사용되는 위젯을 조정합니다. 샘플 위젯 구현을 참조하십시오.
• 도움말 텍스트 및 도구 설명: 구성 요소와 관련된 도움말 텍스트 또는 도구 설명을 개인화하여 사용자에게 컨텍스트 및 지침을 제공합니다. OOTB 도움말 텍스트 템플릿을 출발점으로 사용하십시오.
• 데이터 속성: 구성 요소의 HTML 요소 내에 필요한 모든 데이터 속성을 통합합니다. 이러한 특성은 런타임에 구성 요소가 제대로 작동하는 데 매우 중요합니다. 설명서를 참조하면 적응형 양식 핵심 구성 요소에서 데이터 속성의 역할을 이해할 수 있습니다.

백엔드 논리 구현

사용자 정의에 백엔드 논리가 필요한 경우 기존 Sling 모델을 확장할 수 있습니다. 제공된 예제를 참조하여 원하는 기능을 사용자 정의 구성 요소에 원활하게 통합하십시오.

구성 요소의 대화 상자 구성

사용자 정의 구성 요소와 관련된 대화 상자를 구성합니다. 설명서에 제공된 구성 요소 대화 상자 예제를 사용하여 사용자 상호 작용과 설정을 적절하게 관리하십시오.

로컬 개발 환경에서 구성 요소 배포 및 테스트

Maven을 사용하여 로컬 개발 환경에서 구성 요소를 빌드하고 배포합니다. 구성 요소를 배포한 후 적응형 양식을 만들어 사용자 정의 구성 요소를 테스트합니다.

프로덕션 환경에 사용자 정의 구성 요소 배포

로컬 개발 환경에서 구성 요소를 테스트한 후 프로덕션 환경에 구성 요소를 배포합니다.