defer

JavaScript를 HTML에 링크하는 방법에는 여러 가지가 있지만, 가장 효율적인 방법이 있다고 알고 있었다.

자세한 차이는 한 번 읽고 넘어갔지만, ‘어떻게 써야 하는지’ 정도만 머릿속에 남아 있었다.
HTML을 처음부터 작성할 때는 문제가 없었지만, 이미 작성된 기본 코드 위에 구현하는 상황에서 defer 옵션이 없어서 발생한 문제를 마주하니, 이것이 defer 때문인지 생각해내지 못하고 헤맸다. 그래서 기록으로 남긴다.

(참고: 콘솔 중간의 객체는 스크린샷 찍을 때 코드에서 지워서, 위아래 null 값이 첫번째 사진의 결과)

querySelector로 요소를 찾았을 때 결과가 null 값으로 나왔다.
이는 head 태그 아래에 아무 옵션 없이 script 태그가 추가되어 있었기 때문이다.
결과적으로, HTML 파싱이 끝나기 전에 JS 파일이 실행된 상황이었다.

---

정리 :
크게 세 가지 방법

마지막에 소개할 defer 옵션을 추천한다.

---

body 하단

<!--- body 태그 하단 --->
<script type="module" src="main.js"></script> 

• 동작 흐름:
  HTML 파싱 → JS 파일 로드 → JS 파일 실행

• 단점:
  JS 파일 로드 시간이 길어질 경우 HTML 화면 출력이 지연될 수 있다.

---

async (head 태그 내)

<!--- head 태그 안에 --->
<script type="module" src="main.js" async></script> 

• 동작 흐름:
  HTML을 파싱하면서 JS 파일 로드 → JS 파일 로드 완료 후 실행

• 장점:
  다운로드 시간을 절약할 수 있다.

• 단점:
  HTML 파싱이 끝나기 전에 JS가 실행될 가능성이 있어, 실행 순서가 엉킬 수 있다.

---

defer (head 태그 내)

<!--- head 태그 안에 --->
<script type="module" src="main.js" defer></script> 

• 동작 흐름:
  HTML을 파싱하면서 JS 파일 로드 → HTML 파싱 완료 후 JS 실행

• 장점:
  JS 실행 시점을 HTML 파싱 완료 이후로 보장해 주기 때문에 안정적이다.

---

이렇게 defer 옵션을 활용하면, HTML과 JS 간의 실행 순서를 깔끔하게 정리할 수 있다.
앞으로 이런 상황에서 헷갈리지 않도록 기록해 둔다!