4. Node 기능 살펴보기 (2) - 모듈 사용하기 : ECMAScript 1

 

 

 

 

ECMAScript(ES 모듈)은 공식적인 Javascript 모듈 형식입니다. 점차 표준 모듈로서 사용량이 늘어나고 있고, 무엇보다 브라우저와 노드 양쪽에서 모두 같은 모듈 형식을 사용할 수 있습니다. 

 

우선 이 ES 모듈의 특징을 CommonJS와 비교하면 다양한 차이점이 있습니다. 우선 몇 가지를 설명하고 예제를 살펴보겠습니다. ES 모듈에서 사용하는 import, export default는  require나 module.exports를 대체합니다. 하지만, 단순 객체나 함수 레벨의 변수가 아니라 '문법' 자체라는 사실을 기억해야 합니다. 

 

모듈 파일의 확장자도 .js가 아닌 .mjs입니다. 그렇기에 일반 js 확장자 파일에서 import를 사용하게 되면 syntax error가 발생하게 됩니다. (js 확장자에서 ES 모듈을 사용하기 위해서는 package.json에 type: "module" 속성을 추가해야 하는데, 이는 따로 살펴보겠습니다)

 

또한 CommonJS에서는 require과정에서 파일 확장자나 index.js와 같은 부분들을 생략할 수 있었는데, ES 모듈에서는 생략이 불가능합니다. 

 

그럼 이제 지난 아티클에서 작성하였던 var / func / index JS 파일을 기반으로 ECMAScript 형식 예제를 작성해 보겠습니다.

 

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

/* CommonJS ver.

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

module.exports = {
    odd,
    even,
};

*/

 

// [func.mjs]

const { odd, even } = require('./var');

function checkOddOrEven(num) {
    if (num % 2) {
        return odd;
    }
    return even;
}

module.exports = checkOddOrEven;

/* CommonJS ver.

const { odd, even } = require('./var');

function checkOddOrEven(num) {
    if (num % 2) {
        return odd;
    }
    return even;
}

module.exports = checkOddOrEven;

*/

 

// [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'));

/* CommonJS ver.

const { odd, even } = require('./var');
const checkNumber = require('./func');

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

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

console.log(module.exports === exports);

*/


/* 출력
$node index.mjs
MJS 짝수
MJS 홀수
*/

 

 

CommonJS와 ECMAScript의 차이점을 나열하면 다음과 같습니다. 상호 간에 잘 호환이 되지 않는 편이니, 가능한 한 가지 형식의 모듈만 사용하도록 합시다.

 

 

분류	CommonJS	ECMAScript
문법	require('./a');	import './a.mjs';
	module.exports = A;	export default A;
	const A = require('./a');	import A from './a.mjs';
	exports.C = D;	export const C = D;
	const E = F; exports.E = E;	const E= F; export { E };
	const { C, E } = require('./b');	import { C, E } from './b.mjs';
확장자	js cjs	js(package.json에 type: "module" 필요) mjs
확장자 생략	가능	불가능
다이내믹 임포트	가능(다음 아티클 참고)	불가능
인덱스(index) 생략	가능( require('./folder') )	불가능(import './folder/index.mjs')
top level await	불가능	가능
__filename, __dirname, require, module.exports, exports	사용가능(다음 아티클 참고)	사용 불가능(__filename 대신 import.meta.url사용)
상호간 호출	가능