script-vs-script-module

👉 일반 <script> vs <script type="module"> 를 바로 체감되게 비교합니다.

✅ 1. 가장 간단한 차이 (한 줄 비교)

<!-- 일반 -->
<script>
  console.log('hello');
</script>

<!-- 모듈 -->
<script type="module">
  console.log('hello');
</script>

👉 출력은 같지만 동작 방식은 완전히 다름

✅ 2. 전역 변수 차이 (가장 중요)

🔹 일반 <script>

<script>
  var msg = 'hello';
</script>

<script>
  console.log(window.msg); // ✅ hello
</script>

🔹 <script type="module">

<script type="module">
  var msg = 'hello';
</script>

<script>
  console.log(window.msg); // ❌ undefined
</script>

📌 module은 파일 단위 스코프

✅ 3. 라이브러리 사용 방식 차이

🔹 일반 <script> (UMD)

<script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
<script>
  console.log(_.chunk([1,2,3,4], 2)); // ✅
</script>

• _ 는 전역(window)

🔹 type="module" (ESM)

<script type="module">
  import _ from 'https://cdn.jsdelivr.net/npm/lodash-es/lodash.js';
  console.log(_.chunk([1,2,3,4], 2)); // ✅
</script>

• 전역 오염 ❌
• 필요한 것만 import ✅

✅ 4. import 사용 가능 여부

<!-- ❌ 일반 script -->
<script>
  import { sum } from './util.js'; // 에러
</script>

<!-- ✅ module -->
<script type="module">
  import { sum } from './util.js';
  console.log(sum(1,2));
</script>

✅ 5. DOM 로딩 차이

🔹 일반 <script> (조심)

<script>
  document.getElementById('box').textContent = 'hi'; // ❌ null
</script>

👉 DOM이 아직 없음

🔹 module (자동 defer)

<script type="module">
  document.getElementById('box').textContent = 'hi'; // ✅
</script>

👉 DOM 로드 후 실행됨

✅ 6. 파일 분리 예제

❌ 일반 script (불가능)

<script src="./a.js"></script>
<script src="./b.js"></script>

// a.js
var x = 1;

// b.js
var x = 2; // 충돌 😨

✅ module (정석)

<script type="module" src="./main.js"></script>

// util.js
export function sum(a, b) {
  return a + b;
}

// main.js
import { sum } from './util.js';
console.log(sum(1,2));

✅ 7. file:// 실행 차이

📌 module은 반드시 http/https

✅ 8. Supabase 초간단 비교

🔹 일반 <script>

<script src="supabase.min.js"></script>
<script>
  const supabase = supabase.createClient(url, key);
</script>

🔹 type="module"

<script type="module">
  import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
  const supabase = createClient(url, key);
</script>

✅ 9. 한 눈에 정리표

✅ 10. 한 줄 요약 🧠

작고 단순하면 <script>
조금이라도 구조가 생기면 type="module"

이 비교만 이해하면, 지금 쓰신 두 코드의 차이는 완전히 끝입니다.