[JavaScript] DOMContentLoaded 이벤트가 작동하지 않을 때

회사에서 오랜만에 바닐라 자바스크립트 코딩을 할 일이 있었는데 페이지 로딩 후 작동해야 하는 코드라 DOMContentLoaded 이벤트를 사용했다. 그런데 가끔 해당 코드가 작동하지 않는 것이다.

많은 실험 끝에 작동하지 않는 조건을 찾았다. 두 번째 로딩부터는 괜찮은데 로컬 스토리지를 비운 뒤 첫 번째 로딩에서만 작동하지 않았다. (쿠키는 상관없었고 로컬 스토리지만 그랬다) 이런 황당한 증상 때문에 해결하려고 한참을 찾았는데 원인은 다른 곳에 있었다.

먼저 해결 코드를 보자

const domReady = (callback) => {
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', callback);
  } else {
    callback();
  }
}

DOMContentLoaded 이벤트는 dom 로딩이 끝났을 때 발생한다. 따라서 dom 로딩이 끝난 이후에 리스너를 등록하면 코드가 실행되지 않게 된다. 따라서 리스너 등록 시점에 이미 dom 로딩이 끝난 상황이면 콜백을 바로 실행하고 아니면 리스너를 등록하도록 해서 해결했다.

출처: https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

역시 답은 MDN에 있다…

근데 대체 로컬 스토리지 비운 거랑은 무슨 인과관계가 있는 거지?!?! 이거 때문에 원인을 잘못 알아서 삽질했는데!