핵심 구성 요소 개발
핵심 구성 요소를 언제 사용해야 합니까?
핵심 구성 요소가 새로워졌고 여러 이점을 제공하므로 새 AEM 프로젝트에서 이러한 구성 요소를 사용하는 것이 좋습니다. 기존 프로젝트의 경우 마이그레이션은 리브랜딩 또는 전체 리팩터링 등 대규모 프로젝트 작업에 포함되었습니다.
따라서 Adobe은 다음 권장 사항을 제공합니다.
- 새
프로젝트새 프로젝트는 항상 핵심 구성 요소를 사용하려고 시도합니다. 핵심 구성 요소를 직접 사용할 수 없거나 프로젝트 요구 사항을 충족하기 위해 extended를 사용할 수 없는 경우, 핵심 구성 요소에 지정된 구성 요소 아키텍처 다음에 사용자 지정 구성 요소를 만드십시오. 다른 방법으로는 불가능한 경우를 제외하고 기본 구성 요소를 사용하지 마십시오. - 사이트 또
는 구성 요소 리팩토링을 계획하지 않는 한 기존 ProjectsRecommendation은 기본 구성 요소를 계속 사용합니다.
대부분의 기존 프로젝트에서 매우 널리 사용되고 있으므로 기초 구성 요소 은 계속 지원됩니다. - 새로운 사용자 지정
구성 요소기존 핵심 구성 요소를 사용자 정의할 수 있는지 평가합니다.
그렇지 않은 경우 구성 요소 지침 다음에 새 사용자 지정 구성 요소를 만드는 것이 좋습니다. - 기존 사용자 지정
구성 요소구성 요소가 예상대로 작동하면 해당 구성 요소를 그대로 유지합니다.
그렇지 않은 경우 위의 "새 사용자 지정 구성 요소"를 참조하십시오.
핵심 구성 요소성공 방법
핵심 구성 요소는 강력하고, 유연하며, 사용하기 쉽고, 사용자 정의할 수 있습니다. 몇 가지 주요 지침을 따르면 핵심 구성 요소가 있는 프로젝트가 성공했는지 확인합니다.
핵심 구성 요소로 마이그레이션
모든 새 프로젝트는 핵심 구성 요소로 구현해야 합니다. 그러나 기존 프로젝트에는 일반적으로 Foundation 구성 요소의 광범위한 구현이 있습니다.
기존 프로젝트(예: 리브랜딩 또는 전체 리팩토링)에 대한 더 많은 노력이 종종 핵심 구성 요소로 마이그레이션할 수 있는 기회를 제공합니다. 이러한 마이그레이션을 용이하게 하기 위해 Adobe은 핵심 구성 요소 및 최신 AEM 기술 채택을 장려하기 위한 여러 마이그레이션 도구를 제공했습니다.
간편한 전환을 위한 AEM Modern Toollow:
- 정적 템플릿을 편집 가능한 템플릿
- 디자인 구성을 정책
- 기초 구성 요소를 코어 구성 요소
- 클래식 UI를 터치 사용 UI
이러한 도구의 사용에 대한 자세한 내용은 해당 설명서를 참조하십시오.
AEM 현대화 도구는 커뮤니티의 노력이며 Adobe에 의해 지원되거나 보증되지 않습니다.
핵심 구성 요소 지원
핵심 구성 요소는 AEM의 필수적인 부분으로, 빠른 시작의 일부로 전달된 것처럼 동일한 이용 약관에 따라 지원됩니다.
다른 AEM 제품 기능과 마찬가지로 일반적인 규칙은 다음과 같습니다.구성 요소는 먼저 삭제되었다고 발표되며, 다음 AEM 릴리스에 대해 가장 빨리 제거됩니다. 따라서 지원을 중단하기 전에 고객이 적어도 하나의 릴리스 주기를 통해 새로운 버전의 구성 요소로 전환할 수 있습니다.
각 구성 요소의 버전은 지원되는 AEM 버전을 명확하게 설명합니다. AEM 버전에 대한 지원이 중단되면 해당 버전의 AEM에 대한 핵심 구성 요소에 대한 지원도 중단됩니다.
구성 요소 사용자 지정 지원에 대한 자세한 내용은 핵심 구성 요소 사용자 지정 페이지를 참조하십시오.
기술 기능
다음 표는 핵심 구성 요소와 기본 구성 요소 간의 차이점을 대략적으로 설명합니다.
작성 기능 및 구성 가능 옵션에 대한 자세한 내용은 작성 페이지에 대한 을 참조하십시오.
| 기능 | 핵심 구성 요소 | 기본 구성 요소 |
|---|---|---|
| 논리 구현 | Sling 모델 주석이 있는 Java POJO | JSP 코드 |
| 마크업 정의 | HTML 템플릿 언어 (HTL) 구문 | JSP 코드 |
| XSS 기밀 정보 가리기 | HTL로 자동화 | 대부분 수동 |
| CSS 클래스 이름 지정 | 블록 요소 수정자 (BEM) 표기법을 기반으로 하는 표준 명명 규칙(릴리스 2.0.0 기준) | 사용자 지정 스킴 |
| 대화 상자 정의 | Coral 3 | Coral 2 + 클래식 UI |
| JSON 출력 | Sling Models Exporter with Jackson serialization | 기본 Sling 서블릿 |
| 버전 관리 | 모델 및 HTL의 경우 | 없음 |
| 테스트 | 단위 테스트 + 통합 테스트 | 통합 테스트 |
| 배달 | 공개 GitHub를 통해 | 빠른 시작을 통해 |
| 라이센스 | Apache License | Adobe 독점 |
| 기여도 | 가져오기 요청을 통해 | 불가능 |
| 접근성 | WCAG 2.0 AA 표준과 완전히 호환 | WCAG 2.0 AA 표준과(와) 일부만 준수합니다. |
구성 요소 목록
다음 표는 사용 가능한 핵심 구성 요소, 해당 API에 연결되는 링크 및 대체되는 기본 구성 요소를 나타냅니다.
| 핵심 구성 요소 | 설명 | 기본 구성 요소 교체 |
|---|---|---|
| 페이지 | 템플릿 편집기를 사용한 응답형 페이지 | /libs/foundation/components/page /libs/wcm/foundation/components/page |
| 탐색 표시 | 페이지 계층 탐색 | /libs/foundation/components/breadcrumb |
| 제목 | H1-H6 제목 | /libs/foundation/components/title /libs/wcm/foundation/components/title |
| 텍스트 | 리치 텍스트 | /libs/foundation/components/text /libs/foundation/components/table /libs/wcm/foundation/components/text |
| 이미지 | 최적의 변환 크기의 지능적이고 레이지 로딩 | /libs/foundation/components/image /libs/foundation/components/adaptiveimage /libs/foundation/components/logo /libs/foundation/components/mobileimage /libs/foundation/components/mobilelogo /libs/wcm/foundation/components/image |
| 목록 | 페이지 목록 | /libs/foundation/components/list /libs/foundation/components/mobilelist /libs/wcm/foundation/components/list |
| 소셜 미디어 공유 | Facebook 및 Pinterest 공유 위젯 | - |
| 양식 컨테이너 | 반응형 양식 단락 시스템 | /libs/foundation/components/form/start /libs/foundation/components/form/end |
| 양식 텍스트 | 텍스트 입력 필드 | /libs/foundation/components/form/text /libs/foundation/components/form/password |
| 양식 옵션 | 여러 옵션 입력 필드 | /libs/foundation/components/form/checkbox /libs/foundation/components/form/radio /libs/foundation/components/form/dropdown |
| 숨겨진 양식 | 숨겨진 입력 필드 | /libs/foundation/components/form/hidden |
| 양식 단추 | 제출 또는 사용자 정의 단추 | /libs/foundation/components/form/submit |
| 탐색 | 중첩된 페이지 계층을 나열하는 사이트 탐색 구성 요소 | /libs/foundation/components/topnav /libs/foundation/components/mobiletopnav |
| 언어 탐색 | 글로벌 언어 구조를 나열하는 언어 및 국가 전환기 | - |
| 빠른 검색 | 드롭다운 메뉴에서 결과를 즉석 제안으로 표시하는 검색 구성 요소 | /libs/foundation/components/search |
| 티저 | 컨텐츠 작성자는 이미지, 제목 또는 리치 텍스트를 사용하여 추가 컨텐츠에 티저를 쉽게 만들고 추가 컨텐츠 또는 기타 작업에 연결할 수 있습니다 | - |
| 탭 | 컨텐츠 작성자가 여러 탭에서 페이지 컨텐츠를 구성할 수 있습니다. | - |
| 회전판 | 컨텐츠 작성자가 회전 슬라이드 회전하는 슬라이드 슬라이드에서 컨텐츠를 구성할 수 있습니다. | /libs/foundation/components/carousel |
| 콘텐츠 조각 | 컨텐츠 조각을 표시할 수 있습니다. | - |
| 콘텐츠 조각 목록 | 컨텐츠 조각 목록을 표시할 수 있습니다. | - |
| 분리자 | 페이지에서 컨텐츠 분리 | - |
| 어코디언 | 축소 가능한 아코디언을 사용하여 컨텐츠 패널 구성 | - |
| 컨테이너 | 컨테이너 내의 구성 요소 구성 | - |
| 단추 | 페이지에 단추 만들기 | - |
| 다운로드 | 페이지에 다운로드 가능한 에셋 추가 | - |
| 경험 조각 | 페이지에 경험 조각 추가 | /libs/cq/experience-fragments/editor/components/experiencefragment |
| 포함 | 페이지 내에 외부 리소스 포함 | - |
| 진행률 표시줄 | 목표에 대한 진행 상황을 시각적으로 표시 | - |
| PDF 뷰어 | 페이지에 PDF 문서 표시 | - |
예정된 구성 요소
예정된 핵심 구성 요소 로드맵에 대한 개요는 GitHub](https://github.com/adobe/aem-core-wcm-components/wiki/home)의 [프로젝트 wiki를 참조하십시오.
핵심 구성 요소 업그레이드
버전 관리 구성 요소의 한 가지 이점은 새 구성 요소 버전으로의 마이그레이션에서 새 AEM 버전으로 마이그레이션을 분리할 수 있다는 것입니다. 또한 새 구성 요소 버전을 사용할 수 있는 경우 각 구성 요소를 새 버전으로 개별 마이그레이션할 수 있습니다.
새 AEM 버전으로 마이그레이션은 핵심 구성 요소 작동 방식에 영향을 주지 않습니다. 단, 해당 버전은 마이그레이션되는 새 AEM 버전도 지원합니다. 핵심 구성 요소에 대한 사용자 지정은 사용되지 않거나 제거된 API를 사용하지 않는 한 영향을 받지 않아야 합니다.
핵심 구성 요소의 새 버전으로 마이그레이션은 구성 요소의 작동 방식에도 영향을 주지 않지만, 기본 동작을 원하지 않는 경우 템플릿 편집기의 일부 구성이 필요할 수 있는 페이지 작성자에게 새로운 기능이 도입될 수 있습니다. 하지만 사용자 지정을 수정해야 할 수도 있습니다. 자세한 내용은 핵심 구성 요소 사용자 지정 페이지를 참조하십시오.