어쩔 수 없는 지저분한 문제들이 있다. 연습 문제에는 없지만 진짜 문제에는 있다. 내가 영향을미칠 수 있는 범위 밖에 있는 마음에 들지 않는 코드를 어쩔 수 없이 내 집 마당에 들여 놓아야 한다면 어떻게 오염의 확산을막을 수 있을까? 오염 확산을 막으려면 일단 격리해야 한다.
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(마음대로 선택 가능하다면 추천)에도 다 있는 기능이니 그리 다르지 않을 것이다.글의 주제에 백배는 더 잘 맞는 예가 있으나 워낙 지저분한 문제라 배경 설명이 어려워서 예로 사용하지 못하는 것이 안타깝다.
덧글
보통 AJAX보다 AHHA로 처리해버리는 경우가 많아서.. 언제 쓰게 될지.
아아.. 레식 횽아한테는 이길 수 없다눈. GG