목차

1. 모듈의 일반적 의미
2. 자바스크립트와 모듈
3. ES6 모듈(ESM)
4. 모듈 스코프

출처

모던 자바스크립트 48장
https://webclub.tistory.com/343

1. 모듈의 일반적 의미

책에서 찾은 모듈의 정의

모듈 이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다.
일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다.

구글링을 통해 찾은 모듈의 정의

모듈은 더 이상 나누어지지 않는 최소 단위 프로그램입니다.

모듈 사용 시 장점

1) 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용이 가능하다.
2) 코드 수정이 용이하다.
3) 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
4) 한번 다운로드된 모듈은 웹 브라우저에 저장되기 때문에 동일>한 로직을 로드할 때 시간과 네트워크 트래픽 절약(브라우저에서만 해당)

2. 자바스크립트와 모듈

자바스크립트는 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 목적으로 태어났다. 따라서 다른 언어(C, java)에서 지원하는 모듈 기능을 자바스크립에서는 지원을 하지 않고 있다.

예시 : 자바스크립트에서 여러 파일을 사용하는 방법 1

...
<script src = "app.js"></script>
<script src = "index.js"></script>
...              

위와 같은 예시의 HTML에서는 script 태그로 분리해서 로드된 2개의 자바스크립트 파일은 하나의 자바스크립트 파일 내에 있는 것처럼 동작한다. 즉, 하나의 전역을 공유한다.

이러한 단점을 보완하기 위해 ES6에서는 브라우저 환경에서도 모듈 시스템을 적용할 수 있는 ESM을 만들었다.

3.ES6 모듈(ESM)

ESM은 IE를 제외한 (IE는 ES6를 지원하지 않으므로)를 제외한 대부분의 브라우저에서 사용할 수 있다.

사용법

• 어트리 뷰트에 type = "module을 추가
• 일반적 자바스크립트 파일이 아닌 ESM을 명시하기 위해 파일 확장자는 mjs를 사용할 것을 권장한다.

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

이렇게 될 경우 각각의 파일은 완전히 독립적인 스코프를 가지게 되어서 위의 단점을 보완할 수 있게 된다.