블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

2013. 3. 23. 17:12 Backbone.js

Backbone.js MV* 각 요소를 직접 개발해보고 전체 흐름에 대하여 알아보자



1. Backbone.Model

  - initialize : 초기화 model new 생성시 자동 호출 

  - save : 서버로 전송

  - fetch : 서버에서 가져오기

  - sync : 강제로 서버와 값을 맞춤 

  - id : 속성을 통하여 전송 아이디 설정가능 (MongoDB 를 사용하면 "idAttribute: _id" 로 설정한다)

  - defaults : model 객체의 기본값을 지정

  - validate : 데이터 정합성 체크

  - 테스트

    + index.html 준비 : jquery, underscore, backbone 순으로 최신버전을 다운로드 받아서 js 폴더 밑에 놓는다 

<!DOCTYPE html>

  <html>

  <head>

    <meta charset="utf-8">

    <title>hello-backbonejs</title>

  </head>

  <body>


    <script src="/js/jquery.js" type="text/javascript"></script>

    <script src="/js/underscore.js" type="text/javascript"></script>

    <script src="/js/backbone.js" type="text/javascript"></script>


    <script src="/2.js" type="text/javascript"></script>


  </body>

  </html>


    + 2.js 백본 코딩

(function($) { 

    var UserModel = Backbone.Model.extend({

        url: '/user',

        defaults: {

            name: '',

            email: ''

        }

    });


    var user = new UserModel();

    var userDetails = { name: "dowon", email: "ysyun@yuwin.co.kr"};

    user.save(userDetails, {

    success: function(user) {

    alert(user.toJSON());

    },

    error: function(user){

    alert(user.toJSON());

    }

    });


    var user1 = new UserModel({id: 1});

    user1.fetch({

    success: function(user) {

    alert('fetch user name : ' + user.get('name'));

    },

    error: function(user){

    alert(user.toJSON());

    }

    });


    user1.sync();

})(jQuery);


   + fetch시에 맨밑의 user(빨간색)는 서버에서 가져온 정보가 없다 (404 code)

  


    + save 시의 Request URL 정보 : http://localhost:8080/user

  



2. Backbone.View

  - initialize : render  메소드 호출

  - render : 화면 그리기

  - events : 화면의 이벤트와 핸들러 등록

    + index.html 안에 템플릿 추가 : 위치가 중요

<!DOCTYPE html>

  <html>

  <head>

    <meta charset="utf-8">

    <title>hello-backbonejs</title>

  </head>

  <body>


    <script type="text/template" id="search_template">

      <label><%= name %></label>

      <input type="text" id="search_input" />

      <input type="button" id="search_button" value="Search" />

    </script>

    <div id="search_container"></div>


    <script src="/js/jquery.js" type="text/javascript"></script>

    <script src="/js/underscore.js" type="text/javascript"></script>

    <script src="/js/backbone.js" type="text/javascript"></script>


    <script src="/2.js" type="text/javascript"></script>

  </body>

  </html>


   + 2.js 안에 View 추가 

    var SearchView = Backbone.View.extend({

        initialize: function(){

            this.render(); // 호출시 화면 그리기. initialize는 new 생성시 자동 호출됨 

        },

        render: function(){

            // 템플릿 과 데이터 결합

            var template = _.template( $("#search_template").html(), {name: 'dowon'} );

            this.$el.html( template );

        },

        events: {

            "click input[type=button]": "doSearch"  // 이벤트 핸들러 등록

        },

        doSearch: function( event ){

            // Button clicked, you can access the element that was clicked with event.currentTarget

            alert( "Search for " + $("#search_input").val() );

        }

    });


    var search_view = new SearchView({ el: $("#search_container") });


    + 브라우져 호출

  



3. Backbone.Router

  - routes : routing 경로와 처리 메소드 등록 (API 호출시 보여질 View 를 결정하여 준다)

    + 기존 호출 : http://localhost:8080 이고 

    + routes설정이 다음과 같으면 

            routes: {          

       "foo/:bar" : "paramtest",

       "*action" : "func"

   },

    + http://localhost:8080/#/foo/dowon 호출하면 paramtest 메소드로 이동

      http://localhost:8080/#/dowonaction 호출하면 func로 메소드로 이동

