웹 개발을 하다 보면 디자이너 영역과 프로그래머 영역의 구분이 모호할 때가 상당히 많이 있습니다. 물론 우리 시대의 웹 개발이 그러한 부분을 해결하기 위해 진행 되고 있는 것도 사실 입니다만…
JSP의 JavaBean, EJB, Custom Tag, JSTL이나 MS 쪽의 Component등은 따지고 보면 모두 디자이너와 개발자를 분리 할 수 있는 것들 입니다.
우리가 만들 웹 페이지를 디자이너에게 일임하여 만들 수는 없는 것일까? 다행스럽게도 프리마커(FreeMarker) 라는 오픈 소스 프로젝트에서 이를 연구하고 있습니다. 무조건 좋은 것은 아니지만 어느 정도의 오버헤드를 감수 한다면 괜찮은 방법 입니다.
FreeMarker는 표현의 결과물을 HTML로 관리하고 여기에 자바 객체를 연결하여 최종적인 결과를 만들어 냅니다.
[그림]프리마커 아키텍처
FreeMarker의 동작을 정리하면 Template File이라는 것이 있는데 이것은 디자이너가 만드는 결과 화면 HTML 로, 말그대로 템플릿(보여주기 위한 틀만 제공 하고 나중에 채워짐)이므로 나중에 FreeMarker에 위해 자바 객체 등이 변환되어 채워지게 되는 것 입니다. 결국 그것이 최종적인 출력물이 되는 것 입니다.
물론 동적으로 채워진다는 것은 어느 정도 오버헤드가 있다는 이야기 입니다.
웹 애플리케이션에서 유지보수, 관리를 편하게 해주는 대신 어느 정도의 성능 저하는 생각 해야 한다는 이야기 입니다. 아마도 사용자가 얼마 안 되는 경우엔 별 오버헤드가 없겠지만 동시 사용자가 많은 사이트에서는 오버헤드를 고려한 충분한 테스트를 해야 합니다.
결국 디자이너와 개발자의 영역을 분리 할 수 있게 되는 것 입니다.(한계가 있겠지만…)
FreeMarker(예제1)
FreeMarker를 사용 하기 위해서는 먼저 프리마커 배포 버전을 다운 받아 설치해야 합니다. http://prdownloads.sourceforge.net/freemarker/freemarker-2.3.1pre.tar.gz 에서 파일을 다운 받은 후 압축을 적당한 곳에 풀도록 합니다. 물론 서블릿 컨테이너는 Tomcat5를 사용 합니다.
압축을 푼 후 freemarker.jar 파일을 WEB-INF/lib 폴더에 복사 합니다.
먼저 Template File을 만듭니다.
먼저 Template File을 만듭니다.
아래 내용을 webapps/ROOT에서 작성 합니다. (template.html)
<html><head><title>FreeMarker Test Program</title>
</head><body>
${name} 님의 방문을 환영 합니다~ <br>
주 소 : ${address} <br>
</body></html>
4. 이번에는 같은 경로에 JSP 파일을 만들어 봅니다. (freemarker.jsp)
<%@ page import = "java.util.*" pageEncoding="euc-kr" %>
<%@ page import = "java.io.*" %>
<%@ page import = "java.servlet.*" %>
<%@ page import = "java.servlet.http.*" %>
<%@ page import = "freemarker.template.*" %>
<%
Configuration cfg = Configuration.getDefaultConfiguration();
//현재 폴더에서 template file 로딩 하겠다는 의미
cfg.setServletContextForTemplateLoading(getServletContext(), ".");
<%@ page import = "java.io.*" %>
<%@ page import = "java.servlet.*" %>
<%@ page import = "java.servlet.http.*" %>
<%@ page import = "freemarker.template.*" %>
<%
Configuration cfg = Configuration.getDefaultConfiguration();
//현재 폴더에서 template file 로딩 하겠다는 의미
cfg.setServletContextForTemplateLoading(getServletContext(), ".");
//Template File Loading
Template temp = cfg.getTemplate("template.html");
//Create Data Model
Map root = new HashMap();
root.put("name","jclee");
//계층 구조를 표시 하기 위해 HashMap에 HashMap을 추가
//즉 템플릿에서 info.address 표시 가능
Map info = new HashMap();
root.put("info", info);
info.put("address","서울 구로동 오엔제이프로그래밍");
Template temp = cfg.getTemplate("template.html");
//Create Data Model
Map root = new HashMap();
root.put("name","jclee");
//계층 구조를 표시 하기 위해 HashMap에 HashMap을 추가
//즉 템플릿에서 info.address 표시 가능
Map info = new HashMap();
root.put("info", info);
info.put("address","서울 구로동 오엔제이프로그래밍");
//get OutStream
Writer fout = new BufferedWriter(
new OutputStreamWriter(response.getOutputStream(),
temp.getEncoding()));
Writer fout = new BufferedWriter(
new OutputStreamWriter(response.getOutputStream(),
temp.getEncoding()));
//response.setContentType("text/html; charset=euc-kr");
try {
//Template File과 Data Model의 결합
temp.process(root, fout);
}
catch(TemplateException e) {
throw new ServletException("Error... freemarker processor");
}
%>
try {
//Template File과 Data Model의 결합
temp.process(root, fout);
}
catch(TemplateException e) {
throw new ServletException("Error... freemarker processor");
}
%>