kingsubin

48장. 모듈

48-1. 모듈의 일반적 의미

• 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 한다.
• 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다.
• export 된 모듈의 자산은 다른 모듈에서 재사용할 수 있다. 이때 공개된 모듈의 자산을 사용하는 모듈을 module consumer라 한다.

48-2. 자바스크립트와 모듈

• 이전에 JS는 import, export를 지원하지 않아 여러 개의 파일로 분리하여 script 태그로 로드해도 분리된 자바스크립트 파일들은 결국 하나의 자바스크립트 파일 내에 있는 것처럼 동작한다.
• 이러한 상황에서 제안된 것이 CommonJS, Asynchronous Module Definition이다. 브라우저 환경에서 모듈을 사용하기 위해서는 CommonJS 또는 AMD를 구현한 모듈 로더 라이브러리를 사용해야 하는 상황이 되었다.
• JS 런타임 환경인 Node.js는 모듈 시스템의 사실상 표준인 CommonJS를 채택했고 현재는 CommonJS 사양과 100% 동일하지는 않지만 기본적으로 CommonJS 사양을 따르고 있다. 즉, Node.js는 ECMAScript 표준 사양은 아니지만 모듈 시스템을 지원한다.

48-3. ES6 모듈(ESM)

ES6에서는 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능을 추가했다.

// ESM 사용법, 확장자는 mjs 추천
<script type='module' src='app.mjs'></script>

 

모듈 스코프

// foo.mjs
const x = 'foo';
console.log(x); // foo

// bar.mjs
console.log(x); // x is not defined

 

export 키워드

모듈은 독자적인 모듈 스코프를 갖는다. 모듈 내부에서 선언한 식별자를 다른 모듈들이 재사용할 수 있게 하려면 export 키워드를 사용한다.

// lib.mjs
export const pi = Math.PI;

export function square(x) {
  return x * x;
}

export class Person {
  constructor(name) {
    this.name = name;
  }
}

// 한 번에 export
export { pi, square, Person }

 

모듈에서 하나의 값만 export한다면 default 키워드를 사용할 수 있다.

export default x => x * x;

 

import 키워드

// app.mjs
// ESM의 경우 파일 확장자 생략 불가능
import { pi, square, Person } from './lib.mjs';

// 한 번에 import
import * as lib from './lib.mjs';

// default 키워드와 함께 export 한 모듈은 {} 없이 import
import square from './lib.mjs';