기본 콘텐츠로 건너뛰기

[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:

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




   1:

위와 같이 처리를 하면 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:

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




   1:


Use Cases


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




   1: DOCTYPE html>

   2: <html>

   3:     <head>

   4:         <title>RequireJS basic usage sampletitle>

   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 RequireJStitle>

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

   7:     head>

   8:     <body>

   9:         <div id="container">

  10:             <h1>Usersh1>

  11:             <nav><a href="#list">Lista> - <a href="#add">Adda>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>

“
라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

OData 에 대해서 알아보자.

얼마 전에 어떤 회사에 인터뷰를 하러 간 적이 있었다. 당시 그 회사는 자체 솔루션을 개발할 기술인력을 찾고 있었고 내부적으로 OData를 사용한다고 했다. 좀 창피한 이야기일 수도 있지만 나름 기술적인 부분에서는 많은 정보를 가지고 있다고 했던 것이 무색하게 OData란 단어를 그 회사 사장님에게서 처음 들었다. 작고, 단순한 사이트들만을 계속해서 작업을 하다 보니 어느덧 큰 줄기들을 잃어버린 것을 느끼기 시작했다. 명색이 개발이 좋고, 기술적인 기반을 만들려고 하는 인간이 단어조차도 모른다는 것은 있을 수 없는 것이라서 다시 새로운 단어들과 개념들을 알아보는 시간을 가지려고 한다. OData (Open Data Protocol) 란? 간단히 정리하면 웹 상에서 손쉽게 데이터를 조회하거나 수정할 수 있도록 주고 받는 웹(프로토콜)을 말한다. 서비스 제공자 입장에서는 웹으로 데이터를 제공하는 방식으로 각 포탈 사이트들이 제공하는 OPEN API 포맷을 독자적인 형식이 아니라 오픈된 공통규약으로 제공 가능하며, 개발자는 이 정보를 다양한 언어의 클라이언트 라이브러리로 어플리케이션에서 소비할 수 있도록 사용하면 된다. 공식 사이트는 www.odata.org 이며 많은 언어들을 지원하고 있다. 좀더 상세하게 정의를 해 보면 OData는 Atom Publishing Protocol  (RFC4287) 의 확장 형식이고 REST (REpresentational State Transfer) Protocol 이다. 따라서 웹 브라우저에서 OData 서비스로 노출된 데이터를 볼 수 있다. 그리고 AtomPub 의 확장이라고 했듯이 데이터의 조회만으로 한정되는 것이 아니라 CRUD 작업이 모두 가능하다. Example 웹 브라우저에서 http://services.odata.org/website/odata.svc 를 열어 보도록 하자. This XML file does not appear to have any style in...
댓글 6개
자세한 내용 보기

C# 에서 Timer 사용할 때 주의할 점.

예전에 알고 지내시던 분의 질문을 받았다. Windows Forms 개발을 하는데, 주기적 (대략 1분)으로 데이터 요청을 하는 프로그램을 작성하기 위해서 Timer 를 사용하는데, 어떤 기능을 처리해야 하기 때문에 Sleep 을 같이 사용했다고 한다. 여기서 발생하는 문제는 Sleep 5초를 주었더니, Timer 까지 5초 동안 멈춘다는 것이다. Timer 라는 것은 기본적으로 시간의 흐름을 측정하는 기능이기 때문에 Sleep 을 했다고 해서 Timer 가 멈추는 일은 생겨서는 안된다. 그러나 실제 샘플을 만들어 보면 ... Timer 가 Sleep 만큼 동작이 멈추는 것을 확인할 수 있다. Windows Forms 는 UI Thread 를 사용하는 것으로 최적화 되어 있으며 여기서 Timer 를 쓰면 UI Thread 에 최적화된 System.Windows.Forms.Timer 가 사용된다. 여기서 문제의 발생이 시작되는 것이다. Sleep 을 사용하게 되면 UI Thread 가 Sleep 이 걸리기 때문에 여기에 속한 Timer 까지도 멈추는 것이다. 이런 문제를 해결하기 위해서는 System.Threading.Timer 를 사용해야 한다. 이 Timer 는 별도의 Thread 에서 동작하기 때문에 Sleep 의 영향을 받지 않는다. 언뜻 보면 쉬운 해결 방법인 것 같지만 Thread 가 분리되었기 때문에 Timer 가 돌아가는 Thread 에서 UI Thread 의 메서드나 컨트롤에 접근하기 위해서는 별도의 명령을 사용해야 하는 문제가 존재한다. 자~ 그럼 여기서 Timer 에 대해서 다시 한번 정리해 보도록 하자. .NET 에서 제공하는 Timer 들 .NET 에서는 기본적으로 3가지 Timer를 제공하고 있다. (MSDN) System.Windows.Forms.Timer - 사용자가 지정한 간격마다 이벤트를 발생시키며 Windows Forms 응용 프로그램에서 사용할 수 있도록 최적화 되어 있다. System...
댓글 7개
자세한 내용 보기

[Logging] NLog 사용법 정리...

SCSF 에는 기본적으로 Enterprise Library가 사용된다. 예전에도 그랬지만 기능은 훌륭하고 많은 부분에서 최적화(?)된 것일지도 모르지만, 역시나 사용하기에는 뭔가 모르게 무겁고, 사용하지 않는 기능이 더 많다라는 느낌을 지울수가 없다. 이번 프로젝트도 SCSF를 기반으로 하고 있지만, Enterprise Library를 걷어내고 각 부분에 전문화된 오픈 소스를 사용하기로 하였다. 예전에는 Log4Net을 사용했지만, 대량 사용자 환경에서는 메모리 누수와 기타 문제점이 존재한다는 MS 컨설턴트(?)의 전해진 말을 들은 후로는 사용하지 않는다. 대안으로 사용하는 것이 NLog 이다. 조금 후에는 3.0 버전도 나온다고 홈 페이지에 기재되어 있지만, 그 때가 되면 프로젝트는 끝나기 때문에 현재 2.1.0 버전을 사용하기로 했다. [원본 출처] http://cloverink.net/most-useful-nlog-configurations-closed/ 위의 참조 자료에는 다양한 정보들이 존재하므로 꼭 링크를 통해서 관련된 정보를 확인하고 이해하는 것이 좋을 듯 하다. 여기서는 당장 필요한 부분만을 정리하도록 한다. [ Logger 찾기 ] 기본적으로 Logger가 존재하는 클래스를 기반으로 Logger 정보를 구성한다. Logger logger = LogManager.GetCurrentClassLogger(); 주로 Namespace 기반으로 Logger를 설정하는 경우에 유연하게 사용할 수 있다. 또 다른 방법으로는 지정한 문자열로 특정 Logger를 직접 선택하는 방법도 제공된다. 이를 혼용해서 Namespace와 직접 지정 방식을 같이 사용할 수도 있다. 물론 Logger 환경 설정에서 Wildcard (*)를 지정할 수도 있다. Logger logger = LogManager.GetLogger("Database.Connect"); Logger logger = LogManager.Get...
댓글 1개
자세한 내용 보기