[JS] CommonJS와 ES6

JS 모듈화 역사

 

require는 NodeJS에서 사용되고 있는 CommonJS 키워드이고,  import는 ES6(ES2015)에서 새롭게 도입된 키워드입니다.

일반적으로 import ES6(ES2015)는 사용자가 필요한 모듈 부분만 선택하고 로드 할 수 있기 때문에 더 선호됩니다.

 

최근 ES6(ES2015) 모듈 시스템인 import가 많이 사용되고 있지만, 그러나 아직까지는 import 키워드가 100% 대체되어 사용될 수 없습니다.  <script> 태그를 사용하는 브라우저 환경과, NodeJS에서도 CommonJS를 기본 모듈 시스템으로 채택하고 있기 때문에, Babel과 같은 ES6 코드를 변환(transpile)해주는 도구를 사용할 수 없는 경우에는 require 키워드를 사용해야 합니다.

 

• node.js프로젝트에서 완벽 호환이 되지 않기 때문에 package.json에서 "type" : "module" 을 추가해 주어야 한다.

 

 

두 개의 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있지만, 비슷한듯 약간씩 다른 문법 때문에 종종 우리를 혼란스럽게 하기에 아래에 정리를 했습니다.

 

CommJS

내보내기 (commonjs.js)

function commonjs1 (js) {
  return 1
}


function commonjs2 (js) {
  return 2
}


(1)
exports.commonjs1 = commonjs1; // 내보내기 1
exports.commonjs2 = commonjs2; // 내보내기 2


또는
(2)
module.exports = {
	commonjs1 : commonjs1, // 내보내기 1
	commonjs2 : commonjs2; // 내보내기 2
}

또는
(3)
module.exports = {
	commonjs1, commonjs2 // 내보내기 1, 내보내기 2
}

 

 

불러오기 1

const commonjs = require("./commonjs.js");


commonjs.commonjs1 //불러오기 1
commonjs.commonjs2 //불러오기 2

불러오기 2

const {commonjs1, commonjs2} = require("./commonjs.js");


commonjs1 //불러오기 1
commonjs2 //불러오기 2

 

 

 

ES6

노마드 코더 설명

 

내보내기 (es6.js)

// (1) export를 붙여 내보내기

export function es1 (js) {
  return 1
}

export function es2 (js) {
  return 2
}





//(2) 함수에 export를 제거하고 export default 를 사용한다.

function es1 (js) {
  return 1
}

function es2 (js) {
  return 2
}

export default {es1, es2}

각 파일마다 단 한개의 default export만 존재해야 한다.

 

불러오기

// (1) export의 경우
import {es1, es2} from "./es6.js" //export한 이름과 같아야 한다.
es1 //불러오기 1
es2 //불러오기 2

import {es1 as es6} from  "./es6.js" // as를 사용하면 원하는 이름을 사용할 수 있다.
es6 //불러오기 1





//(2) default의 경우 원하는 이름으로 불러오기 가능하다.
import es from "./es6.js"

es.es1 //불러오기1
es.es2 //불러오기2



// (3) default를 사용하지 않고 모든 함수 불러오기
improt * as es form "./es6.js"

es.es1 //불러오기1
es.es2 //불러오기2

 

 

 

결론

CommonJS가 처음에 등장하였으나, 현재는 ES modules 모듈 시스템이 많이 사용되고 있습니다.

 

CommonJS는 동적이기 때문에 종속성을 모두 파악하기 전에 파일이 읽힘과 동시에 실행되며,

ES modules는 비동기로 동작하여 속도가 빠르고 실제 사용되는 부분만을 import(tree shaking) 하여 메모리를 적게 차지하며, 가독성이 좋고 순환 의존성을 지원한다는 이점이 있습니다. 이러한 장점이 있기에 개인적인 생각으로도 ES가 더 사용성이 좋다고 생각합니다.