기본 콘텐츠로 건너뛰기

[RequireJS] RequireJS 사용방법

웹 어플리케이션은 점점 더 데스크톱 어플리케이션과 같이 진화를 하고 있으며 많은 부분에서 패턴들이 적용되고 있다. 문제는 이런 과정에서 발생하게 되는 종속성을 어떻게 관리하여야 할지에 대한 문제가 점차 대두되고 있다.

자바스크립트는 이런 종속성을 관리할 수 있는 기능을 제공하지 않기 때문에 여러 가지 방법을 추가적으로 적용하여야 한다. RequireJS 도 이런 종속성을 관리하는 한 가지 방법이다. 대외적으로 많이 언급되고, 사용되는 것으로 판단이 되기 때문에 사용방법을 정리해 보도록 한다.

한 마디로 정리하면 “RequireJS 는 자바스크립트 파일/모듈 로더” 라고 생각하면 된다. 웹 브라우저에서 사용하는데 최적화되어 있지만 Rhino 나 Node 와 같은 다른 환경에서도 사용할 수 있다. RequireJS 를 사용하는 이유는 모듈 방식으로 스크립트를 로딩하므로 웹 어플리케이션의 종속성관리와 품질 및 성능을 향상시킬 수 있다.

언제 써야 할까?

일반적으로 자바스크립트를 하나의 파일로 작성하는 경우가 많다. 그런데 코드가 점점 더 방대해지면 나중에 수정하고 관리하는 것이 쉽지 않게 된다. 이를 위해서 기능이나 용도별로 여러 파일로 분할하는 선택을 하게 된다. 그런데 문제는 이런 상황이 되면 사용해야 하는 페이지에 스크립트 태그들이 증가를 하고 다른 파일에 정의된 기능을 사용하기 위해서 전역변수들도 같이 증가하게 된다. 따라서 페이지에서도 관련된 스크립트들과 변수들도 지저분하게 나열할 수 밖에는 없고, 또한 가장 큰 문제는 이런 스크립트 파일을 다운로드 하기 위해서 HTTP 요청이 네트워크 대역폭을 많이 차지하여 점점 더 페이지의 로딩이 느려지는 상황을 초래하게 된다.

아마도 대부분은 이런 상황에서 대안을 찾게 된다. 특히나 대형 사이즈의 웹 앱의 어플리케이션을 작성한다면 더욱 시급한 대안이 필요할 수 밖에는 없다. 이 때 필요한 부분이 AMD (Asysnchronous Module Definition) 방식의 스크립트 로더다. 즉, 비 동기적으로 스크립트를 로딩하기 위한 방법을 정의한 API 를 의미한다. 이 방식을 사용하면 여러 파일을 비동기 방식으로 병렬 다운로드가 가능하게 된다. 상대적으로 페이지의 로딩 시간이 단축되는 효과를 가져오게 된다.

RequreJS 역시 AMD 기반의 스크립트 로더다. 그럼 RequireJS는 언제 사용해야 할까?

단지 스크립트를 통해서 애니메이션이나 폼의 유효성검사와 100 라인이 넘지 않는 정도의 간단한 처리를 할 것이라면 RequireJS를 쓸 이유가 없다. 많은 뷰들이 존재하는 리치 웹 앱을 제작하는 경우라면 MVC 또는 MVVM 패턴의 적용과 RequireJS를 사용하는 것은 반드시 필요한 조건이 된다.

Start with RequireJS

RequireJS 를 사용하기 위해서는 아래와 같이 페이지에 스크립트 파일을 포함시키면 된다.

   1: <script type="text/javascript" src="require.js"></script>

실제 스크립트를 추가하는 경우는 아래와 같이 필요한 것들을 RequireJS 를 이용해서 추가하면 된다. 아래의 예는 jQuery를 CDN을 통해서 로드하는 것이다.




   1: <script type="text/javascript">

   2:     // jQuery Loading...

   3:     require(["http://code.jquery.com/jquery-1.10.1.min.js"], function() {

   4:         // jQuery가 로드된 후에 실행된다.

   5:         alert($().jquery);    // show jQuery version information after loading…

   6:     });

   7: </script>

