10 ES6 for Vue.js - Modules

source: categories/study/vue-beginner-lv2/vue-beginner-lv2_9-01.md

10.1 Modules

Modules - 자바스크립트 모듈화 방법

  • 자바스크립트 모듈 로더 라이브러리(AMD, Commons JS) 기능을 js 언어 자체에서 지원
    ES5에선 모듈화가 없었다.
    그래서 AMD, CommonJS와 같은 라이브러리를 사용해서 모듈화를 시도하곤 했었다.
    여기서 모듈화라는 얘기가 계속 나오고있는데, 모듈이라는 것은 특정 기능을 수행하는 한 단위, 덩어리, 묶음을 의미한다.
    모듈화를 하는 이유는 어떤 기능들을 재사용하기 위해서이다. 필요할 때마다 가져다 쓸 수 있다는 장점 때문에 모듈화를 많이 사용한다.

    자바에선 클래스 단위라던지 패키지 단위로 모듈화를 한다.
    그런데 자바스크립트는 파일이 다르다고해서 스코프가 나뉘어지지 않는다. 그것이 ES5였고, 그것을 ES6로 모듈화를 한 것이 export/import이다.
    그래서 이제 파일별로 스코프를 가져갈 수 있게되었다.

    스코프 충돌을 방지에 좀 더 안전성있는 코딩을 할 수 있도록하기 위해 이런 모듈화 방법이 생겨났다.
    원래는 라이브러리에서 지원했던 것을 이제는 언어적 차원에서 지원함으로써 개발자들의 수고가 덜어지는 효과도 있다.

  • 호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있음

// libs/math.js
export function sum (x, y) {
    return x + y;
}
export var pi = 3.141593;

// main.js
import {sum} from 'libs/math.js';
sum(1, 2);

vue.js에서 마주칠 default export

// util.js
export default function (x) {
    return console.log(x);
}

// main.js
import util from 'util.js';
console.log(util); // function (x) { return console.log(x); }
util("hi"); // hi

// app.js
import log from 'util.js';
console.log(log); // function (x) { return console.log(x); }
log("hi"); // hi