2-4. 노드 ECMAScript 모듈, 다이나믹 임포트

I. ECMAScript 모듈

 

1. ECMAScript 모듈이란?

 

ECMAScript 모듈(ES 모듈)은 공식적인 자바스크립트 모듈 형식이다.

노드에서 아직까지는 CommonJS 모듈을 많이 쓰긴 하지만,

ES 모듈이 표준으로 정해지면서 점점 ES 모듈을 사용하는 비율이 늘어나고 있다.

브라우저에서도 사용 가능해서 브라우저, 노드 모두 같은 모듈 형식을 사용할 수 있다는 것이 장점이다.

//var.mjs
export const odd = 'MJS 홀수';
export const even = 'MJS 짝수';

exports.odd = odd; 에서 위와 같이 변한 모습이다.

 

불러올 때는, 아래와 같이 import 로 불러올 수 있다.

//index.mjs
import {odd, even} from './var.mjs';
import checkNumber from './func.mjs';

function checkStringOddOrEven(str) {
 if (str.length % 2) {
 return odd;
 }
 return even;
}

console.log(checkNumber(10));
console.log(checkStringOddOrEven('hello'));

import 나 export default는 require와 같은 함수, 모듈과는 다르게 객체가 아니라 고유한 문법, 예약어이기 때문에

수정할 수 없다.

그리고 실행할 때, 확장자명을 생략할 수 없다.

 

또한, mjs 확장자를 쓰는 것이 싫다면, js 확장자를 사용하면서,

package.json에 type: "module" 속성을 넣어야 한다.

 

 

2. CommonJS  vs  ECMAScript

 

 

 

II. 다이나믹 임포트

 

동적 불러오기 : 조건부로 모듈을 불러오는 것

//dynamic.js
const a = false;
if (a) {
  require('./func');
}
console.log('성공');

I 에서 정리한 표를 한번 다시 보고 위의 코드를 살펴보자.

위의 코드는 CommonJS 모듈로 작성한 코드이다. 여기서는 if문 안에 require 이라는 함수를 작성할 수 있지만,

아래의 코드와 같이 ES 모듈에서는 if문 안에 import 를 작성하면 에러가 발생한다.

//dynamic.mjs
const a = false;
if (a) {
  import './func.mjs';
}
console.log('성공'); // 오류

 

✨ES모듈에서도 다이나믹 임포트를 사용하고 싶다면?

- import 예약어가 아닌, import 함수를 사용할 것

 

//dynamic.mjs
const a = true;
if (a) {
  const m1 = await import('./func.mjs');	// import 함수
  console.log(m1);
  const m2 = await import('./var.mjs');
  console.log(m2);
}