AEM 기본 이론 정리 (ClientLibrary)

AEM ClientLibrary

ClientLibrary
항목	설명
ClientLibrary란?	AEM에서 정적 파일(js,css 등)을 관리하는 방법
구성요소	categories, embed, folders, js.txt, css.txt
categories	client library가 제공하는 기능 또는 이와 관련된 기능을 정의한 이름. 템플릿에서 이 이름을 통해 어떤 종류의 스크립트가 필요한지 정의 가능
embed	특정 client library를 사용하기 위해 추가해야 하는 JS 및 CSS파일
folders	client library 내의 여러 파일 및 하위 디렉토리를 그룹화하는데 사용
js.txt	client library에 포함되는 JavaScript 파일 목록 순서에 따라 포함
css.txt	client library에 포함되는 CSS 파일 목록 순서에 따라 포함
사용법	보통 Maven 기반의 프로젝트에서 정적 파일을 관리 'ui.apps/src/main/content/jcr_root/apps/[project]/clientlibs'에 client library 폴더 생서 후 categories 및 js/css 파일 관리 이 파일을 템플릿에서 호출하는 방법을 정의해야 함

---

AEM css.txt/js.txt

css.txt / js.txt
파일 이름	구성 요소	설명
css.txt	파일 경로	css 파일 경로를 텍스트 형태로 기록
js.txt	파일 경로	JavaScript 파일 경로를 텍스트 형태로 기록

CSS 파일과 JavaScript 파일을 ClientLibrary로 묶어 관리할 때, 각 파일의 경로를 기록한 css.txt와 js.txt 파일이 필요합니다.
 
파일들은 ClientLibrary 노드에 위치하며, ClientLibrary에서 사용하는 모든 CSS 파일과 JavaScript 파일의 경로를 기록합니다.
 
이렇게 경로를 기록함으로써, AEM은 ClientLibrary에서 필요한 모든 파일을 로드할 수 있습니다.

---

Client Library 사용

Client Library 사용
항목	설명
clientlib.all	프로젝트에서 사용하는 모든 라이브러리를 포함하는 클라이언트 라이브러리 모든 CSS 및 JS 파일을 하나의 파일로 합치고 최소화된 파일을 생성
clientlib.js	프로젝트에서 사용하는 모든 JavaScript 라이브러리를 포함하는 클라이언트 라이브러리 모든 JS 파일을 하나의 파일로 합치고 최소화된 파일을 생성
clientlib.css	프로젝트에서 사용하는 모든 CSS 라이브러리를 포함하는 클라이언트 라이브러리 모든 CSS 파일을 하나의 파일로 합치고 최소화된 파일을 생성