XE 템플릿 구문

XE 템플릿 구문

템플릿(template)이란 붕어빵을 만드는 틀로 비유된다. 같은 모양, 같은 크기의 객체(object)를 만들기 쉽다. 프로그래밍 언어에서 템플릿 구문은 초등학교 시절의 플라스틱 모형자를 생각하면 이해가 쉽다. 제각각 다른 모양, 다른 크기로 그려지는 삼각형도 모형자 하나만 있으면 모두들 똑같은 삼각형을 그려낸다...^^
XE코어도 대부분 PHP로 작성되는 오픈소스 프로그래밍 언어이다. 따라서 언어의 특성상 작성자 특유의 즐겨쓰는 구문이나 코딩법들이 사용될 가능성이 크다. 이것을 어떻게 일관된 규칙과 문법으로 유지시켜 나갈 수 있을까?

"XE 템플릿 구문이란, 동적 데이터의 화면 출력을 효과적으로 제어하기 위해 PHP로부터 프리젠테이션 로직을 분리한 코드이다."라고 메뉴얼은 설명한다. 프리젠테이션 로직이란 보여주기 위한 로직, 즉 화면상의 디자인 구성을 위한 로직을 일컫는 말로써, 모듈의 템플릿, 위젯, 애드온, 게시판의 스킨 등에서 사용하기 위한 조건문과 반복문(if, for, while)을 간결한 소스 코드로 분리하였다는 뜻이다. 이것은 다른 프로그래밍 언어들처럼 XE 안에서만 특별히 사용하기 때문에 XE 템플릿 문법이라 표현하고 화면에 표시할 때는 서버 측에서 다시 PHP 문법으로 해석(compile)되어 출력된다.

XE 템플릿 문법의 장점

• 간결 - 스킨의 소스 코드를 약 절반 정도로 간결하게 줄여서 용량을 절약할 수 있다.
• 판독 - HTML 태그에 기반하여 문법을 작성하기 때문에 조건문과 반복문의 시작과 끝을 찾기가 쉽고, 문법적 오류를 줄일 수 있다.

XE 템플릿 문법의 사용법

• HTML 주석 <!--...-->안에 작성하는 방법. 예) <!--@if(...)-->...<!--@end-->
• 가상의 <block> 요소 안에 작성하는 방법. 예) <block>...</block>
• HTML 요소에 직접 작성하는 방법. 예) <p cond="조건절">...</p>
• 주석이나 요소에 의존하지 않고 작성하는 방법. 예) {$content} 내용 변수로 데이터를 출력함.

※ 가상요소(block)란, HTML 요소의 형식을 빌려 쓰고는 있지만 제어문을 실행할 뿐 실제로 화면에 요소가 출력되지는 않는다. cond 속성도 가상의 속성으로서 조건문 역할을 한다.

---

XE 템플릿 문법의 이해

다음 구문은 PHP의 IF 조건문이다. PHP는 HTML 문서 안에서 HTML 태그와 혼합하여 사용할 수 없다. PHP는 서버에서만 읽고 해석하는 서버측 스크립트 언어이고 HTML은 웹브라우저에서 읽고 해석하는 마퀴업 언어이기 때문이다.

<?php
   if(조건식) {
      실행문1
   } else {
      실행문2
   }
?>

따라서 실행문의 내용이 HTML 태그를 포함한다면 실행문은 태그를 포함한 echo문으로 작성되어야 하고 다음과 같다.

<?php
   if($a=1) {
      echo "<p>조건식이 TRUE이면 실행문1이 표현된다.</p>";
   } else {
      echo "<p>그밖에는 실행문2가 표현된다.</p>";
   }
?>

만약 echo문을 사용하지 않고 PHP 구문과 HTML 구문을 분리하여 작성한다면 다음과 같다.

<?php  if($a=1) { ?>
   <p>조건식이 TRUE이면 실행문1이 표현된다.</p>
<?php } else { ?>
   <p>그밖에는 실행문2가 표현된다.</p>
<?php } ?>

그런데 위와 같이 구문을 나누고 보니 무척 복잡해 보이고 문제가 있는 경우에 오류의 원인을 찾기가 쉽지 않다. 따라서 많은 개발자들이 PHP 프로그래밍 작업에서 약식 출력(<?=...?>) 또는 짧은 태그(<?...?>)를 사용하기도 하지만 XHTML 문서에서는 이렇게 사용되는 경우 치명적인 오류가 발생한다. 따라서 HTML 태그와 구분된 PHP 코드를 HTML 주석문(<!-- -->)과 앳 기호(@)를 이용해 다음과 같이 약속해보자!!!

