48 모듈

48.1 모듈의 일반적 의미

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

모듈의 기능을 기준으로 파일 단위로 분리한다.

모듈은 자신만의 파일 스코프를 가질수 있어야 한다.

자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화 되어 다른 모듈에게 접근할수 없다.

모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다.

모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다 .export 라 한다.

공개된 모듈의 자산은 다른 모듈에서 재사용할수 있다.

공개된 모듈의 자산을 사용하는 모듈을 모듈사용자라고 한다.

모듈 사용자는 모듈이 공개한 자산중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할수 있다. 이를 import 라 한다.

48.2 자바스크립트와 모듈

자바스크립트 파일을 여러 개의 파일로 분리하여 script 태그로 로드해도 분리된 자바스크립트 파일들은 결국 하나의 자바스크립트 파일 내에 있는것처럼 동작한다.

모든 자바스크립트 파일은 하나의 전역을 공유한다.

Node.js는 CommonJS를 채택했다.

48.3 ES6 모듈

ES6 모듈은 ESM 이라 부른다 .

<script type="module" src="app.mjs"></script>

ESM의 파일 확장자는 mjs 사용권장

48.3.1 모듈 스코프

ESM 은 독자적인 모듈 스코프를 갖는다.

자바스크립트 파일은 script 태그로 분리해서 로드해도 독자적인 모듈 스코프를 갖지 않는다.

48.3.2 export 키워드

모듈 내부에서 선언한 모든 식별자는 기본적으로 해당 모듈 내부에서만 참조할수있다.

외부에 공개하여 다른 모듈들이 재사용할수 있게 하려면 export 키워드 사용

const pi = MATH.PI;
function square(x) {
  return x * x;
}
class Person {
  constructor(name) {
    this.name = name;
  }
}
export { pi, square, Person };

48.3.3 import 키워드

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

ESM의 경우 파일 확장자를 생략할수 없다.

import { pi, square, Person } from "./Ex48_12";
console.log(pi);
console.log(square);
console.log(Person);

import  * as lib from "./Ex48_12";
console.log(lib.pi);
console.log(lib.square);
console.log(lib.Person);