[JS]Document.ready 의 대안

jQuery를 사용할 때, DOM이 로드된 후 처리를 위해 아래와 같은 구문을 많이 사용해왔습니다.

$(function(){
    
});

// or

$(document).ready(function(){
    
});

이와 같은 동작을 jQuery 없이 사용 할 수 없을까 찾아 보았는데,

document.addEventListener('DOMContentLoaded', () => {

})

위와 같이 작성하면 됩니다.

DOMContentLoaded는 최초로 HTML 문서가 완전히 로드 및 파싱 되었을때 발생되므로, 모든 리소스(이미지, 스크립트, 스타일 시트 등)가 로드 된 후 발생하는 load 이벤트 보다는 먼저 호출됩니다.

그렇다면 왜 DOMContentLoaded 이벤트 리스너 대신 $(document).ready()를 사용했을까 알아 보았는데,

CAN-I-USE-DOMContentLoaded를 확인하였더니, IE8까지는 지원을 하지 않았습니다. 물론 jQuery가 아닌 대안들도 있었겠지만, 브라우저 호환성을 위해 jQuery를 써오던 입장에서는 간단하게 사용할 수 있던 방안이었으리라고 봅니다.

참고자료

• MDN-DOMContentLoaded
• CAN-I-USE-DOMContentLoaded