모던 자바스크립트_ES6 모듈 VS 스크립트 2탄(파일로딩,다운로드)

1. ES6 모듈과 일반 스크립트의 HTML 로딩 방식 비교

(1) ES6 모듈

HTML에서 ES6 모듈은 <script> 태그의 type="module" 속성을 사용하여 로드됩니다.

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

• 특징:
  • 모듈 스크립트는 비동기적으로 로드됩니다.
  • 로드 후 자동으로 실행됩니다.
  • import된 다른 모듈도 자동으로 네트워크 요청을 통해 다운로드됩니다.
  • 모듈 파일은 기본적으로 **엄격 모드(strict mode)**로 실행됩니다.

(2) 일반 스크립트

HTML에서 일반 스크립트는 <script> 태그만 사용하거나, 명시적으로 type="text/javascript"를 지정합니다.

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

• 특징:
  • 기본적으로 동기적으로 로드됩니다.
  • HTML 파싱이 스크립트 로딩과 실행 때문에 중단됩니다.
  • 파일 간 의존성은 수동으로 관리해야 합니다(모듈 시스템 없음).
  • 명시적으로 엄격 모드가 필요하지 않으면 **"sloppy mode"**로 실행됩니다.

---

 

 

 

 

 

2. 파일 다운로드 측면의 차이점

특징 ES6 모듈 일반 스크립트

병렬 다운로드	네트워크 요청을 통해 의존성(모듈)도 병렬로 다운로드	단일 파일만 로드, 의존성은 직접 관리
비동기 실행	기본적으로 비동기적	기본적으로 동기적
파일 의존성 관리	import/export 키워드로 자동 관리	파일 간 의존성은 수동으로 해결 필요
캐싱	브라우저가 모듈별로 캐싱	파일 단위로 캐싱
로드 시점	HTML 파싱 후 비동기적으로 로드 및 실행	HTML 파싱 중 로드, 파싱 중단 가능

파일 다운로드의 차이점 요약

1. 병렬 다운로드:
   • ES6 모듈은 import된 모듈들을 브라우저가 네트워크 요청으로 병렬 다운로드합니다.
   • 일반 스크립트는 HTML에 명시된 순서대로 하나씩 로드됩니다.
2. 의존성 관리:
   • ES6 모듈은 import를 통해 의존성을 자동으로 로드하므로, 추가적인 스크립트 태그가 필요하지 않습니다.
   • 일반 스크립트는 HTML에 의존성 파일을 직접 포함하거나 순서를 엄격히 관리해야 합니다.

---

 

 

 

 

3. HTML에서의 실제 로드 차이

(1) ES6 모듈의 로드

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

• 브라우저가 main.js를 로드하면서, main.js 내부의 import 문에 따라 다른 모듈을 추가적으로 네트워크 요청하여 병렬로 로드합니다.
• 예를 들어:이 경우, 브라우저는 main.js와 함께 math.js도 자동으로 로드합니다.
• // main.js import { add } from './math.js'; console.log(add(2, 3));

(2) 일반 스크립트의 로드

<script src="script1.js"></script>
<script src="script2.js"></script>

• 파일 간 의존성이 있다면, 파일의 순서를 수동으로 정해야 합니다.
• 예를 들어, script1.js가 script2.js에서 사용하는 함수를 정의하고 있다면, 반드시 script1.js를 먼저 로드해야 합니다.

---

 

 

 

4. 성능 및 최적화 측면

ES6 모듈

• 장점:
  • 병렬 다운로드로 로드 속도 향상.
  • 필요 없는 모듈은 로드하지 않음(Tree Shaking).
  • 코드 분할(Code Splitting)로 성능 최적화 가능.
• 단점:
  • 최신 브라우저에서만 기본적으로 사용 가능.
  • 구형 브라우저 지원 시 추가 도구(Babel, Webpack 등) 필요.

일반 스크립트

• 장점:
  • 모든 브라우저에서 동작.
  • 별도 트랜스파일링 없이 바로 실행 가능.
• 단점:
  • 동기 로드로 인해 HTML 파싱 중단 가능(성능 저하).
  • 파일 의존성을 수동으로 관리해야 함.

---