본문으로 바로가기

RequireJS 의 모듈

category Web TechRequireJS 9년 전


requireJS 모듈 정의와 호출

Javascript는 사용하기 편한만큼 편함에 너무 의존하다보면 돌이킬 수 없는 스파게티 코드나 중복 코드 발생이 많아질 수 있어, 모듈 프로그래밍이 필요합니다. 

RequireJS는 이러한 경우의 한 대안이 될 수 있습니다. RequireJS를 사용하면 모듈 생성/호출 등 관리를 통해 좀 더 체계적인 프로그래밍을 가능하게 해 주며, 브라우저 지원 또한 IE 6 이상 지원합니다.




RequireJS에서 모듈 정의/호출에 사용되는 함수


- 모듈 정의 Module Define

- 모듈 호출 Module Require



모듈 정의 / 호출 방식은 다음과 같습니다.



javascript
/**
 * --------------------------------------
 * 모듈 정의
 * define(id, [dependencies], callback);
 * 모듈 호출
 * require([dependencies], callback);
 * --------------------------------------
 */
javascript
/**
 * ------------------------------------------------
 * 모듈 정의 방식
 * define() 함수는 모듈을 정의할 때 사용한다.
 * 인자값 id, [], 콜백함수
 * id 는 모듈이 있는 파일 경로(파일명)
 * id 생략가능하다.
 * define(id, [dependencies], callback);
 * ------------------------------------------------
 */
javascript
/**
 * -----------------------------------------
 * 모듈 호출 방식
 * require() 는 모듈을 호출할 때 사용한다.
 * require([dependencies], callback)
 * 첫번째 인자값은 배열, 문자열로 설정
 * -----------------------------------------
 */



main.js - 환경설정 및 모듈 호출/정의 코드


javascript
/**
 * 환경설정
 */
require.config({
    // 모듈의 단축 경로 지정 또는 이름 별칭(Alias)을 지정
    paths: {
        jquery: 'libs/jquery.min'
    }
});

/**
 * 모듈 호출: jQuery 호출 이후 코드 수행
 */
require(['jquery'], function($) {
    // jQuery 를 호출한 이후 수행되는 함수 코드
});

/**
 * 모듈 정의 : define('id', [dependencies], module)
 */
define('jquery.slider',  ['jquery'], function($) { // id 값은 jquery.slider 란 파일명을 문자열로 경로 지정
    // jQuery 플러그인 모듈 제작
    $.fn.slider = function() { ... }

});


모듈 호출 및 정의는 각각의 모듈 파일별로 관리하여 호출/정의할 수 있으며 의존 모듈이 있는 경우 [dependencies] 인 콜렉션 타입에 문자열로 path 에 지정해 놓은 별칭(alias)을 설정하거나 baseUrl 을 기준으로한 모듈 경로를 지정하여 사용합니다.


그리고 모듈을 정의할 때 첫번째 인자값의 ID 는 생략가능하며 모듈 파일명 기준으로 한 경로를 문자열로 지정하여 줍니다.




config 환경설정을 별도 관리할 경우

config.js

javascript
/**
 * ---------------------
 * config.js
 * ---------------------
 */
require.config({
    paths: {
        jquery: 'libs/jquery.min'
    }
});



main.js

javascript
/**
 * ---------------------
 * main.js
 * ---------------------
 */
require(['config'], function() {
    // 모듈 호출
    require(['jquery'], function() {
        // 모듈 호출 이후, 콜백 함수 작성
    });
});



실무 프로젝트 간단 예제

다음과 같은 프로젝트 디렉터리 구조를 갖고 RequireJS 를 활용한 코드를 알아보도록 하겠습니다.




index.html 파일

html
<!DOCTYPE html>
<html>
<head lang="ko-KR">
    <meta charset="UTF-8">
    <title>Require.js 시작하기</title>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/libs/require.js" data-main="js/main"></script>

</head>
<body>

</body>
</html>



main.js 파일

javascript
/**
 * --------------------------------
 * requireJS 환경설정
 * --------------------------------
 */
