Javascript를 이용한 Client template

Java에서는 왠일인지  웹페이지 개발시에 template를 사용하지 않는 듯하다.

초기 웹 개발시에 주로 PHP를 사용했던 나는 왜 다른 곳에서는 Template를 사용치 않는지 이유를 알수 없다.

PHP로 개발 할때 부터 만들어 쓰던 나만의 template 엔진(?)이 있다. 엔진이라기 보다는 그냥 라이브러리다.

별거 없이 그냥 문자열 치환 기능을 이용해 간단하게 작성한 것이지만 개발시에 충분히 편하다.

template의 목적 자체가 HTML과 서버코드와의 분리이다.

지금 이곳도 jsp코드는 한줄도 들어가 있지 않으며 따라서 jstl도 쓰지 않았다.

개발시에 client 단 코드와 server단 코드가 뒤석여 있는 것 만큼 보기 힘든 소스는 없을 것이다.

보기에도 힘들고 수정도 힘들다.

이글은 이런 유용한 template 기술을 client 단에서 처리하면 어떨가 하는 생각에 만들어본 javascript template 소개 이다.

다름은 현재 게시판의 list화면에서 사용하는 html 코드중 일부이다.(리스트 화면에서 우클릭 하여 소스보기를 하면 보인다.)

<table class="w3-table w3-striped w3-bordered w3-hoverable w3-centered">
    <colgroup>
        <col style="width:80px">
        <col style="width:*">
        <col style="width:120px">
        <col style="width:120px">
        <col style="width:80px">
    </colgroup>
    <thead>
        <tr class="w3-light-grey w3-center">
            <th>번호</th>
            <th>제목</th>
            <th>글쓴이</th>
            <th>등록일</th>
            <th>조회수</th>
        </tr>
    </thead>
    <tbody id="boardList" class="w3-hide">
        <tr>
            <td>{{virNum}}</td>
            <td class="w3-left" style="padding-left:{{depth}}0px;cursor:pointer" onclick="goView({{boardSeq}})">{{title}}</td>
            <td>{{writer}}</td>
            <td>{{registDt}}</td>
            <td>{{readCnt}}</td>
        </tr>
    </tbody>
</table>

목록 레이아웃을 table로 잡았다.
테그에 id를 달았고. 안쪽에는 template에서 사용할 레이아웃 코드가 들어있다.

다음코드는 해당 코드에 내용을 채우는 부분의 일부 이다.(역시 소스보기를 통해 볼수 있다.)

var pageTpl = new FogTemplateJs("pageNavi");
function drawPageInfo(totalCnt, pageCnt, cuPage){
	
	var stdCnt = 7; // 페이지 네비게이션 기본 숫자(7개가 보여진다.)
	var left = Math.floor(stdCnt / 2);
	var totalPage = Math.ceil(totalCnt / pageCnt);
	var stIdx = cuPage - left;
	if (cuPage > totalPage - left) stIdx = totalPage - stdCnt + 1;
	if (stIdx <= 1) stIdx = 1;

	var pageList = new Array();
	for (var i = stIdx; i < stIdx + stdCnt && i < totalPage + 1; i++){
		pageList[i - stIdx] = {"page" : i - stIdx + 1};
	}
	
	pageTpl.doExcute(pageList);
    ...
    ...
    ...
    ...

전역변수로 pageTpl를 만들고 FogTemplateJs 객체를 할당 했다.

마지막 줄에 pageTpl.doExcute(..) 함수를 호출 하여 실제 영역에 데이터를 채워 넣는다.

pageList는 배열 객체이다.

중간의 코드는 중요하지 않다.. 특정 data를 담고있는 객체의 list 로 이해하면 된다.

게시판의 목록리스트 에는 순번, 제목, 글쓴이, 등록일, 조회수를 갖는 객체가 들어간다.