• commonJS : JavaScript를 브라우저에서뿐만 아니라, 서버사이드 애플리케이션이나 데스크톱 애플리케이션에서도 사용하려고 조직한 자발적 워킹 그룹으로 JavaScript를 표준화를 목표로한다.

CommonJS의 주요 목표는 모듈을 어떻게 정의하고, 어떻게 사용할 것인가에 대한 것이다.

[모듈화]

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

먼저 모듈은 자신만의 독립적인 실행 영역이 있어야 한다. 따라서 전역변수와 지역변수를 분리하는 것이 매우 중요하다.

서버사이드 JavaScript의 경우에는 파일마다 독립적인 파일 스코프가 있기 때문에 파일 하나에 모듈 하나를 작성하면 간단히 해결된다.

서버사이드 JavaScript 환경을 전제로한 module화 및 사용

즉 서버사이드 JavaScript는 아래와 같이 작성하더라도 전역변수가 겹치지 않는다.

아래 두 모듈(파일) 사이에 정보 교환이 필요하다면, exports라는 전역객체를 통해 공유하고 공유된 함수를 다른 모듈에서 사용하려면 require() 함수를 이용한다.

fileA.js

const a = 1;
const b = 2;

exports.sum = (c, d) => a + b + c + d;

fileB.js

const a = 3;
const b = 4;

// fileA를 불러와서 moduleA라는 변수에 담아준다.
const moduleA = require("fileA");

moduleA.sum(a, b) // 10 // 1+2+3+4

브라우저에서의 비동기 모듈 로드 문제

JavaScript가 브라우저에서 동작할 때는 서버 사이드 JavaScript와 달리 파일 단위의 스코프가 없다. 또한 표준 < script > 태그를 이용해 앞에서 예로 든 fileA와 fileB를 차례대로 로드하면, fileB의 변수가 fileA의 변수를 모두 덮어쓰게 되는 전역변수 문제도 발생한다.

이런 문제를 해결하려고 CommonJS는 서버 모듈을 비동기적으로 클라이언트에 전송할 수 있는 모듈 전송 포맷(module transport format)을 추가로 정의했다. 이 명세에 따라 서버사이드에서 사용하는 모듈을 다음 예의 브라우저에서 사용하는 모듈과 같이 전송 포맷으로 감싸면 서버 모듈을 비동기적으로 로드할 수 있게 된다.

• 서버사이드에서 사용하는 모듈

// complex-numbers/plus-two.js

var sum = require("./math").sum;  

exports.plusTwo = a => sum(a, 2)

• 브라우저에서 사용하는 모듈

// complex-numbers/plus-two.js

require.define({"complex-numbers/plus-two": function(require, exports){

//콜백 함수 안에 모듈을 정의한다.
var sum = require("./complex-number").sum;  

exports.plusTwo = function(a){  
return sum(a, 2);  
};

},["complex-numbers/math"]);
//먼저 로드되어야 할 모듈을 기술한다.

브라우저에서 사용하는 모듈 부분에서 특히 주목해야 할 것은 require.define() 함수를 통해(함수 클로저) 전역변수를 통제하고 있다는 사실이다.

출처 : https://d2.naver.com/helloworld/12864