[FE] type='module'과 defer

script 태그

<script> 태그에 사용되는 type='module'과 defer는 Javascript를 로드하고 실행하는 방식을 지정하는 속성이다. 각 속성의 기능과 특징은 다음과 같다.

type='module'

• 이 속성을 사용하면 ECMAScript 모듈로서 로드하게 된다.
• import와 export 문을 사용할 수 있다.
• 모듈 스크립트는 항상 defer된 것처럼 동작하므로, 문서 파싱이 완료된 후에만 실행된다.
• 모듈 스크립트는 기본적으로 CORS 체크를 수행하므로, 다른 출처에서 가져온 모듈을 로드하려면 해당 서버가 적절한 CORS 헤더를 제공해야 한다.
• 인라인과 외부 모듈 스크립트 모두에 type='module'을 사용할 수 있다.
• 모듈은 항상 strict mode에서 실행된다.

defer

• defer 속성이 있는 스크립트는 HTML 문서의 파싱이 완전히 완료된 후에만 실행된다.
• defer 속성은 외부 스크립트에만 적용될 수 있다.(src 속성이 있는 스크립트)
• 문서의 파싱이 완료되고, DOMContentLoaded 이벤트 직전에 스크립트가 실행된다.
• 여러 개의 defer 스크립트가 있다면, 스크립트는 페이지 내에서의 순서대로 실행된다.

흔히, defer 속성은 페이지 로딩 속성을 향상시키기 위해 외부 스크립트를 로드할 때 사용된다. 스크립트가 문서 파싱 중에 실행되는 것을 방지하고, 파싱이 완료된 후에 실행될 수 있도록 한다.