모듈 스크립트의 특징
1️⃣ 자체적인 모듈 스코프
<script type="module"> 을 사용하면 해당 스크립트 파일은 자체적인 모듈 스코프를 갖게 됩니다.
이는 스크립트가 외부 변수나 함수를 오엽시키지 않고 독립적으로 실행될 수 있도록 보장합니다.
따라서 모듈 스크립트에서는 전역 스코프에 바로 접근할 수 없고, 다른 스크립트와의 상호작용을 위해서는 import 와 export 키워드를 사용합니다.
<script> 태그를 사용하여 스크립트를 로딩할 경우에는 해당 스크립트가 전역 스코프에 바로 포함됩니다.
이는 스크립트 파일이 로딩된 후에는 해당 스크립트 안의 함수나 변수에 접근하여 이벤트 핸들러를 설정할 수 있음을 의미합니다.
<script type="module"> 을 사용할 때 이벤트 핸들러 사용법
Javascript 파일에서 이벤트를 처리하거나, Javascript 내에서 HTML 요소를 선택하여 이벤트 핸들러를 추가하는 방법을 고려할 수 있습니다.
▶️ JQuery 활용
<script>
function openclose() {
$('#box').toggle();
}
</script>
<body>
<button type="button" class="btn btn-outline-light" onclick="openclose()">영화 기록하기</button>
</body><script type="module">
$('#savebtn').click(async function () {
$('#box').toggle();
});
</script>
<body>
<button type="button" class="btn btn-outline-light" id="savebtn">영화 기록하기</button>
</body>onclick="openclose()"을 사용할 수 없기 때문에 태그의 id와 JQuery를 활용하여 이벤트 핸들러를 설정할 수 있습니다.
2️⃣ 자체적인 실행 시점
모듈 스크립트를 사용하는 경우, Javascript의 모듈 시스템은 스크립트가 자체적인 모듈 스코프를 갖기 때문에 문서의 로딩 순서에 따라 코드 실행이 보장됩니다. 이는 모듈 스크립트가 페이지의 다른 요소들과 비동기적으로 로드되어도 스크립트의 실행이 보장된다는 것을 의미합니다.
모듈 스크립트는 기본적으로 비동기적으로 로드되며, 스크립트가 다운로드되는 동안에도 페이지의 다른 요소들이 로드되고 처리됩니다. 그러나 모듈 스크립트 내부의 코드는 모든 의존성이 해결되고 모듈이 파싱되어 스크립트가 실행될 준비가 되었을 때 실행됩니다. 즉, 모듈 스크립트가 문서의 다른 요소들과 상호작용하기 전에 실행될 것을 보장합니다.
$(document).ready() ❌
$(document).ready(function () {
alert('<script> 일 때');
});일반적인 스크립트일 때에는 일반적으로 문서가 로드된 후에 Javascript 코드를 실행해야할 때 $(document).ready() 를 사용했습니다.
alert('<script> 일 때');모듈 스크립트를 사용할 경우에는 위의 코드만으로도 스크립트가 실행될 준비가 되었을 때 실행됩니다.
