모듈(module)이란?
- 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용이 가능한 코드 모음을 말합니다. Javascript에서의 모듈은 기능을 기준으로 파일 단위로 분리합니다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 합니다.
모듈 export
export const hello = () => {
console.log("Hello World");
};
- 자신만의 모듈(파일) 스코프를 갖는 모듈 내부에 있는 코드들은 기본적으로 비공개 상태입니다. 하지만, 모듈안에 있는 기능을 사용자가 사용하거나 다른 모듈에서 사용하기 위해서는 선택적으로 공개할 수 있어야 합니다. 이렇게 일부 코드를 공개하기 위해서는 공개할 코드에 export 키워드를 사용하고 다른 모듈에서는 사용할 외부 모듈의 코드에 대해서 import하여 해당 코드를 접근할 수 있도록 할 수 있습니다.
브라우저와 모듈 시스템
- 자바스크립트는 웹 페이지의 보조적인 역할을 목적으로 태어났기 때문에 다른 일반 프로그래밍 언어보다 지원하는 기능이 많지 않았습니다. 그래서 모듈 시스템이 지원되지 않았고 브라우저에서 각 파일로 분리된 자바스크립트 파일을 script 태그로 불러와도 하나의 파일처럼 동작하기 때문에 전역 코드의 오염이 발생되는 경우가 많았습니다.(Node.js는 모듈 시스템을 지원하고 있습니다.)
브라우저에서 모듈 시스템 사용하기
<!DOCTYPE html>
<html>
<body>
<script type="module" scr="foo.mjs"></script>
<script type="module" scr="bar.mjs"></script>
</body>
</html>
- ES6 이후 부터는 브라우저에서도 모듈 시스템을 사용할 수 있으며, 모듈로서 사용할 파일의 확장자 이름은 .mjs로 해야합니다. 그리고 script 태그의 속성으로 type="module"을 지정하면됩니다.