AEM 기본 이론 정리 (HTL/HTML Template Language)

HTL

• JSP 및 Apache sling에서 사용되는 스크립트 엔진과 비교하여 보다 간결하고 안전한 구조
• HTML과 유사, HTML로 작성된 템플릿을 변경하지 않고도 템플릿 내부의 동적 데이터를 관리할 수 있음
• 템플릿 내에서 AEM 컴포넌트에서 제공하는 모델의 속성 및 메서드 호출 가능
• 화면 로직을 간결하게 작성하고 성능을 향상시킬 수 있음

HTL(HTML Template Language)
항목	설명
HTL이란?	HTML Template Language의 약자로 AEM에서 사용되는 템플릿 언어
HTL의 특징	1. 타입 안정성(type-safety) 보장 2. 간결하고 가독성 높은 코드 작성 3. XSS 공격 방어 기능 내장
HTL 문법	{% <디렉티브> <옵션> %} ${<표현식>} data-sly-<속성>="<디렉티브> <옵션>"
HTL 디렉티브 종류	1. 조건문: data-sly-test, data-sly-if, data-sly-choose, data-sly-when, data-sly-otherwise 2. 반복문: data-sly-repeat 3. 변수 선언: data-sly-use 4. 리소스 래핑: data-sly-resource, data-sly-include, data-sly-unwrap 5. 템플릿 생성: data-sly-template, data-sly-call, data-sly-attribute, data-sly-element 6. 기타: data-sly-list, data-sly-text, data-sly-attribute, data-sly-comment
HTL 예시	{% if properties.text %}<p>${properties.text}</p>{% endif %} <div data-sly-test="${properties.text}">${properties.text}</div> <ul data-sly-list="${list}"><li>${item.title}</li></ul>

---

Block Statem

Block Statement 의 HTL 예시문

<div data-sly-test="${condition}">
  <h1>${title}</h1>
  <p>${text}</p>
</div>

- data-sly-test를 통해 condition 변수의 값이 true일 경우에만 <div> 태그를 출력합니다.
- 이때, 중괄호로 묶인 영역 내에서는 여러 개의 HTL 표현식을 사용할 수 있습니다.
- 위 코드에서는 title과 text 변수를 출력하기 위해 ${title}과 ${text}를 사용하고 있습니다.

---

Expression Language(EL)

• JSP 페이지에서 JavaBeans 객체를 참조하고, 연산, 비교, 산술, 논리 연산을 수행할 수 있도록 하는 언어
• EL은 JSP 2.0부터 소개되었으며, JSP 페이지에서 스크립트 태그나 Java 코드를 사용하는 것보다 더 간단하고 유연한 방법을 제공
• EL은 $ {expression} 형식으로 작성
• expression은 JSP 페이지에서 참조하는 JavaBeans의 프로퍼티 또는 메소드를 나타내는 것이 일반적
• EL을 사용하여 다음과 같은 연산을 수행할 수 있습니다

- 산술 연산 (+, -, *, /)
- 비교 연산 (==, !=, <, >, <=, >=)
- 논리 연산 (&&, ||, !)
- 속성 접근 (객체.프로퍼티)

EL 장점

- 코드를 간결하게 작성할 수 있습니다
- JavaBeans 객체를 더 쉽게 참조할 수 있습니다
- 태그 라이브러리를 덜 사용할 수 있습니다
- JSP 페이지와 Java 코드 간의 결합도를 낮출 수 있습니다