js import방법 및 모듈과 라이브러리
2023. 2. 5. 20:38ㆍjavaScript
단순 / async / defer 로드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제대로 파는 자바스크립트</title>
<script src="./script.js"></script> // 단순로드
<script async src="./script.js"></script> //async
<script defer src="./script.js"></script> //defer
</head>
<body>
<span>변경 전...</span>
</body>
</html>
단순/async 방식은 html 이 로드 되기 전 실행 될 수도 있기에 에러가 날 수 있다.
defer방식 사용할 것
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제대로 파는 자바스크립트</title>
<!-- 💡 모듈로서 로드 -->
<script type="module" src="./main.js"></script>
</head>
<body>
<script>
console.log('모듈은 defer 방식으로 로드됩니다.');
</script>
</body>
</html>
- 모듈로서 로드할 파일에는 type="module" 속성을 넣어줌
- ⭐ 모듈은 자동으로 defer로 로드됨
- ⭐ 실행코드가 들어있는 파일만 로드하면 됨
'javaScript' 카테고리의 다른 글
| 일급 객체의 특성 (0) | 2023.02.05 |
|---|---|
| JS Class와 Function 차이 (클레스와 함수 차이) (0) | 2023.02.05 |
| 생성자 함수 (feat.얄코) (0) | 2023.02.05 |
| appendChild is not a function 오류 (0) | 2023.02.02 |
| document.getElementById() 와 $() 의 차이 (0) | 2023.02.02 |