모듈

모듈의 일반적 의미

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다.

• 모듈은 개별적 존재로서 캡슐화되어 애플리케이션과 분리되어 존재한다.
• export: 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다.
• import: 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다.
• 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있고 재사용성이 좋아서 개발 효율성과 유지보수성을 높힐 수 있다.

ES6 모듈(ESM)

export 키워드

// 변수의 공개
export const pi = Math.PI;

// 함수의 공개
export function square(x) {
  return x * x;
}

// 클래스의 공개
export class Person {
  constructor(name) {
    this.name = name;
  }
}

• export 키워드는 선언문 앞에 사용한다. 모든 식별자를 export 할 수 있다.

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

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

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

// 변수, 함수 클래스를 하나의 객체로 구성하여 공개
export { pi, square, Person };

• export 할 대상을 하나의 객체로 구성하여 한 번에 export 할 수도 있다.

import 키워드

import { pi, square, Person } from './lib.mjs';

console.log(pi);         // 3.141592653589793
console.log(square(10)); // 100
console.log(new Person('Lee')); // Person { name: 'Lee' }

• 다른 모듈에서 공개한 식별자를 자신의 모듈 스코프 내부로 로드하려면 import 키워드를 사용한다.

import * as lib from './lib.mjs';

console.log(lib.pi);         // 3.141592653589793
console.log(lib.square(10)); // 100
console.log(new lib.Person('Lee')); // Person { name: 'Lee' }

• 이름을 일일이 지정하지 않고 하나의 이름으로 한ㅂ너에 import 할 수 있다.

// lib.mjs
export default x => x * x;

// app.mjs
import square from './lib.mjs';

console.log(square(3)); // 9

• default 키워드를 사용하는 경우 기본적으로 이름 없이 하나의 값을 export 한다.
• default의 경우 var,let,const 키워들르 사용할 수 없다
• default 키워드와 함께 export 한 모듈은 {} 없이 임의의 이름으로 import 한다.