DOM에 dependent하게 프로그램 하지 말자

프론트앤드에서 자바스크립트를 사용하다 보면 DOM에 접근해 사용하는 경우가 많다. 문서 객체 모델은 직관적이고 편리하지만 무분별하게 접근해서 사용하다 보면 나중에 유지보수에 문제가 생긴다. 가령 다음과 같은 코드를 보자. (JQuery가 사용되었다)

if ($('#fileName').parents('div').prev().val() == '') {
	
    ...
    
    return false;
}

fileName 이라는 id를 가진 노드를 찾아서 상위에 있는 div 태그 노드의 바로 이전 노드의 value 값이 비어있는지를 판단하고 있다. 그냥 눈으로 보기만 해도 복잡하다.

 

만약 fileName 이라는 id를 가진 노드와 상위 div 노드 사이에 다른 div 태그가 삽입되거나, 상위 div 태그와 그 이전 태그 사이에 다른 태그가 삽입되게 된다면 이 조건식은 완전히 다른 결과를 나타내게 된다.

 

그래서 DOM에 의존적으로 코드를 만들면 안된다는 것이다. name 속성을 추가하거나, id, class 값을 이용하는 것이 옳다. 위 코드의 조건식에 $('#fileName').parents('div').prev() 해당하는 노드에 id 값이나 name 속성등을 추가해 찾는 코드로 바꾸면 다음과 같다.

if ($('#fileValue').val() == '') {

	...
    
    return false;
}

id 값을 설정하는 것이 항상 정답은 아니겠지만 훨씬 알기 쉽고 수정하기 용이한 코드가 되었다.