CommonJS

오늘은 CommonJS에 대해서 공부했다.

JavaScript의 모듈화를 위해 CommonJS를 사용해야 하는데 CommonJS에 대해서 간단하게 알아보고자 한다.

CommonJS의 특징 

• 스코프(Scope): 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다.
• 정의(Definition): 모듈 정의는 전역 객체인 exports 객체를 이용한다.
• 사용(Usage): 모듈 사용은 require 함수를 이용한다.

 

// foo.js
exports.foo = () => { console.log('foo') };

// bar.js
exports.bar = () => { console.log('bar') };

// foobar.js
exports.foobar = () => { console.log('foobar') };

// 이렇게 세 파일이 있다고 가정

// index.js
let foo = require('./foo');
let bar = require('./bar');
let foobar = require('./foobar');

console.log(foo); // {foo: Function}
foo.foo(); // 'foo'

exports 객체에 foo라는 이름으로 함수를 반환해주고 index.js에서 foo라는 이름으로 해당 객체를 불러와준다. 
그래서 foo를 console.log로 찍어보면 foo.js에서 exports로 반환해준 객체가 나오고 이 foo를 실행시켜주어야 foo.js안에 들어있는 foo 함수가 실행된다.

exports로 내보내 주는 방법 외에도 module.exports로 내보내 주는 방법도 있다.

// hello.js
module.exports.anything = () => { console.log('Anything') };

// index.js
const hello = require('./hello');

console.log(hello); // {anything: Function}
hello.anything(); // 'Anything'

쓰는 방법은 매우 유사하지만 이 둘은 차이점이 존재한다.

exports의 경우 exports가 바라보는 객체가 module.exports이다. 
그래서 최종적으로 반환되는 것은 module.exports라고 보면 된다.

exports가 객체이기 때문에 키를 추가해서 내보내 주는 것은 가능하지만 직접 할당해서 내보내 준다면 module.exports로 전해지지 않아 다른 파일에서 불러오지 못할 수 도 있다.

// hello.js
exports = { const any = () => { console.log('any') } } // exports가 바깥으로 전달되지 않는다.

// index.js
const hello = require('./hello');
hello.any(); // 찾을 수 없음. 

exports에 직접 할당하게 되면 module.exports의 객체와 달라지게 되어 exports에 변경을 주고 내보내도 최종적으로 내보내지는 module.exports 객체에는 영향을 못 미치게 되어 에러가 발생할 수 있다.

그래서 exports로 내보내 주려면 exports 객체에 키 값을 추가해준다는 느낌으로 내보내 주어야 한다!

module.exports와 exports의 관계를 명확히 알고 있다면 이러한 혼란을 줄어들 것으로 보인다.