[Javascript] CommonJS 와 ES6의 모듈 시스템

🌈 모듈 시스템이란?

개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야한다. 이때 분리된 파일을 “모듈” 이라고 부르며,

일반적으로 클래스, 함수등으로 구성된다.

스크립트가 점차 복잡해짐에 따라서 모듈을 언제든지 불러오거나 외부로의 노출이 필수적이게 되었습니다.

그에 따라, 만들어진 것을 “모듈 시스템”이라고 한다.

모듈을 정의하기 위한 문법에는 여러가지가 있는데, 그 중 CommonJS 와 ES6 를 알아보도록 하자.

🌈 CommonJS

CommonJS 는 Javascript를 브라우저에서뿐만 아니라, 서버사이드 애플리케이션을 사용하려고 조직한 자발적 워킹 그룹이다.

CommonJS의 모듈 명세는 오늘날 널리 사용되고 있으며, Node.js 의 표준으로 사용되고 있다.

“모듈” 내보내기의 경우 exports, module.exports

가져오기의 경우 require를 사용한다.

• 내보내기 (exports, module.exports)

// export.js
function f1() {
    console.log("This Is f1() In CommonJS DIR");
}

function f2() {
    console.log("This Is f2() In CommonJS DIR");
}

function f3() {
    console.log("This Is f3() In CommonJS DIR");
}

function f4() {
    console.log("This Is f4() In CommonJS DIR");
}

exports.f1 = f1;
exports.f2 = f2;

module.exports.f3 = f3;
module.exports.f4 = f4;

• 가져오기 (require)

const obj = require(`./export`); // 상대경로및 절대경로

obj.f1(); // This Is f1() In CommonJS DIR
obj.f2(); // This Is f2() In CommonJS DIR
obj.f3(); // This Is f3() In CommonJS DIR
obj.f4(); // This Is f4() In CommonJS DIR

보다시피, 가져오는 방법에 대해서는 두 방법 모두 동일하다.

다만, 내보내기를 할 경우 exports 는 여러 property를 내보낼때 사용이 가능하고,

module.exports 는 여러 property 와 단일 object 를 내보낼때 모두 가능하다.

exports 는 module.exports를 참조하고있는 객체이다.

exports에 신규 객체를 할당해버리면 모듈이 동작하지 않는다.

대부분의 경우에, module.exports를 사용할 것을 권장한다.

🌈 ES6

CommonJS 와 마찬가지로 원하는 모듈을 export 하고, import 한다.

내보내기의 경우 export 및 default,

가져오기의 경우 import를 사용한다.

Node.js 를 사용할 경우 모듈의 타입이 흔히 CommonJS 로 설정 되어 있다.

그러므로 package.json 에 접근하여 모듈의 타입을 바꿔줘야 한다.

• 내보내기(export, export default)

// export.js
export function f1() {
    console.log("This Is f1() In ES6 DIR");
}

const f2 = () => {
    console.log("This Is f2() In ES6 DIR");
};

const obj = {
    f3 : () => {
        console.log("This Is f3() In ES6 DIR");
    },
    f4 : () => {
        console.log("This Is f4() In ES6 DIR");
    }
}

export { f2 };
export default obj;

• 가져오기(import)

// 사용하려는 객체만 선택하여 가져오기. 정확한 개체의 명칭을 시용해야함.
import {f1} from './export.js'
f1(); // This Is f1() In ES6 DIR

// 모든 객체를 가져오되 원하는 이름을 붙여서 사용
import * as mod from './export.js'
mod.f1(); // This Is f1() In ES6 DIR
mod.f2(); // This Is f2() In ES6 DIR

// default 객체 가져오기. 정확한 객체의 명칭을 사용하지 않아도 됨.
import obj from './export.js'
obj.f3(); // This Is f3() In ES6 DIR
obj.f4(); // This Is f4() In ES6 DIR

• named export

import 시, 정확한 개체의 명칭을 사용해야 한다.

• default export

import 시, 정확하지 않은 개체의 명칭을 사용해도 된다.

🔎 default export, named export 의 차이

모듈의 경우 크게 두 종류로 나뉜다.

복수의 함수가 있는 라이브러리의 형태의 모듈

개체 하나만 선언되어있는 모듈

대개는 두 번째 방식으로 모듈을 만드는 것을 선호하기 때문에 함수, 클래스 변수 등의 개체는 전용 모듈안에 구현된다.

export default 를 사용하면 ‘해당 모듈엔 개체가 하나만 있다’ 하는 사실을 나타낼 수 있다.

또한, default 를 붙여서 모듈을 내보내면 중괄호 없이 모듈을 가져 수 있다.

• named export

import {f1} from './export.js'

• default export

import obj from './export.js'

물론, named export 와 default export 를 같은 모듈에서 동시에 사용해도 문제는 없지만, 실무에선 흔하지 않은 사례라고 한다.

또한, 파일당 최대 하나의 default export 가 있을 수 있으므로 내보낼 개체엔 이름이 없어도 된다.

export default class {
  constructor() {
    ...
  }
}

만일 named export 와 default export 가 둘 다 설정이 되어 있다면, import 로 두개의 export를 다 가져올 수 있다.

// export.js
export dafault class Test {
  constructor() {
    ...
  }
}

export function printHelloWorld() {
  console.log("Hello World!");
}

// import.js
import {default as Test, printHelloWorld} from './export.js';

// *로도 다 불러올 수 있다.
import * as obj from './export.js';

모듈 다시 내보내기

export ... from ... 문법을 활용하여 다시 내보낼 수 있다. 물론, 이름을 바꿔서 내보낼 수 있다.

export {printHelloWorld} from './export.js';
export {default as Test} from './export.js';

주의해야할 점이 있다.

default export 를 다시 내보내려면 반드시 export {default as test}를 사용해야 한다.

export from ‘export.js' 를 사용해 모든 걸 한 번에 다시 내보내면 default export는 무시되고, named export 만 다시 내보내 진다. 즉, export from ‘export.js' 와 export {default} from 'export.js' 를 다 사용해줘야 한다.

🚀 마무리

지금까지 , CommonJS, ES6 의 모듈 시스템 및, 주의 해야할 점을 알아보았다.

여기서 지켜 보아야할 점은

CommonJS는 사실상 표준이지만, 모듈 시스템이 아직 깔끔하지 않고 불안한 점이 많다고 한다. require 로 필요한 dependency 를 불러오기 전까지 아무것도 실행할 수 없다.

서버사이드 같은 경우는 이미 로드된 모듈의 경우 바로 사용할수 있지만, 브라우저 같은 경우는 이 작업으로 인해 지연이 발생한다고 한다.

이러한 이유로, 표준 자바스크리브에서도 ES Modules 라는 독자적인 모듈 시스템을 추가한 것이다. CommonJS 와는 다르게 import를 비동기적으로 수행할 수 있다고 한다. 물론, 실행하는 환경에 따라 동기적으로 수행될 수 도 있다.

또한, 실제 사용되는 부분만을 import 하여 메모리를 적게 차지하며, 가독성이 좋고 순환 의존성을 지원한다는 이점도 있다고 한다.

따라서, 각각의 사용성 및 장, 단점을 잘 생각하여 모듈 시스템을 사용하도록 하자!