모듈이란 애플리케이션을 구성하는 개별 오소로서
재사용 가능한 코드 모음을 말하낟
일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다
이때 모듈이 성립하려면 모듈은 자기 자신만의 파일 스코프 (모듈 스코프) 를 가질 수 있어야 한다
자신만의 모듈 스코프를 갖는 모듈의 자산은 기본적으로 비공개다
캡슐화되어 다른 모듈에서 접근할 수 없다
모듈은 개별 존재로 애플리케이션과 분리되어 존재한다
모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다
이를 export 라고 한다
공개된 모듈의 자산은 다른 모듈에서 재사용할 수 있다
이때 공개된 모듈 자산을 사용하는 모듈을 모듈 사용자라고 한다
모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해
자신의 스코프 내로 불러들여 재사용할 수 있다
이를 import 라고고 한다
이처럼 모듈은 애플리케이션과 분리되어 개별적으로 존재하다가
필요에 따라 다른 모듈에 의해 재사용된다
자바스크립트와 모듈
자바스크립틏는 웹페이지의 단순한 보조 기능을 수행하기 위한
제한적 용도를 목적으로 태어났다
이런 태생적 한계로 부족한 부분이 있는건 사실이다
대표적인 것이 기본적으론 모듈 시스템을 지원하지 않는다는 것이다
자바스크립트는 모듈이 성립하기 위해 필요한
파일 스코프와 import, export 를 지원하지 않았다
script 태그글 사용하여 외부 자바스크립트 파일을 로드할 수는 있지만 파일마다 독립적인 파일 스코프를 갖지 않는다
결국 여러 개의 파일을 script 태그로 불러와도
하나의 파일 내에 있는 것 처럼 동작한다
모듈 시스템은 반드시 해결해야하는 과제로 되었고
이 상황에서 제안된 것이 CommonJS 와 AMD 다
모듈 시스템은 크게 두 진영으로 나뉘었다
node.js 는 사실상 표준인 CommonJS 를 채택했고
ECMAScript 표준 사양은 아니지만 모듈 시스템을 지원한다
ES6 모듈 (ESM)
ES6 에서는 클라이언트 사이드에서도 동작하는 모듈 시스템을 추가했다
ES6 모듈 (ESM)은 간단하다
script 태그에 type="module" 속성을 추가하면
자바스크립트 파일은 모듈로서 동작한다
모듈 파일임을 명확히 하기 위해 ESM 파일 확장자는 mjs 로 하는 편이 좋다
모듈 스코프
ESM 은 독자적 모듈 스코프를 갖는다
모듈 내에서는 var 로 선언한 변수도 전역 변수가 아니다
모듈 내에 선언한 식별자는 외부에서 참조할 수 없다
export 키워드
모듈 내부의 자원을 외부에 공개하여 재사용하려면 export 키워드를 사용한다
export 는 선언문 앞에 사용한다
변수, 함수, 클래스 등 모든 식별자에 대해 사요 ㅇ가능하다
매번 export 하기 귀찮다면
export 대상을 하나의 객체로 구성하여 export 할 수도 있다
import 키워드
다른 모듈에서 export(공개) 한 식별자를 자신의 모듈 내부로 로드할 때 import 키워드를 사용한다
다른 모듈이 export 한 식별자 이름으로 import 한다
ESM 의 경우 파일 확장자를 생략할 수 없다
as 로 import 이름을 변경하여 사용도 가능
default 키워드를 사용하는 경우 var, let, const 키워드는 사용할 수 없다
default 키워드와 함께 export 한 모듈은 {} 없이 임의의 이름으로 import 한다
