엔터프라이즈급의 SPA 개발을 위해서는 AMD를 필수적으로 사용해야 한다. 기존 "서점 샘플 응용하기 - 02"에서 진행하였던 자바스크립트 라이브러리들과 Backbone 기반 코드인 ride.js 파일을 Require.js를 이용하여 모듈화하고 재설정해 보자
1) index.html 변경하기
- 기존 index.html 내역
+ <%= %> 구문으로 underscore template 사용
+ jquery dateformat plugin 을 html에서 직접 호출
+ <script> 의존 라이브러리를 개발자가 알아서 체크하고 의존성이 있는 것을 더 밑으로 열거함
자바스크립트만을 가지고 SPA 를 개발할 때 수 많은 의존관계를 지금의 방식으로 설정하는 것은 한계가 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Backbone.js Cycle Riding for Dowon</title>
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div id="rides">
<div id="addRide">
<label for="coverImage">CoverImage: </label><input id="coverImage" type="file" />
<label for="title">Title: </label><input id="title" type="text" />
<label for="rider">Rider: </label><input id="rider" type="text" />
<label for="ridingDate">Riding date: </label><input id="ridingDate" type="text" />
<label for="keywords">Keywords: </label><input id="keywords" type="text" />
<button id="add">Add</button>
</div>
<script id="rideTemplate" type="text/template">
<img src="<%= coverImage %>"/>
<ul>
<li><%= title %></li>
<li><%= rider %></li>
<li><%= $.format.date(new Date(ridingDate), 'yyyy/MM/dd') %></li> <!-- jquery dataformat 직접 호출 -->
<li><%= keywords %></li>
</ul>
<button class="delete">Delete</button>
</script>
</div>
<!-- 자바스크립트의 의존관계에 따라 의존성이 있는 라이브러리를 맨밑에 열거한다 -->
<script src="js/jquery.js"></script>
<script src="js/jquery-dateformat.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/ride.js"></script>
</body>
</html>
- Require.js 방식으로 index.html 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Backbone.js Cycle Riding for Dowon</title>
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div id="rides">
<div id="addRide">
<label for="coverImage">CoverImage: </label><input id="coverImage" type="file" />
<label for="title">Title: </label><input id="title" type="text" />
<label for="rider">Rider: </label><input id="rider" type="text" />
<label for="ridingDate">Riding date: </label><input id="ridingDate" type="text" />
<label for="keywords">Keywords: </label><input id="keywords" type="text" />
<button id="add">Add</button>
</div>
<script id="rideTemplate" type="text/template">
<img src="<%= coverImage %>"/>
<ul>
<li><%= title %></li>
<li><%= rider %></li>
<li><%= ridingDate %></li> <!-- jquery dateformat은 ride.js 에서 포멧팅한다 -->
<li><%= keywords %></li>
</ul>
<button class="delete">Delete</button>
</script>
</div>
<!-- require.js 최상단에 위치 -->
<script src="js/require.js"></script>
<script>
// 환경설정
requirejs.config({
// 라이브러리 위치 (index.html 에서 상대경로)
baseUrl: './js/',
// baseUrl+paths 로 실제 라이브러리 파일위치를 지정 (value값에서 .js 생략함)
paths: {
jquery: 'jquery',
underscore: 'underscore',
backbone: 'backbone',
'jquery.dateformat' : 'jquery-dateformat'
},
// require.js 를 사용할 수 없는 이미 정의된 라이브러리를 require.js 방식으로 만들고자 할 때 설정
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'], // 의존하는 라이브러리 설정
exports: 'Backbone' // window객체에서 접근가능한 변수명 설정
},
'jquery.dateformat': { // jquery.dateformat 을 index.html 에서 사용하지 않고 ride.js 에서 사용하기 위해 설정
deps: ['jquery']
}
}
});
// define 펑션으로 정의한 ride.js 모듈을 사용하기 위하여 require 펑션을 호출한다
require(['ride'], function(ride) {
console.log('let\'s go riding');
});
</script>
</body>
</html>
2) ride.js 모듈화 하기
- 기존 ride.js
(function ($) {
var Ride = Backbone.Model.extend({
.. 중략 ..
})(jQuery); // 글로벌 변수 jQuery 를 받아서 사용함
- define 펑션을 사용하여 ride.js 모듈화 하기
// jquery, backbone을 사용한다
// jquery.dateformat은 jquery 플러그인으로 의존관계만 설정해 놓고 파라미터로 받지는 않는다
// 파라미터로 jquery=$, backbone=Backbone, underscore=_ 로 레퍼런스를 받고 있다
define(['jquery', 'backbone', 'underscore', 'jquery.dateformat'], function($, Backbone, _) {
var Ride = Backbone.Model.extend({
.. 중략 ..
renderRide: function(item){
// 화면에 포멧 변경로직을 넣지 않고 model에서 변경하여 준다
// update ridingDate to YYYY/MM/dd from YYYY-MM-DDT00:00:00.000Z
var ridingDate = item.get('ridingDate');
var date = $.format.date(new Date(ridingDate), 'yyyy/MM/dd');
item.set('ridingDate', date);
var rideView = new RideView({
model: item
});
this.$el.append(rideView.render().el);
},
.. 중략 ..
});
3) 호출하기
- 브라우져에서 호출
+ nodemon 으로 node 수행
$ nodemon server.js
18 Mar 11:40:03 - [nodemon] v0.7.2
18 Mar 11:40:03 - [nodemon] watching: /Users/nulpulum/development/backbone/riding
18 Mar 11:40:03 - [nodemon] starting `node server.js`
Express server listening on port 8080 in development mode
18 Mar 13:28:12 - [nodemon] restarting due to changes...
18 Mar 13:28:12 - [nodemon] /Users/nulpulum/development/backbone/riding/public/js/ride.js
+ http://localhost:8080/ : 하나더 추가해 보았다
<참조>
'Backbone.js' 카테고리의 다른 글
| [Backbone.js] Basic Tutorial & 개발 Workflow (2) | 2013.03.23 |
|---|---|
| [Backbone.js] 서점 샘플 응용하기 - 04 (Template 파일 별도로 만들기) (0) | 2013.03.20 |
| [Backbone.js] RequireJS를 통한 브라우져상의 모듈화 (0) | 2013.03.16 |
| [Handlebar.js] Client Side 템플릿 엔진 사용하기 (0) | 2013.03.16 |
| [Backbone.js] 서점 샘플 응용하기 - 02 (MongoDB 연결하기) (0) | 2013.03.15 |