23/10/24 TIL __ script type = "module" / defer

 

 

 

 

🚌  <script defer >

 

• head 태그 안에 script 태그를 넣으면 body부분 보다 js파일이 먼저 실행되기 때문에 , 오류가 날 확률 높다.
• 이 defer 라는 애를 넣어주면, 지연실행이 되어 문제 없이 코드가 작동한다. 
• html파일 파싱을 하다가 head에 defer가 걸린 script 태그를 만나면, 일단 script를 다운로드 하면서 html 파일을 읽어 나간다. 
• 미리 script를 다운받았기 때문에 시간 단축 할 수 있다. 
• 파싱이 끝나고, js 파일에게 제어권을 넘겨주고, 다음 다운받을 필요 없이 바로 js파일이 실행된다. 
• src 속성이 명시된 경우에만 사용할 수 있다.

 

 

아래 이미지를 참고하면 이해가 빠를 것 같다. 

_출처 : 내일배움캠프

 

 

 

 

🚌  <script  type = "module">

 

• defer 의 기능을 내포하고 있다. 
• js 파일마다 각기 다른 스코프. 즉 독립적인 스코프를 가진다. module 모드가 아니라면 같은 스코프를 공유한다. 
• import, export를 사용하기 위해 꼭 명시해 줘야 한다. 
• "use strict" 를 이용해 엄격모드를 실행해 주는 기능을 내포하고 있다.