모듈이란?
- 애플리케이션을 구성하는 개벌적인 요소로서 재사용 가능한 코드 조각을 말한다.
- 모듈(module)은 자신만의 파일 스코프(모듈 스코프) 를 가진다.
import와export를 사용하여 선택적으로 모듈 자산을 재사용 할 수 있다.
ESM
- ES6 Moule를 ESM이라 한다.
- script 태그에
type="module"어트리뷰트를 추가 후 로드한다. - ESM임을 명확히 하기 위해 확장자를
*.mjs를 사용할 것을 권장한다.
<script type="module" src="app.mjs"></script>모듈 스코프
일반적인 자바스크립트
일반적인 자바스크립트에서는 script 태그를 분리해서 로드해도 독자적인 스코프를 갖지 않는다.
<html>
<body>
<script src="foo.js"></script>
<script src="bar.js"></script>
</body>
</html>/* foo.js */
const x = "foo";
console.log(x); // foo/* bar.js */
console.log(x); // fooESM
ESM은 파일 자체의 독자적인 모듈 스코프를 가지고 있어 모듈 내 선언한 식별자는 모듈 외부에서 참조할 수 없다.
<html>
<body>
<script type="module" src="foo.mjs"></script>
<script type="module" src="bar.mjs"></script>
</body>
</html>/* foo.mjs */
const x = "foo";
console.log(x); // foo/* bar.mjs */
console.log(x); // x is not definedexport & import
export
- 모듈 내부 식별자를 외부에 공개하여 재사용 가능하도록 해준다.
- export 키워드 사용시 "변수, 함수, 클래스"등 모든 식별자를 export 할 수 있다.
/* lib.mjs */
export const pi = Math.PI;import
- 모듈에서 공개(
export)한 식별자를 자신의 모듈 스코프로 로드하기 위해서 사용한다. export한 식별자 이름으로import해야 된다.- "일반적인 자바스크립트"와 다르게 ESM에 경우 script 태그로 로드할 필요가 없다.
/* app.mjs */
import { pi } from "./lib.mjs";
console.log(pi); // 3.141592653589793<html>
<body>
<!-- app.mjs에서 import 되므로 로드할 필요 없음 -->
<!-- <script type="module" src="lib.mjs"></script> -->
<script type="module" src="app.mjs"></script>
</body>
</html>as & default
as
export한 식별자 이름을 일일이 지정하지 않고, 한번에 import 하기 위해 as를 사용한다. 이런 경우 객체에 프로퍼티가 할당된다.
/* lib.mjs */
const pi = Math.PI;
function square(x) {
return x * x;
}
class Person {
constructor(name) {
this.name = name;
}
}
export { pi, square, Person };/* app.mjs */
import * as lib from "./lib.mjs";
console.log(lib.pi); // 3.141592653589793
console.log(lib.square(10)); // 100
console.log(new lib.Person("Lee")); // {name: 'Lee'}모듈이 export한 식벽잘 이름을 변경하여 import할 수도 있다.
/* app.mjs */
import { pi as 원주율, square as 곱셉 } from "./lib.mjs";
console.log(원주율); // 3.141592653589793
console.log(곱셉(10)); // 100default
- 모듈에서 하나의 값만
export하는 경우default키워드 사용할 수 있다. default는var,let,const변수 키워드를 대체하고, 식별자는 생략한다.
Math.pi
/* lib.mjs */
export default Math.pi;/* app.mjs */
import pi from "./lib.mjs";
console.log(lib.pi); // 3.141592653589793square()
/* lib.mjs */
export default function (x) {
return x * x;
}/* app.mjs */
import square from "./lib.mjs";
console.log(square(10)); // 100
UI 마크업 개발자 장지훈입니다.