포토로그



지저분한 문제 깔끔하게 덮어두기: 자바스크립트에 HTML 섞지 않기

어쩔 수 없는 지저분한 문제들이 있다. 연습 문제에는 없지만 진짜 문제에는 있다. 내가 영향을미칠 수 있는 범위 밖에 있는 마음에 들지 않는 코드를 어쩔 수 없이 내 집 마당에 들여 놓아야 한다면 어떻게 오염의 확산을막을 수 있을까? 오염 확산을 막으려면 일단 격리해야 한다.

Ajax호출로 받은 데이터로 HTML을 구성해야 하는 경우를 생각해보자. Ajax 호출로 받은 결과를 아래와 같이 li 엘리먼트로추가해야 한다. li에 데이터를 꾸미는 태그가 많이 들어간다. 문제는 HTML이 다른 곳에서 작성되고, 템플릿 코드를 입힌후에도 원본 HTML만 수정되어 배포 된다는 점이다.

<h3>결과</h3>
<ul id="result">
<li><img src="…" /><a href="…">어중이</a></li>
<li><img src="…" /><a href="…">떠중이</a></li>
</ul>

보통은 다음과 같이 하고 말 것이다. TIMTOWTDI

<h3>결과</h3>
<ul id="result">
</ul>

function showResult() {
var ul = $Element("result");
var html = "";
var result = api.findAll();
for (var i = 0; i < result.length; i++) {
var each = result[i];
html += '<li><img src="…" /><a href="<@s.url action="View" />?id=' + each.id + '">' + each.name + '</a></li>';
}
ul.html(html);
}

HTML이 수정되어 다시 오면 li 요소 안의 내용을 HTML에서 잘라내서 자바스크립트 코드로 다시 변환해서 넣어야 한다. HTML코드도 위치가 바뀌고 자바스크립트로 표현되어 있기 때문에 변경을 비교하기도 쉽지 않다. 또 자바스크립트에 HTML이 섞여 있고,템플릿 코드도 섞여 있다. 해석되는 시점과 방식이 다른 코드들이 섞여 있으면 코드는 이해하기 힘들어진다. 그냥 악취를 참고로봇이 될 것인가? 프로그래머는 그러지 않는다. 악취 나는 곳에서 대신 일해줄 로봇을 만들자.

HTML의 일부를 템플릿으로 사용해서 문제를 해결해보자. 아래와 같이 템플릿으로 사용될 부분을 주석으로 만들고, 자바스크립트로 주석부분을 읽어서 템플릿으로 쓰면 HTML도 원본과 크게 달라지지 않고, 코드가 섞이는 문제도 해결된다.

<h3>결과</h3>
<ul id="result">
<!--
<li><img src="…" /><a href="<@s.url action="View" id="__ID__" />">__NAME__</a></li>
-->
</ul>

var template = $Element("result").html().replace(/(^\s*<!--\s*|\s*-->\s*$)/g, "");
function showResult() {
var ul = $Element("result");
var html = "";
var result = api.findAll();
for (var i = 0; i < result.length; i++) {
html += template.replace("__ID__", each.id).replace("__NAME__", each.name);
}
ul.html(html);
}

지저분한 코드 담요 밑에 잘 넣어 두었다. '생각하는 프로그래밍' "칼럼 3 프로그램의 구조를 결정하는 데이터"의 교훈을 적용한 예이다.

자바스크립트에는 사내에서 쓰는 라이브러리를 사용하였지만 별다른 설명이 없어도 내용 전달에는 무리가 없을 것 같다. Prototype이나 jQuery(마음대로 선택 가능하다면 추천)에도 다 있는 기능이니 그리 다르지 않을 것이다.

글의 주제에 백배는 더 잘 맞는 예가 있으나 워낙 지저분한 문제라 배경 설명이 어려워서 예로 사용하지 못하는 것이 안타깝다.

덧글

  • 강규영 2008/04/24 02:26 # 삭제 답글

    저도 예전에 딱 저 방식을 사용했었어요. 이후에 (다행스럽게도) 실제로 "디자인 개편"이 있어줘서 덕을 봤었죠 ㅋ
  • 정재훈 2008/04/24 10:31 # 삭제 답글

    잘 읽고 갑니다. ^^
  • 이피 2008/04/24 22:41 # 답글

    디자인 개편 원츄~ 디자인 나온거 입혔는데 Ajax 호출도 하고 레이어도 뜨고 뭔가 신기하긴 한데 그다지 편하지 않다능...
  • ologist 2008/04/24 23:38 # 삭제 답글

    뷰를 위해서 html을 만드는 것인 정말 짜증나는 일중의 하나죠.
  • ologist 2008/04/25 08:21 # 삭제 답글

    근데 템플릿 엔진인 freemarker같은거 쓰면 안되는거?
  • 허혁 2008/04/25 14:36 # 삭제 답글

    오호 저에게는 색다른 접근 방법인 것 같아요..

    보통 AJAX보다 AHHA로 처리해버리는 경우가 많아서.. 언제 쓰게 될지.
  • 이피 2008/04/25 19:11 # 답글

    HTML로 결과를 받아 오는 경우는 보낼 때 Freemarker로 포맷팅해서 보내주면 됩니다. HTML로 결과를 받아 오지 않는 이유는 HTML 조각을 떼어서 조각이 들어갈 HTML과는 먼 다른 곳에 두어야하기 때문이죠. 원래 하나여서, 멀어지면 오해가 생기니 가까이 두려합니다.
  • jania902 2008/07/17 16:58 # 답글

    http://ejohn.org/blog/javascript-micro-templating/

    아아.. 레식 횽아한테는 이길 수 없다눈. GG
  • 이피 2008/07/18 00:16 # 답글

    횽아 좀 짱인듯.
댓글 입력 영역