[펌] RequireJS로 모듈화 하자

 

---

 

 출처: http://funnygangstar.tistory.com/m/post/view/id/154

---

 

 

 

 

RequireJS로 모듈화 하자

 

 

앞서 RequireJS를 간단히 언급한 바 있는데 RequireJS를 한마디로 정의하면

‘AMD 스펙을 구현한 자바스크립트 모듈 로더’라고 할 수 있다.

 

Asynchronous Module Definition의 약어인 AMD는 비동기적으로 의존 모듈을 로드할 수 있도록 하는 메커니즘을 제공하고, 동시에 모듈을 어떻게 정의할 지에 관한 스펙이다.

결론적으로 AMD 스펙의 구현체가 RequireJS다.

 

RequireJS를 사용했을 때의 가장 큰 장점은 자바스크립트 파일이 많아지더라도 더 이상

스파게티 코드가 아닌 모듈화된 개발이 가능하다는 점과 자바스크립트 모듈 간의 의존성 파악이

매우 수월하다는 점, 그리고 HTML 파일에서 자바스크립트를 포함시킬 때 순서에 신경 쓰지 않아도 된다는 점이다.

 

서로 간의 의존 관계에 따라 자바스크립트 포함 순서를 지켜줘야 하는 작업은 자바스크립트 파일이

많아질수록 개발자에겐 정말 큰 스트레스로 다가온다.

 

사용하는 방법은 매우 간단하다. AMD에서는 모듈을 정의할 수 있는 define이라는 함수를 규정하고 있는데 AMD의 구현체인 RequireJS 역시 define이라는 함수를 제공하고 있다.

 

<리스트 9> AMD 스펙에서는 define이라는 함수를 통해 모듈을 정의한다.

define(id?, dependencies?, factory);

  

<리스트 9>에서 볼 수 있듯이 define 함수는 세 가지 파라미터로 구성돼 있다. id는 해당 모듈의 아이디이며 dependencies는 이 모듈에서 의존하는 모듈들의 아이디이다. 마지막으로 factory는 함수 또는 오브젝트로서 실제로 이 모듈의 로직이 되는 부분이다.

 

 

<리스트 10> RequireJS를 사용한 모듈 정의

define(     ['jquery', './util', 'knockout'],     function ($, util, ko) {         var             currentViewId = ko.observable();               getView = function (viewId) {                 // 생략             },               hideAllView = function () {                 // 생략             },               showView = function (viewId) {                 // 생략             };           return {             showView     :showView,             getView      : getView,             currentViewId: currentViewId         };     } );

  

<리스트 10>은 샘플 소스 중에서도 presenter.js 파일의 일부이다. 모듈 아이디는 생략했고

(모듈 아이디를 생략하면 다른 모듈에서 참조할 때, 파일이 위치한 경로와 파일 이름을 사용하면 된다) 의존 모듈은 jQuery, util, knockout, 그리고 factory 파라미터에는 실제 모듈의 로직을 담당하는 함수가 정의돼 있는 것을 확인할 수 있다.

 

여기서 한 가지 눈 여겨 볼 부분은 자바스크립트에서 널리 쓰이고 있는 Revealing Module Pattern을 사용해서 함수를 캡슐화하고 있는 부분이다. return 구문을 사용해 리터럴 객체를 반환하고 여기에 정의된 함수들 만이 public 함수이다. 그렇지 않은 hideAllView 함수는 presenter.js 내부에서만 사용하는 일종의 private 함수이다. 또 변수를 선언할 때 사용하는 var 키워드를 함수 최상단에 한번만 선언함으로써 var 키워드를 사용하지 않아 의도치 않게 생성되는 글로벌 변수를 방지할 수 있는 Single var 패턴도 사용됐다. 자바스크립트 프로그래밍에서는 매우 널리 쓰이고 있는 패턴들이니

꼭 알아두도록 하자.

 

앞서 Jam은 RequireJS를 기본적으로 지원하고 있다고 언급한 적이 있는데 <리스트 10>에서 확인할 수 있듯이 jQuery나 Knockout 모듈을 사용할 때 상위 폴더 경로를 입력하지 않고 간단하게 ‘jquery’ 그리고 ‘knockout’으로 사용했다. 이는 Jam에서 관리하는 모듈들의 경로를 이미 jam install 명령어를 통해 패키지를 설치할 때 require.js 파일에 지정해 놓았기 때문에 가능한 것이다.

 

또한 개발자가 직접 정의한 모듈들 중에서 같은 폴더에 위치하고 있는 경우에는 ‘./utils’와 같이 현재 폴더를 의미하는 슬래쉬를 사용하면 된다. 다른 폴더에 위치하고 있는 경우에는 baseUrl(package.json에서 설정하거나 require.config() 함수에서 설정함)을 기준으로 절대적인 폴더 경로를 지정해 주면 된다. 예를 들어 baseUrl로 지정된 app이라는 폴더 밑에 vms/detail.js 파일을 참조하려면 ‘vms/detail’와 같은 방식으로 지정하면 된다. RequireJS의 더욱 자세한 사용법은 RequireJS 사이트(http://www.requirejs.org)와 본 샘플 소스를 참조하길 바란다.