2023.04.02
자바스크립트 스터디 11회차
공부 사이트: https://poiemaweb.com/
8. 모듈
모듈: 애플리케이션을 구성하는 개별적 요소. 재사용 가능한 코드 조각을 의미한다.
1) 모듈 스코프
HTML에서 자바스크립트 파일 2개를 로드하면 해당 파일들은 하나의 전역을 공유한다.
그러니 ES6의 모듈은 파일 자체의 스코프를 제공하기에, 독자적은 모듈 스코프를 갖는다.
모듈 내에서 var 키워드로 선언한 변수는 전역 변수가 아니게 되며, window 객체의 프로퍼티가 아니게 된다.
// m1.mjs
var x = 'test';
console.log(x);
//console.log(window.x); //window is not defined// m2.mjs
var x = 'TEST';
console.log(x);
//console.log(window.x); //window is not defined// test.html
<!DOCTYPE html>
<html>
<body>
<script type="module" src="m1.mjs"></script>
<script type="module" src="m2.mjs"></script>
</body>
</html>
위 코드를 로컬에서 실행하면 CORS 문제가 발생한다.
서버에서 실행시켜주어야 콘솔에 로그가 찍힌다. (express 사용)
2) export 키워드
모듈 안에 선언한 식별자를 외부에 공개하여 다른 모듈이 참조할 수 있게 하고 싶다면 export 키워드를 사용한다. 함수, 변수, 클래스 모두 export할 수 있다.
export 방법은 두 가지가 있는데, ①각각 export 키워드를 붙여주는 것과 ②마지막에 하나의 객체로 구성하여 한번에 export 하는 것이다.
// #1
export const pi = Math.PI;
export function square(x) {
return x * x;
}
export class Person {
constructor(name){
this.name = name;
}
}// #2
const pi = Math.PI;
function square(x) {
return x * x;
}
class Person {
constructor(name){
this.name = name;
}
}
// 하나의 객체로 구성하여 공개할 수 있다.
export {pi, square, Person};
3) import 키워드
export된 대상을 로드하기 위해 import 키워드를 사용한다.
① 개별 import
// m2.mjs
// 개별 import
import {pi, square, Person} from './m1.mjs';
console.log(pi);
console.log(square(10));
console.log(new Person('홍길동'));
② 한번에 모두 import
이 경우, as 뒤에 지정한 이름의 객체(코드에선 m1) 프로퍼티로 할당된다.
// m2.mjs
// 한번에 import
import * as m1 from './m1.mjs';
console.log(m1.pi);
console.log(m1.square(10));
console.log(new m1.Person('홍길동'));
③ 이름을 변경하여 import 가능
// m2.mjs
import {pi as PI} from './m1.mjs';
console.log(PI);
④ default
모듈에서 하나만을 export할 때, default 키워드를 사용할 수 있다. 기본적으로 내보내는 값을 정의한다.
'프로그래밍 > js' 카테고리의 다른 글
| ES6 lessons 10. 심볼 (0) | 2023.04.03 |
|---|---|
| ES6 lessons 9. 프로미스 (1) | 2023.04.03 |
| ES6 lessons 7. 클래스 (0) | 2023.03.28 |
| ES6 lessons. 6 Destructuring (0) | 2023.03.28 |
| ES6 lessons 5. 향상된 객체 리터럴 (0) | 2023.03.26 |