[Node.js 교과서] 2-4. ECMAScript 모듈, 다이나믹임포트, top level await

ECMAScript 모듈

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

노드에서 아직까지는 CommonJS 모듈을 많이 쓰긴 하지만, ES 모듈이 표준으로 정해지면서 점점 ES 모듈을 사용하는 비율이 증가하고 있음

브라우저에서도 ES 모듈을 사용할 수 있어 브라우저와 노드 모두에 같은 모듈 형식을 사용할 수 있다는 것이 장점

결국에는 ES 모듈로 전환될 것임

 

var.mjs

//CJS 모듈 형식
const odd = 'CJS 홀수'
const even = 'CJS 짝수'

module.exports = {
	odd,
    even
}


//ES모듈형식

export const odd = 'CJS 홀수'
export const even = 'CJS 짝수'

 

 

require와 exports, module.exports가 각각 import, export, export default로 바뀜

상당한 부분에서 차이가 있으므로 단순히 글자만 바꿔서는 제대로 동작하지 않을 수 있음

ES 모듈의 import나 export default는 require나 module처럼 한수나 객체가 아니라 문법 그 자체

파일의 확장자도 js에서 .mjs로 바뀜

 

mjs확장자 대신 js 확장자를 사용하면서 ES모듈을 사용하려면 package.json에 type: "module"속성을 추가하면 됨

 

 

 

다이나믹임포트

위의 표에서 CommonJS 모듈과 ES 모듈을 비교할 때, CommonJS 모듈에서는 다이나믹 임포트가 되는데 ES 모듈에서는 다이나믹 임포트가 안될 수 있음

 

하지만 ES 모듈은 if 문 안에서 import 하는 것이 불가능

이럴 때 아래와 같이 다이나믹 임포트를 사용 

import 한 결과는 프로미스 이기 때문에 await이나 then을 붙여야

 

 

 

 

 

Top level await

비동기 처리를 위한 awai 키워드를 async 없이도 사용 가능해짐

아래처럼 async로 감쌌었는데  단독으로 await를 사용할 수 있음

(단, 최상위에 있어야함)

 

//CJS 모듈 (.js 확장자)
async function f() {
    await a();
}

//ES 모듈 (.mjs 파일 확장자)
await a();