1. ES6 모듈(ESM)
ES6로 넘어오면서 자바스크립트 자체에서 ES6 Module이라는 이름으로 모듈화 지원을 시작했다.
<script type="module" src="app.mjs"></script>ESM의 사용법은
- script 태그에 type="module" 어트리뷰트를 추가
- 파일 확장자는 mjs를 사용.(일반 js 파일이 아닌 ESM임을 명확히 하기위해)
2. 모듈 스코프
- ESM은 독자적인 모듈 스코프를 갖는다.
- 모듈 내에서 선언한 식별자는 모듈 외부에서 참조할 수 없다.
ESM이 아닌 일반적인 js 파일은 script 태그로 분리해서 로드해도 독자적인 모듈 스코프를 갖지 않는다.
3. export 키워드
모듈 내부에서 선언한 식별자를 외부에 공개하여 다른 모듈들이 재사용할 수 있게 하려면 export 키워드를 사용한다.
변수 공개
export const pi = Math.PI;함수 공개
export function squre(x) {
return x * x;
}클래스 공개
export class Person{
constructor(name){
this.name = name;
}
}
export할 대상을 하나의 객체로 구성하여 한 번에 export
const pi = Math.PI;
function square(x){
return x * x;
}
class Person{
constructor(name){
this.name = name;
}
}
//변수, 함수 클래스를 하나의 객체로 구성하여 공개
export {pi, squre, Person};
4. import 키워드
다른 모듈에서 공개(export)한 식별자를 자신의 모듈 스코프 내부로 로드하려면 import 키워드를 사용한다.
app.mjs는 앱의 entry point(진입점) 이기 때문에 script 태그로 반드시 로드해줘야 한다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <script type="module" src="lib.mjs"></script> -->
<script type="module" src="app.mjs"></script>
</body>
</html>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 {pi, square, Person} from './lib.mjs';
console.log(pi);
console.log(square(10));
console.log(new Person('Lee'));
객체로 모아 한번에 import 하기
// import {pi, square, Person} from './lib.mjs';
import * as lib from './lib.mjs';
console.log(lib.pi);
console.log(lib.square(10));
console.log(new lib.Person('Lee'));lib.mjs 모듈이 export한 모든 식별자를 as 뒤에 lib이라는 객체 프로퍼티에 모아 import 한다.
식별자 이름 변경하여 import 하기
import { pi as PI, square as sq, Person as P} from './lib.mjs';
console.log(PI);
console.log(sq(10));
console.log(new P('Lee'));
default 키워드 - 하나의 값만 export할 때
export default x => x*x;
default 키워드를 사용할 때 car,let,const 키워드를 사용할 수 없다.
export default const foo = () => {};
//SyntaxError : Unexpected token 'const'
default 키워드와 함께 export한 모듈은 {} 없이 임의이 이름으로 import 한다.
import square from './lib.mjs';
console.log(square(3));
참고
모던 자바스크립트 Deep Dive - YES24
『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드
www.yes24.com
'Frontend > JavaScript' 카테고리의 다른 글
| [Javascript] 함수 (0) | 2021.10.24 |
|---|---|
| [Javascript] Object (0) | 2021.10.12 |
| CommonJS 모듈 내보내기/불러오기 (0) | 2021.10.11 |
| [Javascript] 모듈이란? (0) | 2021.10.10 |
| [Javascript] 특수 문자 입력(이스케이프 시퀀스) (0) | 2021.09.29 |
