기본적인 HTML 문서가 있고, 여기에 외부 JavaScript 파일을 포함(임포트)하고 싶다고 가정해 보겠습니다.
HTML에서 <script> 요소 사용하기
외부 JavaScript 파일을 HTML 문서에 연결하려면 HTML의 <script> 요소를 사용해야 합니다. 아래 예시처럼 src 속성에 파일 경로를 지정하면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>페이지 제목</title>
<script src="main.js" defer></script>
</head>
<body>
<h1>HTML 파일에 JavaScript 파일 포함하기</h1>
</body>
</html>defer 속성이란?
위 코드에서 <script> 요소에 추가된 defer 속성에 주목해 보세요. defer는 main.js 파일 내부의 코드가 웹 페이지의 모든 콘텐츠 요소(텍스트, 이미지, 링크 등)의 로딩이 완료된 이후에 실행된다는 의미입니다.
즉, 스크립트가 HTML 구조를 완전히 인식한 상태에서 실행되기 때문에 DOM 조작 시 오류가 발생할 가능성이 줄어듭니다.
defer 속성을 사용하지 않아야 하는 경우
반대로, 어떤 이유로든 웹 페이지 콘텐츠가 로드되기 전에 JavaScript 파일을 먼저 실행해야 한다면 defer 속성을 사용하지 않으면 됩니다. 다만 이 경우 스크립트가 아직 생성되지 않은 DOM 요소에 접근하면 오류가 발생할 수 있으므로 주의해야 합니다.
참고 사항
defer 속성은 외부 JavaScript 파일을 포함할 때만 작동합니다. HTML 문서 안에 직접 작성한 인라인(inline) JavaScript 코드에는 적용되지 않습니다.
또한 비슷한 역할을 하는 async 속성도 있습니다. async는 스크립트를 다운로드하는 동안 페이지 로딩을 멈추지 않지만, 다운로드가 완료되는 즉시 실행되므로 실행 순서가 보장되지 않습니다. 반면 defer는 문서 로딩이 끝난 후 순서대로 실행되므로, DOM을 다루는 대부분의 경우 defer가 더 안전한 선택입니다.