// sample example

var Router = Backbone.Router.extend({

   routes: {          

       "foo/:bar" : "paramtest",

       "*action" : "func"

   },

   func: function (action) {

       console.log('action> ' + action);

   },

   paramtest:function (p) {

       console.log('p> ' + p);

   }

});

  

  - Backbone.history.start() 호출 : SPA에서 Fragment (# 해쉬로 표현) 들에 대한 브라우져 호출의 히스토리를 관리한다

  - 라우팅 과 Fragment의 관계를 반드시 이해하자 

  

    이미지 출처: http://blog.nodejitsu.com/scaling-isomorphic-javascript-code


  - Dynamic Routing

 var AppRouter = Backbone.Router.extend({

        // # 해쉬로 표현될 Fragment를 등록한다

        routes: {

            "posts/:id": "getPost",

            "*actions": "defaultRoute" // Backbone will try match the route above first

        }

    });


    // Instantiate the router

    var app_router = new AppRouter;

    app_router.on('route:getPost', function (id) {

        // Note the variable in the route definition being passed in here

        alert( "Get post number " + id );   

    });

    app_router.on('route:defaultRoute', function (actions) {

        alert( actions ); 

    });

    // Start Backbone history a necessary step for bookmarkable URL's

    Backbone.history.start();


  - 브라우져 호출 : <url>/spa-page/#/posts/1  호출

  



4. Backbone.Collection

  - model : 속성에 Model 클래스를 지정한다 

  - models : 컬렉션에 등록된 model 객체 배열열

  - 2.js Model -> Collection 에 지정한다 

     var Song = Backbone.Model.extend({

     initialize: function(){

         console.log("Music is the answer");

     }

     });


     var Album = Backbone.Collection.extend({

 model: Song

     });


      var song1 = new Song({ name: "How Bizarre", artist: "OMC" });

      var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" });

      var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" });


      var myAlbum = new Album([song1, song2, song3]);

      console.log( myAlbum.models );

  

  - 브라우져 호출

  



Backbone을 이용하게 되면 좀 더 쉽게 SPA 를 만들 수 있다. Backbone을 사용하여 개발하는 Workflow는 다음과 같다

  - index.html 을 만든다 : SPA 에서는 오로지 <body> 태그는 index.html 에만 존재한다 

  - Backbone.Router를 개발한다 : RESTful 설계서에 따라 업무를 분류하면 될 것이다

  - Backbone.View를 개발한다 : view에 맞는 template 파일을 별도로 가져가면 되겠다

  - Backbone.Collection을 개발한다 : Model을 만들고 Collection을 개발한다

  - RESTful Web Services & Open API : 설계에 따라서 Model에 url 을 설정하면 되겠다  

이미지 출처 : 참조의 동영상중에서 


  

  Backbone의 서버연동 전체흐름도 : Real-time은 화면의 reload가 없이 진행된다. The 'net을 socket.io로 연결하는 것이 중요!



5. 총정리

  - Model, View, Router 이해


    + 상황에 따른 코딩 패턴 소개
    + 코드 컨벤션 및 네이밍 규칙

    + Backbone Pattern에 따라 전체 디렉토리 구조 만들기

    + 시작, 업무클래스의 AMD 사용방법 소개 



<참조> 

  - 원문1 : Hello World Backbone.js Tutorial

  - 원문1의 GitHub 저장소

  - 원문2 비디오 튜토리얼

  - 원문2의 GitHub 저장소

  - Backbone 완벽가이드 문서

  - $(this.el) 과 this.$el 의 차이점  : Backbone.View 의 render 메소드에서 사용함. this.$el 에서 에러 발생하면 최신버전 upgrade

  - Backbone 개발 Workflow 동영상 

  - Backbone Step by Step 튜토리얼 (동영상포함)

  - Backbone/Node.js/MongoDB 페이스북 공개 그룹

posted by 윤영식