<!--@if($a=1)-->
   <p>조건식이 TRUE이면 실행문1이 표현된다.</p>
<!--@else-->
   <p>그밖에는 실행문2가 표현된다.</p>
<!--@end-->

이렇게 약속된 표현방법을 XE 템플릿 문법이라 말하고 HTML 주석문 안에 @ 기호를 이용해 작성된 구문은 서버에서 다시 PHP문으로 해석(compile)되어 출력되는 것이다.

결과적으로 XE 템플릿 문법은 HTML 문서 안에서 PHP 구문을 대신하여 사용하기 위한 약속된 템플릿용 언어이다. 따라서 XE의 레이아웃과 모듈의 템플릿 스킨, 게시판의 스킨 등에서 사용되는 템플릿용 구문이라고도 할 수 있으며 다른 언어에서는 사용되지 않기 때문에(배울 수 없기 때문에) 약간의 공부가 필요하다.

이와 유사한 형식의 템플릿 언어가 jQuery이다.

<script type="text/javascript">
<!--
	function sayHello() {
		document.getElementById('text1').innerHTML = '우주 정거장을 닮은 XE!';
	}
//-->
</script>

위와 같은 스크립트 블록 내부에 sayHello()라는 javascript 함수를 정의하였다면 아래의 텍스트를 클릭해 보자.

XpressEngine은...

문서 안에서 해당하는 엘리먼트를 찾아 텍스트를 바꾸어 주는 javascript 함수 구문이지만 모든 웹브라우저에서 같은 결과를 얻을 수 있다고는 말할 수 없다. 왜냐하면 브라우저마다 javascript를 동일하게 지원하지 않는다. 따라서 다양한 종류의 브라우저에서 동일한 결과를 얻기 위한 노력으로, 자기 자신 스스로가 사용할 목적의 작은 함수 라이브러리를 만들고, 직접 호주머니에 넣고 다니면서 미리 약속된 문법을 사용하여 모형자처럼 템플릿 언어로 만든 것이 jQuery이다.

// 자신이 사용할 jQuery 함수 라이브러리 파일을 원격으로 불러올 수도 있다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">
   jQuery(function($) { // javascript가 아닌 jQuery라고 이야기 한다.
      $('#text2').click(function() { // 미리 정의된 함수 이름을 불러 선택된 엘리먼트가 해야 할 일을 가르쳐 준다.
         $('#text2').html('우주 정거장을 닮은 XE!'); // 선택자의 텍스트를 바꾼다.
      });
   });
</script>

XpressEngine은...

위에 작성한 jQuery 구문은 먼저 작성한 javascript 구문과 동일한 결과를 얻을 수 있지만 차이점은 대부분의 웹브라우저에서 같은 결과를 보여준다는 것이다. 왜냐하면 자신이 사용할 함수 라이브러리를 미리 불러 놓았고, 미리 정의된 템플릿 구문을 이용하여 문서내 엘리먼트를 찾아서 바꾼다. 이것 또한 약속된 언어이기 때문에 정의되지 않은 함수 구문을 사용할 수 없고 좀더 많은 공부가 필요하지만 동적인 웹페이지를 개발하는데 꼭 필요한 언어가 되었다.

XE 코어의 호주머니 속에는 이미 jQuery 함수 라이브러리를 가지고 있어서 별도의 라이브러리 파일을 불러올 필요가 없다. 따라서 XE에서 사용되는 레이아웃, 모듈의 템플릿, 게시판의 스킨 등에서 jQuery 함수를 마음껏 사용할 수 있는데 그러면, XE 템플릿 구문은 어떤 파일을 참조하고 있을까?
이것을 이해하기 위해 여기까지 왔다!

정답은 xe/classes/template/TemplateHandler.class.php 함수 라이브러리 파일이다. 이곳에서 XE가 사용하는 템플릿 구문이 PHP문으로 해석(compile)되어 출력되는 것이다. XE가 사용하는 함수 라이브러리 파일을 꼭 읽어보자! 그러면 XE와 좀더 가까워 질 수 있다...^^

 

출처 : http://www.xeschool.com/xe/xenote_template_syntax_expressions