1 Results for '스크립트디버깅'

  1. 2007.10.07 티스토리에 UNIQLOCK을 달았을 때 카테고리 오류 수정하기 (14)
UNIQLOCK을 달고 나서 카테고리 트리의 서브 카테고리가 열리지 않으면서 스크립 오류가 나는 문제가 있었어요.

아마도 UNIQLOCK 스크립트를 달면서 뭔가 오류가 있었겠죠.
UNIQLOCK은 외부의 단일 스크립트이고 그 안에 두 개의 스크립트가 추가로 로드되는데요, 이 중 setLayer.js 라는 파일에 있는 코드가 문제를 일으키네요. 원본 코드는 다음과 같습니다.

function showLayer(layerID,value){
// alert(layerID);
 document.getElementById(layerID).style.visibility = value;
}

평범하죠? 문제는 style.visibility가 설정되어 있지 않은 layer에서는 이 코드가 오류를 발생시킨다는 점이에요. 게다가 showLayer라는 함수는 티스토리의 common2.js 파일에서도 사용하고 있는 이름인데 두 펑션의 정의가 다르니까 당연히 티스토리의 showLayer를 사용할 때 문제가 발생할 거에요. 티스토리의 showLayer 함수는 다음과 같습니다.

function showLayer(id) {
 document.getElementById(id).style.display = "block";
 return true;
}
자바스크립트의 편리한 점이자 문제점은 같은 이름의 펑션을 정의하면 나중에 정의된 내용으로 덮어씌워져 버린다는 건데요, 이걸 한 번 더 이용해서 위의 두 펑션이 공존할 수 있는 형태로 showLayer를 재정의했어요.

function showLayer(id, value) {
 document.getElementById(id).style.display = "block";
 var ele = document.getElementById(id);
 if (ele.style.visibility) {
  ele.style.visibility = value;
 }
 return true;
}
자 그럼 최종적인 수정.
티스토리의 스킨 수정에서 UNIQLOCK를 달 때에는 다음과 같이 스크립트를 붙이시면 돼요.
<script type="text/javascript" src="http://www.uniqlo.jp/uniqlock/user/js/고유ID.js"></script>
<script type="text/javascript">
function showLayer(id, value) {
 document.getElementById(id).style.display = "block";
 var ele = document.getElementById(id);
 if (ele.style.visibility) {
  ele.style.visibility = value;
 }
 return true;
}
</script>
그러면 제 블로그의 오른쪽 상단에 있는 것 처럼 UNIQLOCK도 잘 나오고 카테고리도 이상이 없게 쓸 수 있게 돼요 :D

덧붙이자면, 바로 이런 문제가 자바스크립의 치명적인 문제가 아닐까 싶어요.
이 문제를 해결하려면 티스토리 정도로 범용적인 서비스의 경우 반드시 서비스에서 공통적으로 사용하는 스크립트 코드들을 클래스화 하여 네임스페이스 때문에 생기는 문제가 없도록 해야 할 거에요.

그리고 UNIQLOCK처럼 어디에나 붙여서 쓸 수 있도록 하는 스크립트도 마찬가지로 클래스화 하여 다른 서비스에 영향을 주지 않도록 해야겠죠.

자바스크립트로 클래스를 만들어 쓰는 것은 자바 스크립트를 상당히 잘 하시는 분들도 그 필요성을 잘 이해를 못하는 경우가 많은 것 같아요. 그리고 충분히 알고 있다고 해도 잘 설계되지 않은 자바스크립트 클래스는 그렇지 않은 일반 함수보다 훨씬 디버깅하기 어렵다는 문제도 있죠.

VS 2008에서는 자바스크립트 클래스에 대한 인텔리센스나 디버깅을 지원한다는데 과연 어느 수준으로 될지는 모르겠지만 이런저런 문제로 저는 자바스크립트를 기피하는 편이에요 :(
신고
Posted by gongdo


티스토리 툴바