728x90
2025.04.02 - [Frontend] - ES 모듈이란? 기본 ES 모듈 방식과 Vite 번들링 방식 차이
ES 모듈이란? 기본 ES 모듈 방식과 Vite 번들링 방식 차이
ES 모듈 # 개념 ES 모듈은 ECMAScript(자바스크립트 표준)에서 공식적으로 지원하는 모듈 시스템이다-> js 파일을 여러개로 나누고 필요한 것만 가져다 쓸 수 있도록 도와주는 기능 ! # ES 모듈
megak.tistory.com
Vue 에서 ES 모듈을 최적화해서 사용한다고 했다.
이걸 어떻게 브라우저가 인식해서 사용할까 ??
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Jobs</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
=> <script> 태그에 type="module" 값을 주면 브라우저가 ESM(ES 모듈)을 사용한다는 걸 자동으로 인식한다 !
동작 방식
1. 브라우저가 /src/main.js 를 ES 모듈로 로드
2. main.js 가 실행되면서 Vue 앱을 초기화
3. main.js 내부에서 import 문을 통해 다른 모듈을 로드
4. #app 에 Vue 애플리케이션이 마운트됨
마운트(Mount)란 ?
Vue 컴포넌트가 실제로 HTML DOM 에 연결되는 과정 ( 화면 렌더링하는 것 )
일반적인 <script> 태그와 비교해보자
<script src="/src/main.js"></script>
- 브라우저가 main.js를 일반적인 JavaScript 파일로 해석
- 파일 내에 import 나 export 를 사용할 수 없음 ( 오류발생 )
- <script> 태그가 HTML 을 해석하면서 동기적으로 실행됨
type="module" 사용
<script type="module" src="/src/main.js"></script>
- import , export 분법 지원
- 자동 비동기(async) 실행
- 스코프가 분리됨 -> 전역 변수 오염 방지
- 일반 <script> 태그에서는 모든 코드가 전역 스코프에서 실행됨
- type="module"을 사용하면 각 파일이 독립적인 모듈 스코프를 가짐
- 한 모듈에서 선언한 변수가 다른 변수의 전역 변수와 충돌하지 않음
결론적으로 Vite는 type="module" 을 활용하여 Vue 앱을 실행한다 !
728x90
'Frontend > Vue' 카테고리의 다른 글
| defineProps : props 값 전달하기 (0) | 2025.04.07 |
|---|---|
| Vue 템플릿 문법 - Interpolation(보간법) , Directive (0) | 2025.04.04 |
| vite 의 설정 파일( vite.config.js )의 기본설정 (0) | 2025.04.03 |
| Vue 란 ? 간단 개념 및 특징 - 선언적 렌더링과 반응성 이해하기 (0) | 2025.04.03 |
| ES 모듈이란? 기본 ES 모듈 방식과 Vite 번들링 방식 차이 (0) | 2025.04.02 |
