inline script, 내부 script, 외부 .js 파일의 연결 방식을 구분합니다.
작은 예제는 script 안에 직접 작성할 수 있지만 실제 프로젝트에서는 src로 외부 파일을 연결합니다. defer는 HTML 파싱과 병렬로 파일을 받고 문서가 준비된 뒤 순서대로 실행합니다.
코드를 읽을 때는 <script src="app.js" defer></script> 부분부터 찾으세요. 현재 값과 실행 순서를 줄마다 적어 보면 문법을 외우지 않아도 결과를 예측할 수 있습니다.
실행하기 전에 예상 결과를 짧게 적은 뒤 script에 type=module을 사용할 때 자동으로 지연 실행되는 점을 확인하세요. 실제 출력이 다르면 콘솔에 처음 나타난 오류와 그 직전 값을 차례로 확인하세요.
script를 head에서 defer 없이 실행하면 아직 만들어지지 않은 HTML 요소를 찾을 수 있습니다.
직접 바꿔보세요script에 type=module을 사용할 때 자동으로 지연 실행되는 점을 확인하세요.