HTML에서 속성(attribute)은 일반적으로 속성 이름과 속성 값으로 구성됩니다. 앵커(<a>) 요소의 href 속성처럼 말이죠.
하지만 간혹 값, 즉 동작 방식이 속성 이름 자체에 내장되어 있는 특수한 경우도 있습니다.
대표적인 예가 바로 HTML <script> 요소를 제어할 때 사용하는 defer 속성입니다:
<script defer src="app.js"></script>주목할 점은 defer 속성에는 할당 연산자(=)나 값이 없다는 것입니다. 그 이유는 동작이 이미 속성 이름 안에 내장되어 있기 때문입니다.
defer는 소위 불리언(boolean) 속성이라고 부릅니다. 불리언은 참(true) 또는 거짓(false), 즉 '활성화/비활성화' 두 가지 값만 가질 수 있는 데이터 유형을 의미합니다.
defer 속성이 필요한 이유
먼저 기본 동작부터 살펴보겠습니다. 다음과 같이 defer 속성이 없는 <script> 요소는 브라우저가 파일을 불러오는 즉시 src에 지정된 app.js의 자바스크립트 코드를 실행합니다:
<script src="app.js"></script>기본적으로 HTML 문서는 위에서 아래로, 한 줄씩 순서대로 파싱(읽기)됩니다. 따라서 문서 상단에 자바스크립트를 배치하면 나머지 문서가 파싱되기 전에 해당 스크립트가 먼저 실행됩니다.
이것이 script 요소의 기본(default) 동작입니다.
하지만 <script> 요소에 defer를 추가하면 이 기본 동작이 비활성화됩니다:
<script defer src="app.js"></script>이제 자바스크립트 코드는 페이지 전체가 완전히 로딩된 후에야 실행됩니다.
말 그대로 defer는 '미루다', '연기하다', '기다리다'라는 뜻입니다.
핵심 정리
- defer 없음: 자바스크립트가 로딩되는 즉시 실행됩니다.
- defer 있음: 자바스크립트가 전체 HTML 페이지가 로딩될 때까지 기다렸다가 실행됩니다.
참고: async 속성과의 차이
비슷한 목적으로 사용되는 async 속성도 있습니다. async 역시 스크립트를 비동기적으로 불러오지만, 다운로드가 완료되는 즉시 실행된다는 점이 다릅니다. 반면 defer는 DOM 구조가 완성된 후 순서대로 실행되므로, DOM 조작이 중요한 스크립트라면 defer가 더 안전한 선택입니다.
속성 개념이 아직 헷갈린다면 너무 걱정하지 마세요. 실제 프로젝트에서 직접 사용해 보면 훨씬 쉽게 이해할 수 있습니다.