모듈이란?
애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다.
이렇게 분리한 코드조각을 각각의 모듈(module)이라고 부른다.
라이브러리도 모듈의 일부이며 내가 작성한 함수도 하나의 모듈이 될 수 있다.
자바스크립트는 파일마다 독립적인 파일 스코프를 가지고 있지 않고 하나의 전역객체를 공유하여 사용한다. 이렇게 되면 전역변수가 중복되는 등의 문제가 발생할 수 있다.
즉 여러개의 파일로 분리하여 여러개의 script 태그를 사용하여도 이는 모듈화라고 볼 수 없다.
// script 1, 2, 3 은 모두 같은 전역 스코프를 공유한다.
<script src="script1.js />
<script src="script2.js />
<script src="script3.js />이러한 문제점을 해결하기 위해서 Node.js에서는 사실상 표준이라고 할 수 있는 CommonJS 를 채택하였다. 이렇게 함으로써 각각의 모듈들은 각자의 스코프를 가지게 될 수 있었다.
그러나 브라우저(클라이언트 사이드 자바스크립트)에서는 이를 지원하지 않았다. 그래서 ES6에서 이를 해결하기 위해 모듈 기능을 추가하게 된 것이다.
비교
ES Modules (MJS)
- 모듈로더를 비동기 환경에서 실행하고,
importexport구문을 찾아서 파싱한다. - 더 이상
import할 겂이 없을 때까지import를 찾는다. - 스크립트들이 실행이 된다.
- package.config의 "type": "module" 로 set 해주어야한다. (기본값이 아니다.)
Common JS (CJS)
default값이다.require()는 동기로 이루어진다.promise나callback을 return 하지 않는다.- 즉 require 내부의 script를 실행하고
export되어 있는 값을 return 한다.
동작 방식
ES Module의 경우 개발자가 지정한 파일을 entry point로 하여 나머지 파일들은 import 문을 따라가며 찾는다.
쉽게말해 index.html에서 <script src="script.js" type="module"> 로 작성한 경우 script.js를 entry point로 하여 script.js 파일 내부에서 import 문들을 찾아서 나머지 파일을 찾아내며 모두 찾아낸 후에는 dependencies의 모듈 그래프를 만들어낸다.
그 후 만들어낸 모듈 그래프를 토대로 의존하고 있는 스크립트들을 실행한다.
모듈 내보내기, 가져오기
Common JS
내보내기
export 와 export default 를 함수명 또는 변수명 앞에 위치시킴으로써 외부로 내보낼 수 있다.
// sayHello.js
export function sayHello(name) {
console.log(`sayHello ${name}!`)
}
export default function sayHi(name) {
console.log(`sayHi ${name}!`)
}가져오기
import 를 코드 최상단에 작성함으로써 외부에서 module을 가져와 사용할 수 있다.
import { sayHello } from "./sayHello.js"
import sayHi from "./sayHello.js"
sayHello('ahn') // Hello ahn!
sayHi('ahn') // hi ahn!사용하기
- 확장자를 변경하기
.js=>.mjs - package.json에 옵션을 변경하기
"type": "module"추가
참조
https://poiemaweb.com/es6-module
https://ko.javascript.info/modules-dynamic-imports
