해당 포스트는 각 모듈 시스템에 대한 차이와 사용법에 대한 포스트입니다.
자세한 사용법 보다는 어떻게 해야 사용할 수 있는지를 중점적으로 작성하겠습니다.
📥 require + exports
Node.js에서 표준으로 사용되는 CommonJS 키워드입니다.
1
2
3
4
5
6
7
8
9
10
11
// ==================== math.js ====================
const plus = (x, y) => x + y;
const minus = (x, y) => x - y;
module.exports = { plus, minus };
// ==================== index.js ====================
const { plus, minus } = require("./math");
console.log(plus(1, 2)); // 3
console.log(minus(2, 1)); // 1
require을 사용하는 위치에서 호출되기 때문에 먼저 호출하고 불러온 모듈을 사용해야합니다.
1
2
3
4
console.log(plus(1, 2)); // ReferenceError: Cannot access 'plus' before initialization
console.log(minus(2, 1));
const { plus, minus } = require("./math");
📥 import + export
ES6에서 도입된 키워드입니다.
어디서 사용하든 최상위로 끌어올려지고, 같은 것을 여러번 호출해도 한번만 불러와집니다.
1
2
3
4
5
6
7
8
9
// ==================== math.js ====================
export const plus = (x, y) => x + y;
export const minus = (x, y) => x - y;
// ==================== index.js ====================
import { plus, minus } from "./math.js"; // Node.js에서 사용하는 경우는 확장자 명시
console.log(plus(1, 2)); // 3
console.log(minus(2, 1)); // 1
📬 Node.js에서 import/export 사용하기
이전에는 .mjs 확장자를 통해서 ES6의 모듈 시스템을 사용할 것이라고 명시해줬다고 합니다.
하지만 요즘에는 package.json에 "type": "module"를 추가하면 됩니다.
1
2
3
4
5
6
7
{
"name": "test",
"version": "1.0.0",
// ... 생략
// 👇 추가
"type": "module"
}
그리고 반드시 확장자까지 명시해줘야 합니다.
이것은 브라우저에서 import가 동작하는 방식과 맞춰주기 위함이라고 합니다.
⏰ 비동기 import 하기
import()는 원하는 시점에 import를 하는데 사용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// ==================== math.js ====================
console.log("불러오기");
export const plus = (x, y) => x + y;
export const minus = (x, y) => x - y;
// ==================== index.js ====================
setTimeout(async () => {
const { plus } = await import("./math.js"); // "불러오기"
console.log(plus(1, 2)); // 3
}, 1000);
setTimeout(async () => {
const { minus } = await import("./math.js");
console.log(minus(1, 2)); // -1
}, 2000);
위 예시의 경우 1초, 3초뒤 반드시 해당 모듈을 사용하기 때문에 유용하지 않을 수 있습니다.
그 시점에 불러오고 사용해서 조금 더 느려지게 보일 수 있죠.
하지만 웹페이지에서 특정 버튼을 눌렀을 경우 어떤 복잡한 함수를 실행한다고 가정했을 때는 위 방식이 더 유용합니다.
버튼을 누르지 않으면 가져올 필요도 없는 모듈을 import를 사용하면 항상 가져오니까요.