48장. 모듈

48.1 모듈의 정의

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

• 모듈은 명시적으로 선택적 공개가 가능하다. 이를 export라 한다.
• 공개된 모듈의 자산은 다른 모듈에서 재사용할 수 있다.
  ➡️ 이때 공개된 모듈의 자산을 사용하는 모듈을 모듈 사용자라 한다.
• 모듈 사용자는 모듈이 공개(export)한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다.
  이를 import라 한다.
• 모듈은 기능별로 분리되어 개별적인 파일로 작성되며 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다.

48.2 ES6 모듈

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

👉script 태그에 type = "module" 속성을 추가하면 로드된 JS 파일은 모듈로서 동작한다.

48.2.1 export 키워드

모듈 내부에서 선언한 식별자를 외부에 공개하여 다른 모듈들이 재사용할 수 있게 하려면 export 키워드를 사용한다.

• export 키워드는 선언문 앞에 사용한다. 따라서 변수, 함수, 클래스 등 모든 식별자를 export할 수 있다.

export const pi = Math.pi;

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

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

• 선언문 앞에 매번 export 키워드를 붙이는 것이 번거로우면
  export할 대상을 하나의 객체로 구성하여 한번에 export할 수 있다.

export {pi,square,Person};

48.2.2 import 키워드

다른 모듈에서 공개(export)한 식별자를 자신의 모듈 스코프 내부로 로드하려면 import 키워드를 사용한다.
다른 모듈이 export한 식별자 이름으로 import해야 한다.

export한 식별자 이름을 일일이 지정하지 않고 하나의 이름으로 한 번에 import도 가능하다.

import * as lib from './lib.js';
console.log(lib.pi);
console.log(lib.square(10));
console.log(new lib.Person('Lee'));

• 모듈이 export한 모든 식별자 이름을 변경할 때 as 뒤에 지정한 이름으로 설정할 수 있다.

또한 export한 식별자 이름을 각각 다르게 이름을 변경할 수 있다.

import { pi as PI, square as sq, Person as P} from './lib.js';
console.log(PI);
console.log(sq(2));
console.log(new P('Kim'));

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

export default const foo = () => {}; //➡️ 틀린 방식❌
export default x => x*x; // ➡️ 올바른 방식⭕

• default 키워드를 함께 export한 모듈은 { }없이 임의의 이름으로 import한다.