DOMContentLoaded는 언제 필요할까

DOMContentLoaded는 언제 필요할까에서 먼저 볼 부분

DOMContentLoaded는 HTML 문서 구조가 준비된 뒤 JavaScript를 실행하게 해주는 이벤트입니다. 스크립트 위치와 실행 시점을 이해하면 DOM 선택 오류를 줄일 수 있습니다.

JavaScript는 위에서 아래로 실행됩니다. script가 HTML 요소보다 먼저 실행되면 아직 만들어지지 않은 버튼이나 입력창을 찾으려고 하다가 null을 받게 됩니다.

DOMContentLoaded는 이미지나 외부 리소스가 모두 끝나기 전이라도 HTML 문서 구조가 준비되면 실행됩니다. DOM 요소를 선택하고 이벤트를 붙이는 초기화 코드에 잘 맞습니다.

script 태그를 body 끝에 두는 방식도 같은 문제를 줄여줍니다. HTML 요소가 먼저 만들어진 뒤 스크립트가 실행되기 때문에 간단한 페이지에서는 이 방식만으로 충분할 때도 많습니다.

실무에서는 defer 속성과 함께 쓰는 경우도 있습니다. 중요한 기준은 코드가 실행되는 순간에 선택하려는 요소가 이미 문서 안에 존재하는지 확인하는 것입니다.

DOM이 준비된 뒤 버튼 찾기

document.addEventListener("DOMContentLoaded", () => {
  const button = document.querySelector("#saveButton");

  button.addEventListener("click", () => {
    console.log("저장 버튼 클릭");
  });
});

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

JavaScript 글은 값이 언제 만들어지고 함수가 언제 실행되는지를 순서대로 따라가면 이해가 쉬워집니다.

console.log는 단순 확인용이 아니라 현재 값의 모양과 실행 흐름을 확인하는 가장 기본적인 디버깅 도구입니다.

DOM을 다루는 코드는 HTML 요소가 먼저 준비되었는지 확인해야 하며, 선택 결과가 null인지 보는 습관이 중요합니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• querySelector 결과가 null인지 먼저 확인하기
• script가 HTML 요소보다 먼저 실행되는지 보기
• 초기화 코드는 DOMContentLoaded 안에 넣기
• script defer를 사용할 수 있는 구조인지 확인하기