SPA 개발을 위한 ao_tmpl-1.8.js 적용 가이드

ao_tmpl-1.8.js

0.01MB

1. 개요
이전 버전(ao_tmpl-1.7.js)까지 본 블로그에서 소개해 온 알파오메가 템플릿팅에 대한 설명이 다소 난해하다는 지적이 있어서 아래와 같이 적용 가이드를 작성하였습니다. 특히, SPA(Single Page Application) 스타일의 웹페이지 개발 실무에 당장 적용할 수 있는 예제를 제공합니다. SPA 개발을 보조하는 하나의 아이디어로 봐주시면 감사하겠습니다.

2. ao_tmpl-1.8.js 소개
2.1. 템플릿 문법
2.1.1. 템플릿 컨텐츠 영역을 감싸는 2가지 방법
- alpha 태그와 omega 태그 : <!--a[id]-->템플릿 컨텐츠<!--o-->
- AlphaOmega 시작태그와 종료태그 : <ao>템플릿 컨텐츠</ao>
2.1.2. 알파오메가 태그의 종류
- alpha 태그 : <!--a[템플릿 참조용 id]--> 
- omega 태그 : <!--o-->
- AlphaOmega 시작태그 : <ao> ==> 이 태그의 "템플릿 참조용 id"는 직전 요소의 id로 자동 셋팅됨
- AlphaOmega 종료태그 : </ao>
2.1.3. 치환 문법
- {{ key }} : dataObj[key] 값으로 해당 영역을 치환합니다.
- {{ dataSubObj.key }} : dataObj[dataSubObj][key] 값으로 해당 영역을 치환합니다.
- {{= key }} : dataObj[key] 값을 html escape 처리한 후 그 값으로 해당 영역을 치환합니다.
2.1.4. 분기 문법
- {{ if/ key }} : if 블록의 시작. (key로 참조하는 값을 JavaScript true/false로 평가)
- {{ ifNot/ key }} : ifNot 블록의 시작.
- {{ /if }} : if 혹은 ifNot 블록의 종료.

2.2. 내장된 알파오메가 유틸 함수(자세한 사용법은 아래 3.절의 예제 참고)
2.2.1. ao_tmpl.init()
- 호출 형태 : ao_tmpl.init(id_aoBlock, callbackFn); // callbackFn 파라미터는 Optional(필수는 아님)
- 기능 : id_aoBlock 컨텐츠를 대상으로 ao_tmpl.separate(알파오메가 분리=html 템플릿 컨텐츠 캐싱) 수행 후 콜백함수 실행. init() 호출시 id_aoBlock(알파오메가 블록) 컨텐츠 캐싱은 최초 1회만 수행되고 콜백함수는 매번 실행됨.
2.2.2. ao_tmpl.html()
- 호출 형태 : ao_tmpl.html(id_rndr, id_tmpl, dataObj);
- 기능 : id_tmpl 컨텐츠를 대상으로 ao_tmpl.link(알파오메가 결합=html 템플릿팅) 수행 후, id_rndr 영역에 렌더링.
2.2.3. ao_tmpl.append()
- 호출 형태 : ao_tmpl.append(id_rndr, id_tmpl, dataObj);
- 기능 : id_tmpl 컨텐츠를 대상으로 ao_tmpl.link 수행 후, id_rndr 영역에 insertAdjacentHTML() 적용.

3. SPA(Single Page Application) 구성을 위한 예제
3.1. spa_main.html : 메인 컨테이너 역할을 하는 html 파일입니다.

 

3.2. spa_sub.html : 서브 영역에 렌더링될 템플릿 컨텐츠가 포함된 html 파일입니다.

4. HISTORY
4.1. 설계 철학
- 저는 HTML 디자인 영역에 계산, 반복, 변환 등의 로직 노출을 최소화하자는 코드분리 철학을 가지고 있습니다.
- 이러한 철학을 바탕으로 작성된 관련 논문으로부터 알파오메가 템플릿팅 구현에 대한 영감을 받았습니다.
- 에러에 취약한 특징을 갖는 몇몇 템플릿 엔진과 달리 디버깅에 유리하고 WYSIWYG 방식으로 관리가 가능합니다.

4.2. 이전 버전
- ao_tmpl-1.7.js : hidongh.tistory.com/13

4.3. ao_tmpl-1.8.js
4.3.1. SPA 개발을 돕는 템플릿팅 예제 제공
4.3.2. ao_tmpl-1.7.js 에서 소개한 알파오메가 유틸 함수 3가지를 ao_tmpl 객체에 내장시켰습니다.
- ao_init() ==> ao_tmpl.init()
- ao_html() ==> ao_tmpl.html()
- ao_append() ==> ao_tmpl.append()