ES6의 모듈 자바스크립트 코드를 담고 있는 하나의 파일이다. 즉 하나의 파일이 하나의 모듈이라고 볼 수 있다.
ES6의 모듈은 엄격한 모드의 코드이고 import와 export 키워드를 사용한다.
export 키워드르르 이용하여 모듈내의 특정 코드를 외부에서 사용할 수 있다. 그리고 import 키워드를 이용해서 export 한 코드를 가지고 올 수 있다.
간단히 모듈을 정의하고 코드를 외부로 내보내고 가지고 오는 예제를 살펴보자.
//File: hello.js
export function hello(name){
console.log(`hello ${name}`);
}
//File: app.js
import {hello} from './hello.js';
hello('es6 module'); // hello es6 module 출력된다.두 모듈은 단순한 자바스크립트 파일이다.
hello.js에서는 hello 함수를 정의하고 이함수를 export 키워드를 이용하여 외부에서 가져올 수 있게 내보냈다.
app.js에서는 hello.js의 hello함수를 import키워드를 이용하여 가지고 온다.
이렇게 가져온 함수는 app.js 모듈내에서 자유롭게 사용할 수 있다
이렇게 하나의 모듈이 다른 모듈에서 내보낸(Export) 코드를 가져오면(Import) 두 모듈은 서로 의존하게 되어 의존관계가 형성되고 여러 모듈들은 의존관계를 맺어 의존관계 그래프가 형성되게 된다. 그리고 의존 관계 그래프에서는 최상의 루트가 필요한데 이루트 모듈이 애플리케이션의 시작 지점이 된다.
자바나 C언어에서의 메인 메소드와 같다고 생각하면 된다.
위 예제 코드에서는 app.js가 루트 모듈이라고 볼 수 있다.
ES6의 모듈로 정의된 파일들은 실행하는 방법에 따라 두 가지로 분류할 수 있다
* 런타임 로딩(Runtime Loading)
런타임 로딩은 의존 관계가 형성된 모듈들을 애플리케이션이 구동 시점에 비동기 HTTP 요청으로 불러오고 실행된다. 이때 모듈 로더가 필요한데 system.js 나 require.js를 이용할 수 있다
* 번들링(Bumdling)
번들링은 의존 관계가 형성된 모듈들을 하나의 파일로 묶어 준다.
그리고 애플리케이션이 구동할 때 묶여진 이 파일을 로드한다.
번들링은 개발 시점에 이루어지게 되고 브라우저에서 이루어지지 않고 대체로 node.js 환경에서 이루어지게 된다.
대표적인 모듈 번들로는 웹팩(Webpack)이 있다
* 웹팩(Webpack)
웹팩은 모듈 번들러로 자바스크립트 코드 외에 CSS, 이미지, 폰트 등 다양한 자원들을 모듈화시켜 의존 관계 그래프를 형성하여 병합된 파일들을 만들 수 있다.
node.js 플랫폼에서 동작하는 애플리케이션이고 다양한 플러그인들을 제공하고 있다
Bundler – 여러 개의 파일을 묶어주는 파일로 여러 가지가 있다 그중 Webpack을 공부하자
웹에서도 모듈을 사용하고 여러개의 파일을 묶어서 제공하고자 사용한다
그 이유는 프로젝트가 많은 양의 js, css파일등이 필요하기 때문에 많은 작업들을 수행해야 하기 때문
최신 브라우저에 사용할 수 있으며 bundle.js로 오래된 브라우저도 지원이 가능하게된다
//File: hello.js
var word = 'hello';
export default word;
//File: word.js
var word = 'World';
export default word;
//webpack – module
//File: index.html
<div id="root"></div>
<script type="module">
import hello_word from "./source/hello.js";
import world_word from "./source/world.js";
document.querySelector('#root').innerHTML = hello_word + ' ' + world_word;
</script>
Webpack은 npm install –D webpack-cli을 하여 webpack을 설치한다
webpack 적용을 하기위해 모듈화하여 .js파일을 추가하고 index.html파일을 수정한다
// File: index.html -- (entry 파일 추가 & 수정)
<div id="root"></div>
<script src="./public/index_bundle.js">
import hello_word from "./hello.js";
import world_word from "./world.js";
document.querySelector('#root').innerHTML = hello_word + ' ' + world_word;
</script>
npx weppack —entry
./source/index.js —output
./public/index_bundle.js
위의 명령어를 실행하면 entry 파일인 index.js 에서 사용하고 있는 모든 파일을 index_bundle.js에 출력하라는 의미
웹을 실행하면 출력은 전과 같게 동일하지만 js파일은 한 개만 로드한다
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Module Sample</title>
<script type="module" src="app.js"></script>
</head>
<body>
</body>
</html>위 코드를 크롬 콘솔에서 확인 하면 다음과 같다
결과 : hello es6 module
2020/06/08 - [JavaScript/모듈 이해하기] - 자바스크립트 모듈 시스템 이해하기 - 번들링(Bumdling) 웹팩(Webpack)
자바스크립트 모듈 시스템 이해하기 - 번들링(Bumdling) 웹팩(Webpack)
ES6의 모듈 자바스크립트 코드를 담고 있는 하나의 파일이다. 즉 하나의 파일이 하나의 모듈이라고 볼 수 있다. ES6의 모듈은 엄격한 모드의 코드이고 import와 export 키워드를 사용한다. export 키워��
tantangerine.tistory.com
'IT_Web > JavaScript' 카테고리의 다른 글
| Javascript, React에서 새창이 닫힐때 특정기능을 실행하려면? (0) | 2024.03.21 |
|---|---|
| JavaScript 모듈 기본값 정의하고 가져오기 - default 키워드 활용법, export, import (0) | 2020.06.08 |
| 자바스크립트 모듈 이해하기 - 네임스페이스 (0) | 2020.06.06 |
| Java Script - push() 배열 뒤에 요소 추가하기(추가설명) (0) | 2020.06.04 |
| Java Script - splice - 배열 인덱스로 특정 요소 수정하기 (0) | 2020.06.02 |