TypeError: Cannot read property 'addEventListener' of null defer로 해결!

🙀 에러 발생

TypeError: Cannot read property 'addEventListener' of null

HTML이 모두 로드되기전에 자바스크립트 영역에서 HTML을 참조하는데 addEventListener에서 HTML태그를 참조하지 못해서 계속 에러가 발생했다.

보통 body 태그가 끝나기 바로 위에 부분에 script의 위치를 옮겨서 사용하는 방법을 많이들 사용하는데

나는head부분에 script파일을 넣어서 사용하기 위해서 head부분에 script 태그를 추가하고 사용했다.
그런데 한 가지옵션을 깜빡했더니 오류가 발생했다 😹

defer 옵션으로 에러 해결

브라우저는 HTML을 읽다가 <script></script> 태그를 만나면 스크립트를 먼저 실행하기 때문에 DOM 생성을 멈추게 된다.
그런데 DOM을 읽기도 전에 DOM 요소의 이벤트 핸들러를 찾으려하니 찾을 수가 없어서 오류가 발생하게 된다.

그래서 <script></script>에 defer옵션을 추가해서 HTML 페이지가 생성되는 것을 막지 않고, DOM이 준비된 다음에 실행되도록 옵션을 추가해주었다!

window.addEventListener("load")등록

defer를 쓰지않을거면 window.addEventListener("load")를 등록하는 방법도 있다!