JavaScript

[새로운 기능] module 시스템

기존의 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>