위와 같이 처리를 하면 RequireJS 는 종속성이 존재하는지를 판단하고 종속성이 있는 것들을 먼저 가져온 후에 실제 로드 작업을 처리한다. 그리고 뒤에 명시된 function은 로드가 완료된 후에 호출되는 콜백 함수다.


RequreJS Modules


자바스크립트로 OOP 개발을 할 경우는 모듈 패턴 (Module Pattern) 을 사용한다. 이 패턴은 글로벌 네임스페이스를 지저분하게 만들지 않고 개체 안에 메서드와 속성을 갭슐화하기 위해 사용한다. (OOP 언어에서는 클래스라고 표현하겠지만…)

RequireJS 의 모듈 패턴도 동일하다. 전역 네임스페이스를 덮어쓰거나 오염시키는 일 없이 별도의 컨텍스트에서 자바스크립트를 실행한 뒤에 결과를 호출한 곳으로 반환하는 방식을 사용한다. 따라서 한정된 범위(well-scoped)의 객체를 선언한다는 것에서 차이가 존재한다.

당연히 모듈도 종속성이 존재하는 목록을 명시할 수 있고, 전역 개체에 대한 참조 없이도 모듈 상의 함수에 아규먼트를 받음으로써 처리가 가능하다. 아래의 예제는 jQuery를 모듈화로 처리한 것이다.




   1: // 임의 파일 또는 jQuery 파일을 아래와 같이 처리

   2: define(function() {

   3:     // original source code of jquery

   4:     ...

   5:  

   6:     // return jquery object

   7:     return jQuery.noConflict(true);

   8: });

위의 예제에서 가장 중요한 것은 jQuery가 전역 개체로 선언되는 것을 방지하기 위해서 jQuery.noConflict를 사용해서 jQuery 개체를 반환하는 점이다. 아래는 이 모듈을 사용하는 방법이다.




   1: <script type="text/javascript">

   2:     // 위에서 만든 모듈 파일 로드…

   3:     require(["jquery.module.js"], function($) {

   4:         // 전달된 $ 를 jQuery 변수로 할당한다.

   5:         var jQuery = $;

   6:         alert(jQuery().jquery);    // show jquery module's jquery object version

   7:     });

   8: </script>

