🚀 모듈 분리하면 DOMContentLoaded 작동 안되는 현상 해결

DOMContentLoaded 이벤트 외부 로드

html문서에 인라인으로 DomcontentLoaded 이벤트를 걸어놓으면 잘 작동한다. 하지만 자바스크립트 부분을 외부 모듈로 빼내면 이상하게 제대로 작동이 안되는 현상을 경험할 수 있을 것이다.

이럴땐 따로 document의 readyState를 검사해서 콜백을 실행해주는 식의 처리를 외부 모듈 자바스크립트에서 적용해 주어야 한다.

// 기존의 인라인 DOMContentLoaded 이벤트 리스너 코드
window.addEventListener('DOMContentLoaded' function () {
 // 코드내용
})

var DOMReady = function(callback) { 
  document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback);
};

//정의된 헬프 함수를 이용한 코드
DOMReady(function () {	
  // 코드내용
})