.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
모듈의 일반적 의미
모듈: 재사용 가능한 코드 조각이며 파일 단위로 분리한다. 또한 자신만의 파일 스코프를 갖는다.
모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능함 --> export
모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. --> import
모듈 사용의 이점
•
코드 단위 명확히 분리
•
재사용성
•
개발 효율성
•
유지 보수성
자바스크립트와 모듈
처음 사용목적이 단순한 보조 기능 처리였기에 존재하지 모듈이 존재하지 않았지만 CommonJS와 AMD 등 다양한 모듈시스템이 나오면서 지원하게 됨. 현재 Node.js는 CommonJS를 모듈시스템 표준으로 채택함. --> 파일별로 독립적인 파일 스코프를 갖는다.
ES6 모듈(ESM)
ES6에서 클라이언트 사이드 JS에서 동작하는 모듈 기능을 추가함 --> ESM
<script type="module" src="app.mjs"></script>
HTML
복사
사용법은 type="module" 어트리뷰트를 추가하며, 일반적인 JS 파일이 아닌 ESM임을 명확히 하기 위해 ESM 파일 확장자는 mjs를 사용할 것을 권장한다.
•
-> strict mode가 기본적으로 적용됨
모듈 스코프
일반적인 JS 파일은 독자적인 모듈 스코프를 갖지 않아서 var x로 변수를 선언한 2개의 파일이 존재할 시, 마지막으로 로드된 js 파일의 var x 선언문에 할당된 값이 window.x에 들어가 있게 된다.
그러나 ESM은 아래와 같이 다르게 동작한다.
<script type="module" src="foo.mjs"></script><script type="module" src="bar.mjs"></script>
HTML
복사
// foo.mjs
// x 변수는 전역 변수가 아니고 window 객체의 프로퍼티도 아님
var x = 'foo';
console.log(x); // foo
console.log(window.x); // undefined
// -------------------------
// bar.mjs
var x = 'bar';
console.log(x); // bar
console.log(window.x); // undefined
Plain Text
복사
이 뿐만 아니라 모듈 내에서 선언한 식별자는 모듈 외부에서 스코프가 다르기 때문에 참조할 수 없다.
ex) foo.mjs에 어떤 변수 선언하고 그 변수를 bar에서 참조를 못함
export 키워드
모듈 내부에서 선언한 식별자를 외부에 공개하여 다른 모듈들이 재사용할 수 있게 하려면 export 키워드를 사용한다.
export 키워드를 매번 선언문 앞에 붙여서 사용할 수 있지만 객체로 구성하여 한 번에 export가 가능하다.
// lib.mjs
const pi = Math.PI;
function square(x) {
return x * x;
}
class Person {
constructor(name) {
this.name = name;
}
}
// 변수, 함수 클래스를 하나의 객체로 구성하여 공개
export { pi, square, Person };
Plain Text
복사
import 키워드
다른 모듈에서 공개한 식별자를 자신의 모듈 스코프 내부로 로드하려면 import 키워드를 사용한다. 다른 모듈이 export한 식별자 이름으로 import하고, ESM의 경우 파일 확장자 생략 불가능!
// app.mjs
import { pi, square, Person } from './lib.mjs';
console.log(pi);
console.log(square(10));
console.log(new Person('Lee'));
Plain Text
복사
그 외 사용법
// 하나의 이름으로 한 번에 import 하는 방법
import * as lib from './lib.mjs';
// export한 식별자 이름 변경
import { pi as PI, square as sq, Person as p } from './lib.mjs';
Plain Text
복사
하나의 값만 export 하는 경우 default 키워드를 사용할 수 있고, 이 키워드와 함께 export 한 모듈은 {} 없이 임의의 이름으로 import할 수 있다.
// lib.mjs
export default x => x * x;
// --------------------
// app.mjs
import square from './lib.mjs';
console.log(square(3)); // 9
Plain Text
복사
default 키워드 사용 시, var, let, const 키워드는 사용할 수 없다.
export default const foo = () => {}; // SyntaxError
Plain Text
복사
