분리된 파일 각각을 '모듈(module)'이라고 부른다.
자바스크립트가 만들어진 지 얼마 안 되었을 때는 자바스크립트로 만든 스크립트의 크기도 작고 기능도 단순했기 때문에 자바스크립트는 긴 세월 동안 모듈 관련 표준 문법 없이 성장할 수 있었다고 한다. 그런데 스크립트의 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해 주는 방법을 만드는 등 다양한 시도를 했다고 한다.
모듈 시스템은 2015년에 표준으로 등재됐다.
모듈은 파일 하나를 말한다. 스크립트 하나는 모듈 하나이다.
// 📁 sayHi.js
export function sayHi(user) {
alert(`Hello, ${user}!`);
}
// 📁 main.js
import {sayHi} from './sayHi.js';
alert(sayHi); // 함수
sayHi('John'); // Hello, John!
브라우저에서는 모듈이라는 것을 알려주기 위해 <script type="module"> 속성을 줘야 한다.
<!doctype html>
<script type="module">
import {sayHi} from './say.js';
document.body.innerHTML = sayHi('John');
</script>
// 사용시
export function sayHi(user) {
return `Hello, ${user}!`;
}
script에 type="module" 속성을 사용하면 해당 파일이 es6 모듈임을 알려준다. 이렇게 해야만 import export문을 사용할 수 있다.
브라우저가 자동으로 모듈을 가져오고 평가한 다음, 이를 실행한다. 그러기 때문에 로컬에서 file:// 프로토콜을 사용해 웹페이지를 열면 import, export 지시자가 동작하지 않는다. (브라우저에서 단 하나의 파일만 연 경우) => 이는 cors 정책 때문임. 무조건 로컬 서버를 통해서 실행해야만 한다.