From jQuery to VanillaJS

사실 나는 jQuery를 버리고 VanillaJS를 써야한다는 움직임이 이미

시작되고 난 후에 자바스크립트를 접했기 때문에, jQuery를 즐겨 쓰지도 않았고 관련 메소드들도 많이 모른다.

 

그래서 jQuery를 VanillaJS로 바꾸기 위한 교정 과정이 따로 필요하진 않았지만,

관련된 글을 읽어보면서 내가 잘 몰랐던 것들에 관해 많이 배울 수 있었기에

새로 배운 내용들을 간단하게 정리해보려 한다.

---

// jQuery
$(document).ready(function() {
  // code
});

// Vanilla
document.addEventListener('DOMContentLoaded', function() {
  // code
});

 

나는 보통 '페이지를 불러오고 난 후'의 코드를 작성하고 싶을 때 window.onload를 사용하곤 했다.

근데, window.onload의 단점은 바로 페이지 전체의 외부 리소스들을 온전히 다 불러올 때까지 기다려야 한다는 것이다.

만약 오류가 생겨 이미지같은 것들을 불러오는 데에 딜레이가 생기면, 그 시간동안 코드를 실행하지 않게 된다.

 

이러한 문제를 해결하기 위해 jQuery에서 제공한 메소드가 바로 ready 메소드이다.

ready 메소드는 외부 리소스나 이미지와는 상관없이 DOM 요소들만 모두 불러오고나면 바로 실행이 되는 함수이다.

그래서 window.onload 보다 더 빨리 실행이 되고, window.onload 에서 발생하는 몇몇 오류들도 해결이 된다.

 

그래서 이러한 경우에는 바닐라 자바스크립트 대신 jQuery를 사용해야 하는 줄 알았는데, 

동일한 상황에서 사용 가능한 VanillaJS 이벤트가 있었다. 바로 'DOMContentLoaded'라는 이벤트.

DOMContentLoaded는 DOM 요소들, 즉 HTML 문서를 완전히 불러오고 분석한 후에 바로 발생한다.

CSS, 이미지 등의 로딩은 기다리지 않기 때문에 window.onload보다 빠른 실행이 가능한 것.

 

물론 window.onload와 DOMContentLoaded 이벤트는 경우에 따라 다르게 사용되겠지만,

굳이 jQuery의 ready 메소드를 사용하지 않아도 DOMContentLoaded로 충분히 대체된다는 사실이 중요하다.

---

// jQuery
$('a').click(function() {
  // code…
});

// Vanilla
[].forEach.call(document.querySelectorAll('a'), function(el) {
  el.addEventListener('click', function() {
    // code…
  });
});

사실 forEach같은 경우는 최근에 NodeList에도 추가되었기 때문에 굳이 이렇게 써줄 필요가 없어졌다.

하지만 배열의 메소드를 이런 식으로 call을 통해 NodeList에 사용할 수 있다는 게 신기해서 가져왔다.

맨 앞의 빈 배열은 배열 메소드를 사용하기 위한 디딤돌인 듯 한데,

자주 사용되는 방법인지는 모르겠지만 개인적으로는 처음 봐서.

---

// jQuery
$('body').append($('<p/>'));

// Vanilla
document.body.appendChild(document.createElement('p'));

// jQuery
var clonedElement = $('#about').clone();

// Vanilla
var clonedElement = document.getElementById('about').cloneNode(true);

cloneNode 메소드가 약간 낯설어서, 개인적으로 좀 머리에 새기려는 목적으로 가져왔다.

 

node.cloneNode(boolean)의 형태인데,

앞의 node는 복제하고자 하는 대상 노드이고, boolean에는 자식 노드까지 전부 복사할 지 여부가 들어간다.

대상 노드의 자식들까지 전부 복사하려면(deep clone) true를 넣어주면 되고

딱 대상 노드 자체만 복사하려면 false를 넣어주면 된다.

---

// jQuery
$('#wrap').empty();

// Vanilla
var wrap = document.getElementById('wrap');
while(wrap.firstChild) wrap.removeChild(wrap.firstChild);

 

대상 노드의 자식들을 전부 삭제하는 메소드인듯 하다.

만약 대상의 자식이 존재하지 않을 경우 undefined 예외가 발생할 수 있기 때문에

while(wrap.firstChild)로 자식이 하나 이상 존재하는지를 확인한 후에

자식이 하나도 남아있지 않을 때까지 계속해서 첫 번째 자식노드를 removeChild를 해준다.

---

// jQuery
var parent = $('#about').parent();

// Vanilla
var parent = document.getElementById('about').parentNode;

// jQuery
if($('#wrap').is(':empty'));

// Vanilla
if(!document.getElementById('wrap').hasChildNodes());

hasChildNodes()라는 메소드의 존재 여부를 처음 알았다.

자식 노드가 존재하는지 여부를 확인하는 메소드인 듯.

// jQuery
var nextElement = $('#wrap').next();

// Vanilla
var nextElement = document.getElementById('wrap').nextSibling;

nextSibling은 동일한 부모 아래에 있는 다음 형제 노드를 의미한다.

여기서는 'wrap'의 부모 노드의 자식 노드들 가운데에 wrap 다음에 있는 노드를 불러온다.

만약 'wrap'이 wrap의 부모 노드의 자식 노드들 목록 중에 마지막 노드에 해당한다면 null을 반환한다.

---

추가로, Gecko 기반 브라우저(대표적으로 파이어폭스)에서는 소스 마크업 단계에서 공백을 나타내기 위해

공백 텍스트 노드를 문서에 삽입한다고 한다.

 

그래서 Node.firstChild나 Node.previousSibling 같은 속성을 사용해서 얻은 노드가

의도와는 다른 공백 텍스트 노드가 될 수 있으니 주의해야 한다.

 

 

참고

Vanilla JS vs jQuery

문서의 로드시점 - onload, DOMContentLoaded

onload 와 ready 차이점

NodeList.prototype.forEach() - Web API | MDN

Node.cloneNode() - Web API | MDN

Node.nextSibling - Web API | MDN