require.config({

    // 모듈의 기본 경로를 설정
    'baseUrl' : 'js',

    // 모듈의 단축 경로 지정과 모듈의 별칭(Alias)을 설정
    'paths' : {
        'jquery' : [
            'libs/jquery-1.11.3.min'
        ],
        'modernizr' : 'libs/modernizr',
        'detectizr' : 'libs/detectizr',
        'ieChecker' : 'modules/ieChecker'

    },

    /**
     * AMD를 지원하지 않는 JS 라이브러리 AMD 호환 설정
     * @type {Object}
     */
    // shim 설정 (두 사물사이를 연결해주는 끼움쇠) html5Shim 과 같은 것이다.
    // modernizr 는 AMD 방식을 사용하지 않기 때문에 외부로부터 모듈을 호출할 필요가 있기 때문에 shim 에 등록해야한다.
    // 즉, AMD 방식을 채택하지 않는 사용자 모듈이나 라이브러리, 플러그인들은 shim 에 등록해줘야 한다.
    'shim' : {
        'modernizr' : {
            exports : 'Modernizr' // 모더나이저의 클래스가 Moderizr 이므로 Modernizr 를 등록한다.
        },

        'detectizr' : {
            exports : 'Detectizr', // 디텍타이저의 클래스는 Detectizr 이다.

            // deps(dependencies 의 약어) 의존 모듈을 등록한다.
            // Detectizr 는 Modernizr 의 플러그인으로 Modernizr 에 의존하는 모듈인 셈이다.
            // paths에 등록된 별칭이 등록한다.
            deps : ['modernizr']
        }
    },

    waitSeconds: 15

});

/**
 * --------------------------------
 * RequireJS 모듈 관리 (의존성 관리)
 * --------------------------------
 */
require(['detectizr', 'jquery', 'ieChecker'], function(Detectizr, $, ieChecker) {

    //Detectizr.detect();

    var $html = $('html'),
            $body = $('body');

    //  요소를 체크: Modernizr, Detectizr가 수행한 일

    // 사용자의 웹브라우저가 HTML 비디오 지원하나요?
    if ($html.hasClass('video')) {
        console.log('HTML5 Video를 지원해!!');
    } else {
        console.log('HTML5 Video를 지원 안해!!');
    }

    // 사용자는 모바일에서 접근했나요?
    if ($html.hasClass('desktop')) {
        console.log('데스크톱에서 접근했어요');
    } else {
        console.log('모바일에서 접근했어요');
    }

    // jQuery를 활용하여 DOM 조작
    $body
            .addClass('using-requirejs')
            .height(window.innerHeight)
            .css({
                'background' :'#e45e26',
                'color' : '#fff'
            })
            .append('<h1>wow! RequireJS</h1>');
});

require([
        'modules/isJquery',         // 함수 반환
        'modules/isJqueryVersion'  // jQuery 버전 반환
    ],
    // 콜백 함수의 인자값은 배열인자에 설정된 것을 차례대로 받는다.
    function (
            isJquery,
            isJqueryVersion
    ) {
        console.log(isJquery(), isJqueryVersion);
});


위의 코드 중 마지막 require 호출은 config 설정의 path 에 등록하지 않고 isJquery.js 와 isJqueryVersion.js 모듈을 호출하고 있습니다.



isJquery.js 파일

javascript
// 모듈 정의
define(['jquery'], function() {
    function isJquery () {
        return !!window.jQuery;
    }
    return isJquery;
});


isJquery 모듈은 제이쿼리에 의존합니다.



isJqueryVersion.js 파일 모듈 정의 코드

javascript
// 모듈 정의
define(['jquery'], function($) {
    return $.fn.jquery;
});



Jaehee's e-room


저작자표시 변경금지

Web TechRequireJS카테고리의 다른글

MVC requireJS - 자바스크립트 모듈 로더  (0) 2016.01.27
RequireJS - module loader(모듈 로더)  (0) 2016.01.25
RequireJS - AMD의 이해와 개발  (0) 2015.06.11
javaScript 모듈의 양대 산맥,CommonJS vs AMD  (0) 2015.06.11
댓글
Web Club
블로그 이미지 jaiyah 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바