1. 모듈의 일반적 의미

• 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각
• 모듈은 기능을 기준으로 파일 단위로 분리한다.
• 모듈이 성립하기 위해서는 자신 만의 파일 스코프를 가져야 한다.
• 자신만의 파일 스코프를 갖는 모듈의 자산은 기본적으로 캡슐화되어 다른 모듈에서 접근할 수 없고 애플리케이션과 완전히 분리되어 존재한다.
• export 를 통해 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다.
• 공개된 모듈의 자산은 다른 모듈에서 재사용할 수 있다.
• 모듈 사용자 : 공개된 모듈의 자산을 사용하는 모듈
  • import 를 통해 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다.

장점

• 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있다.
• 재사용성이 좋아 개발 효율성과 유지보수성을 높일 수 있다.

2. 자바스크립트와 모듈

• 자바스크립트는 모듈 성립을 위해 파일 스코프나 import, export를 지원하지 않았다. (과거)
• 자바스크립트 파일을 여러 개의 파일로 분리하여 script 태그로 로드해도 하나의 파일 내에 있는 것처럼 동작한다.
• 이로 인해 전역 변수가 중복되는 등의 문제가 발생할 수 있다.
• 자바스크립트 내에서 모듈 시스템을 만들고자 하면서 자바스크립트 모듈 시스템은 CommonJS 와 AMD 진영으로 나뉘었다.
• Node.js는 사실상 모듈 시스템의 표준인 CommonJS를 채택했으며 파일 별로 독립적인 파일 스코프(모듈 스코프)를 갖는다.

3. ES6 모듈(ESM)

• ES6에서 클라이언트 사이드 자바스크립트에서 동작하는 모듈 기능이 추가됐다. (IE 제외)
• ESM 사용법 : script태그에 type=module 어트리뷰트를 추가
• 일반적인 자바스크립트 파일과의 구분을 위해 확장자는 mjs를 권장한다.

3.1 모듈 스코프

• 독자적인 모듈 스코프를 갖는다.
• 모듈 내에서 var로 선언한 변수는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.

3.2 export 키워드

• 모듈 내부에서 선언한 모든 식별자는 기본적으로 해당 모듈 내부에서만 사용이 가능하다.
• 모듈 내부에서 선언한 식별자를 외부에 공개하여 다른 모듈들이 재사용할 수 있게 하기 위해 export 키워드를 사용한다.
• export 키워드는 선언문 앞에 사용한다.
• 변수, 함수, 클래스 등 모든 식별자를 export 할 수 있다.
• export 할 대상을 하나의 객체로 구성하여 한 번만 export 할 수 있다.

3.3 import 키워드

• 다른 모듈이 export 한 식별자를 자신의 모듈 스코프 내부로 로드하기 위해 import 키워드를 사용한다.
• ESM 의 경우에는 파일 확장자를 생략할 수 없다.
• 한 번에 import를 하기 위해서는 import 되는 식별자를 as 뒤에 지정한 이름의 객체의 프로퍼티에 할당할 수 있다.

import { pi as PI } from './lib.mjs';

export default

• 모듈에서 단 하나만 export 하는 경우 export default 키워드로 공개를 할 수 있다.
• export default를 사용하는 경우에는 이름 없이 하나의 값이 export 된다.
• export default를 사용하는 경우에는 const, let, var 와 같은 정의 키워드는 사용할 수 없다.