toggle menu

[JavaScript] JavaScript 모듈의 양대 산맥, CommonJS와 AMD

2014. 9. 2. 20:43 JavaScript
CommonJS와 AMD는 자바스크립트 어플리케이션에서 어떻게 스크립트 간의 디펜던시를 선언할지에 대한 일종의 스펙(형식)이다. RequireJS는 AMD와 호환성을 갖는 스크립트 로더이고, curljs는 CommonJS에 예로 볼 수 있다.

Addy Osmani의 책을 통해 이 두가지에 대한 예시를 발췌해보았다.


CommonJS 방식
// 종속성을 갖는 모듈인 "package/lib" 는 아래와 같이 require 를 통해 호출해서 변수에 담을 수 있다.
var lib = require( "package/lib" );

// 로드된 종속 모듈은 아래와 같이 사용할 수 있다.
function foo(){
    lib.log( "hello world!" );
}

// 생성된 foo 라는 함수는 exports 라는 명령을 통해 foobar 라는 다른 모듈로 추출될 수 있다.
exports.foobar = foo;




AMD 방식
// 종속성을 갖는 모듈인 "package/lib" 는 아래와 같이 모듈 선언부 안에
// 종속 라이브러리를 선언하는 첫번째 파라메터에 넣어서 호출할 수 있다.
// 호출된 "package/lib" 는 콜백 함수의 lib 라는 변수에 담긴다.
define(["package/lib"], function (lib) {

    // 로드된 종속 모듈은 아래와 같이 사용할 수 있다.
    function foo() {
        lib.log( "hello world!" );
    }

    // 생성된 foo 라는 함수는 return을 통해 foobar 라는 다른 모듈로 추출될 수 있다.
    return {
        foobar: foo
    }
});

위와 같이 모듈을 선언하지만, 선언된 모듈들을 처음 로드하는 것은 아래와 같이 require 를 사용한다.

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});


사실상 CommonJS는 단순한 API 선언이나 그것이 다루는 한 부분을 넘어선다. AMD 사실 CommonJS list의 모듈 형식에 대한 스펙으로 시작했지만, 결국 완전한 합의에는 도달하지 못하고 개선 작업은 amdjs 그룹으로 옮겨지게 되었다.

CommonJS는 특유의 동기적인 특성으로 인해 서버 사이드 개발에 좀더 적합하고 AMD는 비동적인 특성으로 인해 클라이언트 사이드 개발에 좀더 적합한 편이다. 실제로 node.js 는 기본적으로 CommonJS 방식을 사용하고 있다.

사실 node.js 에서 사용하고 있는 종속성 관리 방식이 무엇인가를 찾아보다가 약간의 번역+첨가로 이번 포스팅을 하게 되었다.

위의 대략적인 개요만으로는 전체적인 자바스크립트 종속성 관리의 역사적(?) 흐름을 잡기 어려울 수 있다. 
가장 잘 정리된 문서는 네이버 개발자 블로그의 포스팅이다. 실제 사용에까지 들어가려면 좀더 다른 문서를 참고해야겠지만, 역사적 흐름과 각각의 특징은 이 포스팅으로 충분히 이해할 수 있다.

http://helloworld.naver.com/helloworld/12864

 

아래의 링크도 AMD 방식과 자바스크립트 모듈 패턴을 이해하는데 도움이 된다.


JavaScript 관련 포스팅 더보기