기존의 javascript에서는 <script src=""> 형태로 파일 단위로만 스크립트들을 재사용할 수 있었다. 특히 <script>는 html에서 사용하는 태그로 하나의 javascript에서 다른 javascript를 사용할 수가 없었다. es2015에서는 module의 개념이 도입되면서 이런 부분이 개선되었다.
| |
일반 스크립트(<script src="">) |
모듈 스크립트(<script type="module">) |
| 스코프 |
전역 스코프에서 실행되므로 충돌 가능
- 스크립트의 모든 변수/함수는 window의 속성 |
모듈을 import한 script에서만 사용 가능 |
| 로딩 |
기본적으로 스크립트가 로딩될 때까지 html 파싱이 멈춤(동기)
- defer: 스크립트를 비동기로 다운로드 하고 html 파싱 완료 후 스크립트 실행
- async: 스크립트를 비동기로 다운로드 하고 다운로드 완료 후 즉시 실행 |
비동기적으로 로딩
- 기본적으로 defer |
module 활용
module에서는 공유 대상을 제공하는 export와 활용하는 import가 사용된다.
여러 항목을 export 하기
항목을 공유하기 위해서는 export를 사용한다. 다음과 같이 multi_export.js를 작성할 수 있다.
// 선언과 동시에 export
export let name = '홍길동';
export function add(a, b) {
return a + b;
}
// 선언과 별개로 export
let addr = "seoul";
let age = 30;
export { addr, age };
위의 javascript는 name, add, addr, age라는 4가지를 export 하고 있다.
단일 항목을 export 하기
한 가지 항목만을 export 할 때에는 export default를 사용한다. 다음과 같이 default_export.js를 작성할 수 있다.
export default {
sayHello : {
kor(name) {
console.log(`안녕 ${name}`);
},
eng(name) {
console.log(`Hello ${name}`);
}
}
}
import로 export 내용 사용하기
export 한 내용을 가져다 쓰기 위해서는 import 명령을 사용한다. 아래와 같이 import_test.js를 작성할 수 있다.
import {
name,
add,
addr as myaddr, // 다른 이름으로 변경 가능
age
} from "./multi_export.js";
import greeting from "./default_export.js";
console.log(name, myaddr, age);
console.log(add(10, 20));
greeting.sayHello.kor("홍길동");
export {name, myaddr, age, greeting}
첫 번째 import 문장에서는 {} 가 사용되었는데 de-structuring 처럼 multi_export.js에서 export 한 내용 중 필요한 내용을 선언해 주면 된다. 만약 이름을 달리 사용하려는 경우는 as 키워드로 이름을 지정할 수 있다.
두 번째 import 문장은 어차피 하나만 export되기 때문에 하나의 변수로 받아서 처리하고 있다.
이로써 javascript 파일에서 다른 javascript를 가져다 사용할 수 있게 되었다.
html에서의 활용
export 한 내용을 html에서 사용하기 위해서는 <script>태그에 type=module 속성을 추가해주어야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body></body>
<script type="module">
import { name, greeting } from "./import_test.js";
console.log(name);
greeting.sayHello.eng("hong");
</script>
</html>