간단한 명령에는 jQuery 종속에서 벗어나자

  jQuery는 마성의 툴입니다. 요즘은 아예 Javascript를 안배우고 jQuery만 배워도 될 것 같은 정도입니다. 대부분의 웹개발에서는 jQuery를 사용하고 있으니까 말이지요. 그 생산성도 순수 Javascript로만 짰을 때와 비교도 할 수 없을 정도입니다.

  그렇지만 누구든지 jQuery를 사용하지 못하는 환경에 마주칠 수 있다는 것은 부정할 수 없는 사실입니다. jQuery라는 프레임워크가 없어지는 순간 무기력해지는 자신을 보면서 말이죠. 특히 원하고자 하는 요소를 선택조차 하지 못합니다. jQuery 없이는요.. 그만큼 jQuery의 Selector가 강력하다는 반증입니다.

  사실 웬만한 작업에는 jQuery가 필요없습니다. 그렇다면 Javascript에서 어떻게 요소를 선택하여 작업을 하느냐? 이를테면 다음과 같은 식입니다.

onclick="this.parentNode.getElementsByClassName('list-inline')[0].style.display='block';this.parentNode.removeChild(this);" 
	

  이 코드는 어떤 태그의 onclick부분입니다. javascript가 실행되고 있죠. 추측하건데 jQuery가 로딩되기 전의 부분이라서 어쩔 수 없이 사용하였을 가능성이 높습니다. (아니면 아예 jQuery를 안쓰는 페이지이던가) 이 부분은 두개의 문장으로 되어 있는데 첫번째 부분은 jQuery를 사용한다면 다음처럼 간단하게 선택할 수 있을 것입니다.

	
$('.list-inline')[0] 
	

  jQuery는 아예 영역을 한정짓고 들어가지 않아도 되지요. 그냥 덮어놓고 $()로 시작해버리면 알아서 찾아줍니다. 하지만 이에 따른 단점 역시 명확합니다. 무조건 문서 전체를 찾게 되기 때문에 선택자를 남용하면 페이지 로딩속도가 떨어지는 것은 불을 보듯 뻔하다는 것이죠. 그래서 오히려 불편하더라도 페이지로드를 생각한다면 selector라도 그냥 JS로 해주는 것이 좋지 않겠냐는 생각이 요즘 드는 생각입니다.

Selector

 jQuery Selector를 사용하지 않을 경우에는 다음 세가지 명령어가 매우 주요합니다.

	
document.getElementById('id')
document.getElementsByTagName('tag')
document.getElementsByClassName('class') 
	

  순수 JS Selector의 3대장이라고 해도 과언이 아닙니다. 이것은 정말 이 부분을 칠때라도 타자속도가 1000이 나올 정도로 연습을 하는 것이 좋을 것 같습니다. 주의점은 Id는 유일하기 때문에 그냥 getElement고 나머지는 getElements라는 점이죠. 따라서 아래 두개는 Selector로 걸러낸 값이 비록 하나일지라도 끝에 배열로 취급한다는 의미로 [0]을 붙여줘야만 합니다. 초보적인 실수인데 처음에 jQuery를 익히고 JS를 배우게 되면 하는 무조건적인 실수인 것 같네요.

Remove

 jQuery에서는 스스로를 지우는 구문이 매우 간단합니다. 다음처럼 하면 되지요.

	
$(this).remove(); 
	

  아쉽게도 순수 JS에서는 이렇게 쉽게 자기 자신을 선택할 수가 없습니다. 그래서 아래처럼 2단계로 거쳐가야합니다.

	
this.parentNode.removeChild(this); 
	

 이것 역시 JS를 사용한다면 자주 나오는 트릭인 것 같아 첨부합니다. 자신의 부모를 찾은 다음에 자기 자신을 다시 찾아내려가는 것이죠.