가끔씩 그럴 때가 있습니다. 전혀 에러가 날 상황이 아닌데 빨간 줄이 뜨고, 이 부분은 가볍게 넘어가고 저어기 어려운 부분이나 볼까~ 하면 빌드가 안되고. 그러고나면 막상 코드를 훑어봐도 어디가 문젠지 쉽게 찾을 수 없죠. 아, 이 에러가 그런거였단 뜻은 아닙니다. 처음 보는 에러였고 좋은걸 배웠습니다. 하하.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script src="index.js"></script>
</head>위와 같은 형태로 작업을 하고 있었습니다. 이 때 HTML을 파싱하다가 <script>단을 다운로드, 실행 후 나머지 HTML을 파싱하게 된다고 합니다. 문제는 <body>태그를 파싱하기도 전에 스크립트를 실행하면서 제목과 같은 오류가 날 수 있다고 합니다. HTML에 지정된 객체가 생성되기 전에 스크립트가 해당 객체에 접근하려고 한다거나 하는 문제가 발생하는거죠.
<해결>
해결방법은 몇가지를 찾았지만 그 중 쉬운 2가지를 기록해봅니다.
1. body 태그, 해당 객체의 밑에 script가 위치하도록 한다.
2. script 위치는 바꾸지 않되 태그의 속성에 defer를 붙인다.
1번은 그렇다 치고 2번은
<script defer src="index.js"></script>가 됩니다. 이 때는 HTML을 파싱하다가 script 태그의 defer 속성을 발견 시 script다운과 html 파싱을 동시에 진행한다고 합니다. html 파싱 완료 후 script를 실행하는거죠.
<어? 그럼 모든 script에 defer를 붙이면 좋은거 아닌가?>
라는 생각이 얼핏 들어서 찾아봤는데 오히려 defer 속성을 붙일 경우 스크립트의 일부가 로드가 안되거나 하는 경우도 발생한다고 합니다. 역시 마냥 쉽게 가는 법은 없네요.
선생님..개발이 하고싶어요