Module이란?

등장 배경

초기의 자바스크립트는 규모가 작고, 기능이 단순하여 모듈의 개념이 필요없었다.

하지만 현재, 자바스크립트를 이용한 애플리케이션의 규모가 커지면서 파일을 분할할 필요가 생겼다.

분할 파일 그 자체로 모듈이며, 모듈은 대개 클래스 하나 혹은 특정 목적을 가진 복수의 함수로 구성된 라이브러리이다.

 

개요

JavaScript에서의 모듈이란, ES2015(ES6) 이후부터 제공하는 import / export 키워드를 통해 스크립트의 변수나 함수를 타 스크립트에서 이용할 수 있도록 기능을 공유하는 것이다.

 

모듈의 핵심 기능

1) '엄격 모드(use strict)'로 실행되어 올바르지 않은 문법을 사전에 검출하여 에러를 발생시킨다.

2) 모듈은 자신만의 스코프가 있어 import / export를 사용하지 않고는 기능을 주고 받을 수 없다.

3) 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한 번만 실행된다.
   실행 후 결과는 이 모듈을 가져가려는 모든 모듈에 내보내 진다.

4) import.meta 객체는 현재 모듈에 대한 정보를 제공한다.

   실행 환경에 따라 다른 정보를 제공한다.

   ex) 브라우저 : 현재 실행 중인 웹페이지의 URL 정보

5) HTML에 type="module" 속성을 부여한 script(이하, 모듈 스크립트)에서의 'this'는 undefined이다.

   일반 스크립트에서의 this는 전역 객체인 것과 대조된다.

 

브라우저의 특정 기능

1) 모듈 스크립트는 HTML 문서가 완전히 렌더링 된 후에 실행된다.

   이러한 특징 덕분에 항상 완전한 HTML 페이지를 볼 수 있고, 문서 내 요소에도 접근할 수 있다.

2) 모듈 스크립트에 async 속성을 부여하면, 모듈을 import한 직후 HTML 문서의 렌더링 완료에 관계 없이 실행된다.

3) src 속성 값이 동일한 모듈 스크립트는 중복 실행되지 않는다.

4) 외부 사이트의 모듈 스크립트를 호출하기 위해서는 외부 사이트에서 CORS 헤더(Access-Control-Allow-Origin: *)를

   제공해야 한다.

5) 브라우저 환경에서 모듈을 import할 시, URL을 지정해야 한다.

   Node.js나 번들링 툴은 별도로 해당 모듈을 찾는 방법이 존재하기 때문에 경로가 없는 모듈을 사용할 수 있다.

6) 구식 브라우저와의 호환성을 위해 nomodule 속성을 정의한 스크립트로 모듈 스크립트가 실행되지 않을 때의

   예외처리를 정의할 수 있다.

 

출처 :

uwostudy.tistory.com/55

자바스크립트에서 use strict 란?

ko.javascript.info/modules-intro#ref-93

모듈 소개