위와 같이 모듈화를 처리하면 jQuery 개체가 콜백 함수 내부에서만 사용 가능하다는 점이다. 이런 방식으로 처리를 하면 어플리케이션 내에서 다른 모듈들과 충돌 없이 독립적으로 사용할 수 있게 된다. 만일 jQuery 를 두 개 버전으로 사용해야 하는 경우라면 아래와 같이 처리하면 된다.




   1: <script type="text/javascript">

   2:     // use jquery 1.10.1

   3:     require(

   4:         ["http://code.jquery.com/jquery-1.10.1.min.js"],

   5:         function($) {

   6:             var jQuery = $;

   7:             alert(jQuery().jquery);

   8:         }

   9:     )

  10:     // use jquery 1.10.2

  11:     require(

  12:         [["http://code.jquery.com/jquery-1.10.2.min.js"],

  13:         function($) {

  14:             var jQuery = $;

  15:             alert(jQuery().jquery);

  16:         }

  17:     )

  18:  

  19: </script>


Use Cases


우선 가장 기본적인 사용법부터 확인해 보도록 하자.




   1: <!DOCTYPE html>

   2: <html>

   3:     <head>

   4:         <title>RequireJS basic usage sample</title>

   5:     </head>

   6:     <body>

   7:         <!-- 

   8:             아래 data-main 속성에 지정된 파일은 RequireJS 가 가장 처음으로 로드할

   9:             파일을 의미한다.

  10:         -->

  11:         <script data-main="js/main.js" src="libs/require/require.js"></script>

  12:     </body>

  13: </html>

“data-main” 속성에 지정된 값은 RequireJS 가 로드된 후에 바로 실행할 자바스크립트 파일을 지정하는 것이다. 주로 RequireJS 에 대한 설정들을 처리한다. 아래의 main.js 예제는 일반적인 구성을 보여주는 것이다.




   1: // RequireJS 기본 설정

   2: requirejs.config({

   3:     /*

   4:         baseUrl : 자바스크립트 파일이 존재하는 기본 경로를 설정한다.

   5:         만일 "data-main" 속성이 사용되면 그 파일이 존재하는 경로가 기본 경로로 사용된다.

   6:     */

   7:     baseUrl: 'js',

   8:     

   9:     /*

  10:         paths: baseUrl 아래에서 직접 찾을 수 없는 모듈들을 위한 경로를 설정한다.

  11:         "/" 와 "http" 등으로 시작하지 않으면 baseUrl 에서 상대적인 경로로 인식한다.

  12:         개체형식으로 지정하고 define 에서 "모듈패스명/모듈파일명" 으로 지정하면 여기에

  13:         설정한 모듈명이 Path 로 변환된다.

  14:         * 기본적으로 파일명의 확장자인 ".js"는 생략한다.

  15:         Ex)

  16:         paths: {

  17:             "test": 'test/modules'

  18:         }

  19:         위와 같이 지정된 상태에서 define 에서 'test/jquery.module' 이라고 지정하면

  20:         실제로는 'test/modules/jquery.module' 경로를 검색한다.

  21:     */

  22:     paths: {

  23:         'text': '../libs/require/text',

  24:         'jquery': '../libs/jquery/jquery-1.10.1.msin',

  25:         'angular': '../libs/angular/angular-1.0.4'

  26:     },

  27:     

  28:     /*

  29:         shim: AMD (Asynchronous Module Definition) API 를 지원하지 않는 라이브러리의 경우 아래와 같이 shim 을 사용해서 모듈로 불러올 수 있다.

  30:         참고 - http://gregfranko.com/blog/require-dot-js-2-dot-0-shim-configuration/

  31:     */

  32:     shim: {

  33:         'angular': {

  34:             deps: ['jquery'],        // angular 가 로드되기 전에 jQuery가 로드 되어야 한다. (종속성 정의)

  35:             exports: 'angular'    // 로드된 Angular 라이브러리는 angular라는 이름의 개체로 사용될 수 있도록 설정

  36:         }

  37:     },

  38: });

  39:  

  40: // RequireJS 를 이용한 모듈 로드

  41: requirejs(

  42:     [

  43:         // 종속성이 걸려 있으므로 아래의 종속 모듈을 로드한다.

  44:         'text',        // 위의 Paths 선언, CSS 나 HTML 을 로드하기 위한 RequireJS 플러그인

  45:         'jquery',    // 위의 Paths 선언, jQuery는 AMD를 지원하기 때문에 이렇게 로드해도 jQuery 나 $ 로 호출이 가능하다.

  46:         'angular'    // 위의 Paths 선언, CSS 나 HTML 을 로드하기 위한 RequireJS 플러그인

  47:     ],

  48:     // 로드 후에 호출된 콜백 함수로 각 종속성을 대표하는 개체는 순서대로 인자로 전달된다.

  49:     function(text, $, angular) {

  50:         // 이 함수는 모든 종속성이 로드된 후에 호출된다.

  51:         // 주의할 점은 종속성이 몸두 로드된 후가 페이지가 로드된 후라는 보장은 없다는 것이다.

  52:         // 이 함수는 생략이 가능하다.

  53:         

  54:         // 페이지가 로드된 후에 동작하도록 처리

  55:         $(document).ready(function() {

  56:             var jQuery = $;

  57:             alert(jQuery().jquery);

  58:         });

  59:     }

  60: );

위의 코드에서 볼 수 있는 것과 같이 require.config 함수를 통해서 RequireJS 의 기본 설정을 변경할 수 있다.

물론 RequireJS 는 더 많은 옵션들이 존재한다. 여기 문서를 확인하고 자세한 사용법과 옵션들을 숙지하도록 한다.


간단한 MVC 앱 만들기 샘플.


샘플은 간단한 사용자 리스트 보기와 사용자 추가인 2개 뷰로 구성된 예제다. 우선 가장 기본이 되는 페이지 처리를 알아 보도록 하자.




   1: <!DOCTYPE html>

   2: <html>

   3:     <head>

   4:         <meta charset="utf-8">

   5:         <title>Simple MVC Structure with RequireJS</title>

   6:         <link rel="stylesheet" href="css/style.css" />

   7:     </head>

   8:     <body>

   9:         <div id="container">

  10:             <h1>Users</h1>

  11:             <nav><a href="#list">List</a> - <a href="#add">Add</a></nav>

  12:             <div id="app"></div>

  13:         </div>

  14:  

  15:         <script data-main="js/simpleMVC" src="libs/require/require.js"></script>

  16:     </body>

  17: </html>

“<nav>” 태그를 이용해서 뷰 이동을 처리할 것이고, 가장 아래쪽에 require.js 추가와 “data-main” 속성을 사용한 것을 볼 수 있다. 즉, Require.js 로드 후에 바로 “js/simpleMVC.js” 스크립트가 실행된다. 그리고 이 경로가 기준 경로로 동작하게 된다.

아래는 기본적인 CSS 설정을 나타낸 것이다.




   1: body { }

   2:  

   3: #container { font-family: Calibri, Helvetica, serif; color: #444; width: 200px; margin: 100px auto 0; padding: 30px; border: 1px solid #ddd; background: #f6f6f6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

   4:  

   5: h1, nav { text-align: center; margin: 0 0 20px; }

그럼 이제 simpleMVC.js 파일을 구성해 보도록 하자. 이 스크립트에서는 Require.js 에서 모듈을 어떻게 사용하는지를 보여주기 위한 것으로 간단한 더하기 모듈을 로드하도록 구성하고 있다.




   1: // 모듈 로드 처리

   2: require(

   3:     // 로드할 모듈 배열

   4:     ['./modules/Math.require.module.js'],

   5:     // 모듈이 로드된 후에 호출되는 콜백 함수

   6:     function (simpleMath) {

   7:         // 로드된 모듈은 파라미터로 전달된다.

   8:         console.log(simpleMath.add(1, 2));

   9:     }

  10: );

위의 코드를 보면 모듈 경로에 “./” 를 사용한 것을 볼 수 있다. 이렇게 경로를 처리하는 이유는 “data-main” 속성을 사용하면 해당 경로가 기본 경로로 잡히는 데 모듈은 다른 경로에 만들었기 때문에 경로를 상대 경로로 설정한 것이다. 이 때 중요한 것은 기본적으로 생략하던 “.js” 확장자를 상대 경로로 처리할 경우에는 반드시 표기해 주어야 한다는 점이다.

이제 간단한 더하기 함수를 구현한 모듈을 만들어 보자.




   1: // 아래의 주석 처리된 모듈을 RequireJS Module 처리

   2: define(function () {

   3:     function add(a, b) {

   4:         return a + b;

   5:     }

   6:  

   7:     return {

   8:         add: add

   9:     };

  10: });

  11:  

  12: /* 원본 스크립트 모듈

  13: var SimpleMath = (function () {

  14:     function add(a, b) {

  15:         return a + b;

  16:     }

  17: 

  18:     return {

  19:         add:add        // return object's private method

  20:     };

  21: })();

  22: 

  23: console.log(SimpleMath.add(1, 2));

  24: */

이 스크립트 파일은 Require.js 에서 사용할 수 있도록 모듈화를 처리한 예를 보여주기 위한 것이다. 간단하게 더하기 함수를 모듈로 구성하였다. (아래 주석은 원래 자바스크립트의 모듈 방식이고, 위에 코드가 Require.js 에서 사용하기 위한 모듈 방식이다) 차이점을 보면 우선 모듈을 운영하기 위한 변수 (SimpleMath) 가 사라졌고, define 이라는 함수의 파라미터로 모듈이 처리되도록 변경되었다.

이제 구성된 파일을 실행해 보면 아래와 같이 기본적인 화면과 크롬을 쓰고 있다면 개발자 도구의 콘솔창에 1 + 2 의 결과인 3이 출력된 것을 확인할 수 있다.

이미지 1

이제 기본적인 수행환경을 검증해 보았으므로 본격적으로 Front-end MVC 구성을 해 보도록 하자. 물론 backbone.js 등과 같은 MVC 프레임워크가 존재하지만, 이 글에서는 간단하게 Require.js 의 동작을 확인하기 위한 것이므로 정말 리얼하게 구성하는 것은 아니다. 아래와 같이 실제 구현을 위한 요소들을 생각해 볼 필요가 있다.



  • Controllers – 사용자 리스트와 추가가 목적이므로 ListController 와 AddController를 생각해 보면 된다. 물론 하나의 Controller에서 기능을 구현해도 된다.

  • Models – 사용자 정보를 관리하는 데이터 구조를 생각해 보면 된다.

  • Views – 사용자 리스트와 추가이므로 ListView, AddView 를 생각해 보면 된다.

가장 먼저 모델을 구성해 보도록 하자. 이 모델도 역시 모듈로 구성할 것이다. Require.js 가 목적이니까…




   1: define(function () {

   2:     function user(name) {

   3:         this.name = name || 'Default name';

   4:     }

   5:  

   6:     return user;

   7: });

간단하게 사용자 이름을 관리하는 모델을 표현한 것이고, 이름이 제공되지 않으면 “Default name”으로 처리하도록 하였다.

이제 이 모듈을 인식할 수 있도록 simpleMVC.js 파일에 추가하도록 한다.




   1: require(

   2:     ['./modules/User.require.model.js'],

   3:     function (user) {

   4:         var users = [

   5:             new user('모리스'),

   6:             new user('윈투게더'),

   7:             new user('MSFL')

   8:         ];

   9:  

  10:         for (var i = 0, len = users.length; i < len; i++) {

  11:             console.log(users[i].name);

  12:         }

  13:  

  14:         // 배열을 JSON으로 Serialize 하고 DB 처럼 사용하기 위해서 HTML5 의 Local Storage에 저장한다.

  15:         localStorage.users = JSON.stringify(users);

  16:     }

  17: );

위의 코드를 보면 사용자 모델 모듈을 로드하고 콜백함수에서 새로운 사용자 정보를 생성한 후에 HTML5 에서 제공하는 Local Storage를 사용하여 저장하고 있는 것을 볼 수 있다. 이렇게 처리하는 이유는 이후에 언급할 View에서 데이터를 표시할 수 있도록 하기 위한 것이다. 마치 DB를 사용하는 것처럼…

여기서 조심하여야 하는 부분은 JSON.stringify 로 만일 환경이 IE7 이라면 제대로 동작하지 않기 때문에 이를 지원하도록 “더글라스 클락포트”씨가 만들어 놓은 json2.js 를 Github 에서 다운로드 하여 추가로 사용하여야 한다.

이제 데이터 모델은 준비가 되었으니  실제 사용자를 출력하는 부분을 작성하여야 한다. MVC에서는 Controller를 통해서 View가 호출이 되므로 Controller가 호출이 되면 Controller가 View를 호출하는 방식으로 구성하도록 한다. (이런 처리 방법은 여러 가지가 존재한다. 이 방식이 올바르다는 것은 아니다)

아래는 컨트롤러를 구성한 것을 보여주고 있다.




   1: define(

   2:     ['./list.require.view.js'],

   3:     function (listView) {

   4:         function start() {

   5:             // HTML5 Local Storage에 저장된 사용자 배열 정보를 가져온다.

   6:             var users = JSON.parse(localStorage.users);

   7:             listView.render({ users: users });

   8:         }

   9:  

  10:         return {

  11:             start: start

  12:         };

  13:     }

  14: )

위의 코드를 보면 약간 특이한 구성이 있는데, 모듈 정의 (define) 에서 뜬금없이 배열과 함수를 사용하는 것이 마치 require 함수를 호출하는 것처럼 보일 것이다. Require.js 에서는 모듈 Define 에서도 필요한 (종속성이 있는) 모듈이 존재하면 모듈 내에서 직접 처리할 수 있도록 지원하고 있다.

따라서 Controller에서는 View 가 필요하므로 직접 모듈을 지정하고 있다. 위의 코드에서는 외부에서 호출할 수 있도록 start 함수를 노출하고 있고, start 함수 내에서는 Local Storage에 저장해 놓았던 users 를 View 모듈에 존재하는 render 함수를 호출하면서 전달하고 있다.

이제 View 모듈에서는 전달될 사용자 정보를 출력하는 작업을 하면 된다. 아래는 View 모듈을 구성을 보여주고 있다.




   1: define(function () {

   2:     function render(parameters) {

   3:         var appDiv = document.getElementById('app');

   4:         var users = parameters.users;

   5:  

   6:         var html = '<ul>';

   7:         for (var i = 0; i < users.length; i++) {

   8:             html += '<li>' + users[i].name + '</li>';

   9:         }

  10:         html += '</ul>';

  11:  

  12:         appDiv.innerHTML = html;

  13:     }

  14:  

  15:     return {

  16:         render: render

  17:     };

  18: });

전달된 Users 데이터를 동적으로 HTML 문장으로 구성하여 “#app” div 태그에 추가하고 있다. 물론 이런 방식으로 자바스크립트 내에서 HTML 코드를 직접 사용하는 것은 나중에 유지보수에 많은 문제점들이 존재하므로 이런 방식은 사용하지 말아야 하며, 요즘 많이 사용되고 있는 템플릿 방식을 사용하도록 하는 것이 좋다. 주로 jQuery-tmpl 이나 Mustache.js 등이 있다.

이제 다시 simpleMVC.js 파일에 Controller 모듈을 로드하고 start 함수를 호출하도록 구성하면 된다. 위에서 User 데이터 모듈을 추가했던 부분을 아래와 같이 구성하면 된다.




   1: require(

   2:     [

   3:         './modules/User.require.model.js',

   4:         './modules/list.require.controller.js'

   5:     ],

   6:     function (user, controller) {

   7:         var users = [

   8:             new user('모리스'),

   9:             new user('윈투게더'),

  10:             new user('MSFL')

  11:         ];

  12:  

  13:         for (var i = 0, len = users.length; i < len; i++) {

  14:             console.log(users[i].name);

  15:         }

  16:  

  17:         // 배열을 JSON으로 Serialize 하고 DB 처럼 사용하기 위해서 HTML5 의 Local Storage에 저장한다.

  18:         localStorage.users = JSON.stringify(users);

  19:  

  20:         // 컨트롤러의 처리를 호출한다.

  21:         controller.start();

  22:     }

  23: );

이제 실행을 해 보면 아래와 같은 결과를 얻을 수 있다.

이미지 2

이번에는 사용자를 등록하는 부분을 추가해 보도록 한다. 간단하게 이름을 입력하고 처리 버튼을 추가하고, 클릭 이벤트를 처리하면 된다.

아래의 코드는 Add Controller를 구성한 것을 보여주고 있다.




   1: define(

   2:     [

   3:         './add.require.view.js',

   4:         './User.require.model.js'

   5:     ],

   6:     function (addView, user) {

   7:         function start() {

   8:             addView.render();

   9:             bindEvents();

  10:         }

  11:  

  12:         function bindEvents() {

  13:             document.getElementById('add')

  14:                 .addEventListener('click', function () {

  15:                     var users = JSON.parse(localStorage.users);

  16:                     var userName = document.getElementById('user-name').value;

  17:                     users.push(new user(userName));

  18:                     localStorage.users = JSON.stringify(users);

  19:                     require(

  20:                         ['./modules/list.require.controller.js'],

  21:                         function (listController) {

  22:                             listController.start();

  23:                         }

  24:                     );

  25:                 }, false);

  26:         }

  27:  

  28:         return {

  29:             start:start

  30:         };

  31:     }

  32: );

List Controller 와 동일한 구성을 하고 있지만, 이벤트 처리에 대한 부분이 존재하는 것을 볼 수 있다. 문제는 추가 버튼을 눌렀을 때 이벤트 처리를 뷰에서 할 것인지, Controller에서 할 것인지에 대한 판단이 필요하다. 그러나 뷰는 결과를 처리하는 부분이므로 일반적으로는 Controller에서 처리하는 것이 좋다. 즉, 뷰에서는 Event Listener만 존재하고 여기서 Controller 나 이벤트 처리용 모듈의 비즈니스 로직을 호출하는 것이 좋다는 것이다. 이런 관점에서 바라보면 위의 코드에서 뷰에 존재하는 “#add” button 태그를 사용하고 있으므로 좋은 예는 아니다. 지금은 샘플이므로 이렇게 작성을 했지만 이는 좋은 코드가 아니다. 이런 문제점을 해결하는 패턴이 MVP, 또는 MVVM 이라고 볼 수 있다. 이 부분은 이번 정리의 대상이 아니므로 생략하도록 한다.

아래의 코드는 Add View 를 보여주고 있다.




   1: define(function () {

   2:     function render(parameters) {

   3:         var appDiv = document.getElementById('app');

   4:         appDiv.innerHTML = '<input id="user-name" /><button id="add">Add User</button>';

   5:     }

   6:  

   7:     return {

   8:         render:render

   9:     }

  10: });

이제 추가를 위한 처리도 완성이 되었다. 그러면 실행을 위해서 simpleMVC.js 에 모듈을 연결하면 된다. ???????

여기서 심각한 문제가 발생하는 것을 느낄 수 있을 것이다. List Controller 처리를 위해서 이미 모듈을 연결했고, List Controller 의 start 함수를 호출했던 것을 기억하고 있을 것이다. 여기에 또 끼워 넣으면 어떤 것이 실행되는 것이 맞을까?

이 문제는 실제 동작을 위해서는 Routing 이 필요하기 때문이다. 어떤 작업을 하려고 할 때 해당하는 Controller가 동작할 수 있어야 하기 때문이다. 그리고 이를 위해서는 서버의 MVC 와 같이 URL 요청을 식별할 수 없기 때문에 URL Hash 값을 이용해야 한다. 물론 Firefox, Chrome, Opera 브라우저에서는 HTML5 의 History 관리 기능(pushState, popState, replaceState)이 제공되기 때문에 굳이 Hash를 이용하지 않아도 된다.

요즘 최신 버전의 브라우저들은 HTML5 History Management를 지원하고 있고, 보통은 HTML5 HashChange 이벤트를 제공하고 있다. 그러나 오래된 버전의 브라우저들은 Hash 의 변경을 수동으로 관리해 주어야 한다. 무지하게 오래된 브라우저에서는 아마도 Hash 수동 감시와 IFrame 까지 동원해서 해결해야 할지도 모른다. (물론 이런 처리를 해 주는 jQuery 플러그인도 존재한다.)

simpleMVC.js 파일에 Routing 기능을 추가하기 위해서 Routing 모듈을 아래와 같이 구성하여야 한다.




   1: define(function () {

   2:     var routes = [

   3:         { hash: '#list', controller: 'list' },

   4:         { hash: '#add', controller: 'add' }

   5:     ];

   6:     var defaultRoute = '#list';

   7:     var currentHash = '';

   8:  

   9:     function startRouting() {

  10:         window.location.hash = window.location.hash || defaultRoute;

  11:         setInterval(hashCheck, 100);

  12:     }

  13:  

  14:     return {

  15:         startRouting:startRouting

  16:     }

  17: });

위의 코드에서 보이는 것과 같이 startRouting이 호출이 되면 100 밀리초마다 Hash 가 변경되었는지를 확인하고 일치하는 Controller 명으로 호출이 될 수 있도록 하는 것이다.

아래는 실제 Hash 값을 검증하고 Controller를 구동하는 부분을 추가한 Router 모듈을 나타내고 있다.




   1: define(function () {

   2:     var routes = [

   3:         { hash: '#list', controller: 'list' },

   4:         { hash: '#add', controller: 'add' }

   5:     ];

   6:     var defaultRoute = '#list';

   7:     var currentHash = '';

   8:  

   9:     function startRouting() {

  10:         window.location.hash = window.location.hash || defaultRoute;

  11:         setInterval(hashCheck, 100);

  12:     }

  13:  

  14:     function hashCheck() {

  15:         if (window.location.hash != currentHash) {

  16:             for (var i = 0, currentRoute; currentRoute = routes[i++];) {

  17:                 if (window.location.hash == currentRoute.hash) {

  18:                     localController(currentRoute.controller);

  19:                 }

  20:             }

  21:             currentHash = window.location.hash;

  22:         }

  23:     }

  24:  

  25:     function loadController(controllerName) {

  26:         require(

  27:             ['./modules/' + controllerName + '.require.controller.js'],

  28:             function (controller) {

  29:                 controller.start();

  30:             }

  31:         );

  32:     }

  33:  

  34:     return {

  35:         startRouting:startRouting

  36:     }

  37: });

이제 simpleMVC.js 파일에서 기존의 Model, Controller 모듈을 추가한 부분을 아래와 같이 교체하여 처리하면 된다.




   1: // 모듈 로드 처리

   2: require(

   3:     // 로드할 모듈 배열

   4:     ['./modules/Math.require.module.js'],

   5:     // 모듈이 로드된 후에 호출되는 콜백 함수

   6:     function (simpleMath) {

   7:         // 로드된 모듈은 파라미터로 전달된다.

   8:         console.log(simpleMath.add(1, 2));

   9:     }

  10: );

  11:  

  12: //require(

  13: //    [

  14: //        './modules/User.require.model.js',

  15: //        './modules/list.require.controller.js'

  16: //    ],

  17: //    function (user, controller) {

  18: //        var users = [

  19: //            new user('모리스'),

  20: //            new user('윈투게더'),

  21: //            new user('MSFL')

  22: //        ];

  23:  

  24: //        for (var i = 0, len = users.length; i < len; i++) {

  25: //            console.log(users[i].name);

  26: //        }

  27:  

  28: //        // 배열을 JSON으로 Serialize 하고 DB 처럼 사용하기 위해서 HTML5 의 Local Storage에 저장한다.

  29: //        localStorage.users = JSON.stringify(users);

  30:  

  31: //        // 컨트롤러의 처리를 호출한다.

  32: //        controller.start();

  33: //    }

  34: //);

  35:  

  36: require(

  37:     [

  38:         './modules/User.require.model.js',

  39:         './modules/router.require.module.js'

  40:     ],

  41:     function (user, router) {

  42:         var users = [

  43:             new user('모리스'),

  44:             new user('윈투게더'),

  45:             new user('MSFL')

  46:         ];

  47:  

  48:         localStorage.users = JSON.stringify(users);

  49:  

  50:         router.startRouting();

  51:     }

  52: );

이제 동작을 위한 Reouting 부분도 완성이 되었다. 위의 샘플 코드에서 Add 후에 List 를 보여주기 위한 부분에서 수동으로 Controller를 변경하여 호출한 부분이 존재하는데 이 부분도 Hash 를 변경하는 것으로 변경해 주면 된다.

이제 실제 구동을 해 보면 완전하게 동작하는 샘플을 볼 수 있을 것이다. 몰론 오류가 발생하면 해결해야 하는 능력은 기본이다.


결론.


RequireJS 외에도 Curl.js 라이브러리 역시 유사한 문법으로 모듈화가 가능하고, HeadJS, LazyLoad, LABjs 등도 동적으로 스크립트 로딩이 가능하다. 그러나 인지도나 지지도에서는 단연 RequireJS 가 앞서고 있다.

모듈화와 동적 스크립트 로딩을 이용하면 좀 더 정리되고, 성능을 개선하는 방식의 웹 어플리케이션을 작성하는데 많은 도움이 될 것이다. 물론 제대로 알고, 제대로, 제 때에 사용한다면 말이다…

그리고 MVC 어플리케이션에 대한 간단한 샘플은 샘플일 뿐이다. 실제 backbone, Knockout, Batman, Angular 등과 같은 범용적이고 훌륭한 프레임워크들이 존재하므로 적절하게 잘 활용하면 될 것이다.

댓글