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 Tech > RequireJS' 카테고리의 다른 글
| 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 |
