Recycle Templating JS - v2.0 (웹컴포넌트 문법 추가)
1. 개요
1.1. 재활용 가능한 템플릿팅을 추구하는 Recycle Templating v2.0 JavaScript 유틸리티를 소개합니다.
1.2. 기본 템플릿 문법은 이전 버전과( recycle_tmpl-1.9 ) 동일하며 웹컴포넌트 문법이 추가되었습니다.
1.3. 웹컴포넌트 문법 외에 이전 버전에서 달라진 주요사항은 다음과 같습니다.
- 내장된 유틸 함수 간소화 : 렌더링 기능용 함수 html(), append(), prepend() 제공으로 인해 개발자의 창의력이 오히려 저하되는 현상이 실무 현장에서 관측되어, 코드 재사용 핵심에 집중할 수 있도록 렌더링 기능용 함수는 제거하였습니다. 일반적인 렌더링 기능에 대한 예제는 "5. 예제" 항목을 참고하시면 됩니다.
- 초기화 init() 함수 : aoSuperBlock 자체도 캐시하던 기능 및 callbackFn 제거. 초기 렌더링용 HTML 반환기능 추가.
- 결합기 link() 함수 : querySelector 참조 로직 제거. 캐시 참조용 "분리기 separate() 함수"의 실행을 전제로 함.
2. 기본 템플릿 문법
2.1. 알파오메가 태그의 종류
- AlphaOmega 시작태그 : <ao key="선택자key"> ==> "선택자key"는 querySelector 문법의 CSS 선택자
- key가 없는 AlphaOmega 시작태그 : <ao> ==> 직전 요소의 id 선택자(예: #id_div)를 "선택자key"로 취함
- AlphaOmega 종료태그 : </ao>
2.2. 템플릿 컨텐츠 영역을 감싸는 2가지 방법
- <ao key="testId">템플릿 컨텐츠</ao>
- <span id="testSpanId"><ao>템플릿 컨텐츠</ao></span>
2.3. 치환 문법
- {{ key }} : dataObj[key] 값으로 해당 영역을 치환합니다.
- {{ dataSubObj.key }} : dataObj[dataSubObj][key] 값으로 해당 영역을 치환합니다.
- {{= key }} : dataObj[key] 값을 HTML escape 처리한 후 그 값으로 해당 영역을 치환합니다.
2.4. 분기 문법
- {{ if/ key }} : if 블록의 시작. (key로 참조하는 값을 JavaScript true/false로 평가)
- {{ ifNot/ key }} : ifNot 블록의 시작.
- {{ /if }} : if 혹은 ifNot 블록의 종료.
3. 내장된 유틸 함수(자세한 사용법은 아래 "5.1. 일반 예제" 참고)
3.1. recycle_tmpl.init() : 초기화 함수(템플릿 캐싱 영역과 초기 렌더링 영역의 분리)
- 호출 형태 : var htmlForInit = recycle_tmpl.init(querySelectorKey_aoSuperBlock);
- 기능 : aoSuperBlock(type="text/html"의 script 태그로 감싼 <ao> 최상위블록) 컨텐츠에서 템플릿 영역은 캐싱하고, 분리된 초기 렌더링용 HTML을 반환합니다. ("분리기 separate() 함수"를 내부에서 호출하는 wrapper 함수)
3.2. recycle_tmpl.link() : 결합기 함수
- 호출 형태 : var htmlForRender = recycle_tmpl.link(key_tmpl, dataObj);
- 기능 : key_tmpl 로 참조되는 <ao> 템플릿에 dataObj 를 바인딩시켜서 결합한 렌더링용 HTML을 반환합니다.
4. 웹컴포넌트 문법 소개
4.1. 커스텀태그 정의
- 시작태그 : <커스텀태그>
- 종료태그 : </커스텀태그>
- 웹컴포넌트 입력데이터 : ref_id(필수 항목) 및 기타 입력데이터를 커스텀태그 사이에 JSON 형태로 정의
4.2. 커스텀태그 정의 예
<selectCustom>
"ref_id" : "웹컴포넌트 인스턴스 id"
, "기타 key" : "value", ...
</selectCustom>
4.3. 웹컴포넌트 정의
- 아래 "5.2 웹컴포넌트 예제"를 참고하여 함수 실행형으로 정의합니다.
- 웹컴포넌트 템플릿 block용 HTML 컨텐츠는 함수 정의 내부에 위치하는 COM.block 변수에 할당합니다.
4.4. 웹컴포넌트 템플릿 치환 문법
- [[ key ]] : 웹컴포넌트 입력데이터에 속한 key의 참조 값으로 해당 영역이 치환됩니다.
- [[= key ]] : 웹컴포넌트 입력데이터에 속한 key의 참조 값을 HTML escape 처리한 후 그 값으로 치환됩니다.
- 위의 치환은 recycle_tmpl.init() 실행시 수행되며 기본 템플릿 치환은 초기 렌더링 후 이벤트로 처리하면 됩니다.
5. 예제
5.1. 일반 예제
5.2. 웹컴포넌트 예제
4. HISTORY
4.1. 설계 철학
- 저는 HTML 디자인 영역에 계산, 반복, 변환 등의 로직 노출을 최소화하자는 코드분리 철학을 가지고 있습니다.
- 이러한 철학을 바탕으로 작성된 관련 논문을 통해 재활용 가능한 템플릿팅 구현에 대한 영감을 얻었습니다.
- 에러에 취약한 특징을 갖는 몇몇 템플릿 엔진과 달리 디버깅에 유리하고 직관적인 컨텐츠 관리가 가능합니다.
4.2. 이전 버전
- recycle_tmpl-1.9.js : hidongh.tistory.com/15
4.3. recycle_tmpl-2.0.js
- 재활용 가능한 웹컴포넌트 문법 추가
- 내장된 유틸 함수 간소화 적용 : 렌더링 기능용 내장함수는 제거하고 별도 예제로 제공