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

Publication

Statistics Graph

Recent Comment

2013.12.05 13:34 AngularJS/Start MEAN Stack

이전 블로그에서 MEAN Stack에 대한 의미를 알아보았습니다. Angular.js 의 Why, How, What을 살펴보도록 하겠습니다.


1. Angular.js 가 주고자 하는 가치는 무엇인가?

  앵귤러는 모던 애플리케이션을 개발하기 위한 프레임워크입니다. 복잡하고 단순 반복적인 작업을 대폭 줄여줌으로써 신속한 개발을 가능하게 해줍니다. 이를 통해 보다 빨리 고객의 피드백을 받고 개선할 수 있는 에자일한 개발 진행이 가능해 집니다. 보다 적은 작업을 통해 보다 더 많은 행복을 주는 프레임워크입니다. 


  1989년 HTML을 시작으로 2005년 Ajax가 나오고 이후 jQuery를 통하여 DOM 을 조작을 통한 웹서비스 개발 시대를 거쳐 지속적인 브라우져 기술의 성숙과 JavaScript 해석기의 성능향상으로 이제는 자바스크립트를 통해 클라이언트에서도 서버와 같은 MVC 패턴 방식의 애플리케이션 개발이 가능해 졌습니다. 만일 jQuery만을 통해 웹앱을 개발한다고 생각하면 HTML 페이지마다 들어가는 서버코드와 자바스크립트들의 복잡한 코드에 머리를 쥐어 짤지도 모릅니다. 

  저는 13년을 넘게 자바언어로 서버만을 개발했었습니다. 가끔 클라이언트단의 jQuery 코드를 볼 때마다 저 영역으로는 절대 들어가지 말자라고 생각했습니다. 왜일까요? 그것은 서버처럼 잘 정비된 애플리케이션 프레임워크도 없으며, 서버코드와 자바스크립트를 HTML 사이사이에 끼워 넣으며 스파게티같은 코드를 짜야 하기 때문이었습니다. 

  그러나 2010년 이후부터 상황은 바뀌었습니다. Backbone.js가 이러한 복잡함을 해결하고자 초기 프레임워크로 나왔고, 이후 Ember.js 그리고 Angular.js 에서 Meteor.js 까지 모던 웹앱을 개발할 수 있는 프레임워크가 나왔습니다. 앵귤러는 어떻길래 이들 프레임워크 중 단연 선풍적인 인기를 누리고 있는 걸까요?


  - .js F/W  트랜드 



- .js 에서 dot(점)을 빼고 Backbonejs 와 Angularjs 트랜드 


  Backbonejs 와 Angularjs(노란색) 의 트랜드 변화는 급상승 중



2. Angular.js 가 어떻길래 개발자들이 열광하는가?

  앵귤러의 아버지인 미스코님(Misko Hevery)의 소개 동영상을 잠시 감상해 봅시다 


  요즘 SI시에 서버개발을 위하여 Spring Framework와 iBatis(myBatis)를 사용하는 것이 기본적인 관례처럼 되었는데요. 이들의 기능을 잠깐 생각해 볼까요. 

  - DI (Dependency Injection) 을 통하여 코드간의 결합도를 줄여주고, 테스트 코드의 작성을 쉽게 해줍니다. 

  - MVC 패턴를 통하여 기본적인 서버 개발의 틀을 가이드 해줍니다.

  - 다양한 라이브러리와 툴의 결합으로 개발 생산성을 높여줍니다.


 이를 앵귤러 입장에서 생각해 보면 정확히 위와 같은 요구사항을 충족해 주고 있습니다. 

  - DI를 지원합니다. 모듈단위의 개발로 코드를 간결하게 유지하고 테스트를 쉽게 해줍니다.

  - MV* 패턴을 통하여 역할을 나누고 아키텍쳐 Layered 개발을 가능하게 해줍니다. 당연히 유지 보수가 쉬워지겠죠

  - jQuery의 Plugins 포함한 기존의 다양한 라이브러리를 재 사용할 수 있습니다. 

  - 서버의 Maven, Ant 와 같은 관련된 라이브러리 의존성 관리 및 빌드 자동화 툴과 결합하여 개발 생산성을 높일 수 있습니다. 


  하지만 앵귤러를 시작하기 전에 하나의 선입견을 버리고 새로운 인식으로 접근을 해야 합니다. 자바스크립트는 이제 브라우져에서 화면의 단순 조작을 통한 효과에 쓰이는 언어가 아닌 진정한 엔터프라이즈급 애플리케이션부터 모바일 웹앱까지 모던한 애플리케이션을 만드는데 가장 많이 쓰이고 있는 개발언어가 되었다는 것입니다. 구글은 크롬앱을 코르도바(폰갭)를 통하여 안드로이드 및 iOS에서 구동하는 툴킷을 2014년 초에 출시할 계획입니다. 크롬앱은 자바스크립트로 개발합니다. 이는 본격적으로 네이티브 모바일 앱과 자바스크립트 모바일 웹앱이 함께 공존할 수 있는 시기가 왔다는 것을 암시합니다. 


 앵귤러(Angular.js)는 화면을 조작하는 라이브러리나 화면을 조작하는 프레임워크가 아니 모던 애플리케이션을 개발하는 프론트엔드 프레임워크입니다. 최근에는 이를 SPA(Single Page Application) 개발이라 부릅니다. Adobe의 Flex 기술을 통하여 클라이언트단에 엔터프라이즈 애플리케이션을 개발하는 RIA(Rich Internet Application) 가 선풍적인 인기를 누렸음을 잘 알것입니다. 인터넷이 되는 스마트 기기 에서 Adobe Flash의 공식 미지원 발표에 있은 후 이제 RIA의 용어는 점점 잊혀져 가고 있습니다. 하지만 사람들의 요구는 UX에 점점 더 목말라하고 있습니다. 단순한 웹서비스로는 이에 대응하기 힘들며 PC시대의 RIA를 표방한 Adobe의 Flex 프레임워크처럼 현재의 PC와 Mobile을 통합하는 진정한 RIA와 같은 자바스크립트 진영의 개발 프레임워크가 바로 앵귤러(Angular.js) 입니다. 무엇을 제공하 길래 앵귤러는 SPA 프레임워크의 큰형님이 되고 있는 걸까요?


 SPA vs RIA 비교 



3. Angular.js에는 무엇이 있는가?

  앵귤러는 클라이언트의 애플리케이션을 견고하게 만들 수 있는 방법을 제시하고 있습니다. 클라이언트의 생명은 바로 UX에 있다고 생각합니다. 훌륭한 사용자 경험을 주기 위하여 앵귤러 사용한다면 빠르게 개발하고 사용자의 피드백을 받아 개선해 갈 수 있습니다.


  견고한 싱글 페이지 웹 애플리케이션(SPA)을 만들기 위하여 앵귤러는 다음과 같은 기능을 제공합니다. 

  - 모듈 단위 개발을 통하여 글로벌 영역을 오염시키지 않고 모듈 단위 개발을 가능하게 해줍니다. 따라서 대규모의 애플리케이션 확장이 가능해 집니다. 


  - 양방향 데이터 바인딩을 통하여 View(HTML) 와 Controller(자바스크립트) 사이에 데이터에 대한 양방향 동기화를 자동으로 해줍니다. 즉, View 에서 데이터를 입력하면 Controller 단의 데이터를 업데이트 해주고, 그 반대도 가능해 집니다. 기존 jQuery에서는 데이터의 동기화를 위하여 Event와 Listener를 등록하는 코드를 모두 개발해야 했다면 앵귤러에서는 이런 코드를 찾아 볼 수 없습니다. Flex의 [Bindable]을 생각하면 됩니다. 


  - 앵귤러를 보통 MVW 프레임워크라 부릅니다. W는 Whatever의 의미로 Controller, Service등 무엇이든 올 수 있다는 것입니다. 역시 가장 중요한 것은 Model과 View의 연동을 양방향으로 함으로써 UX를 보다 쉽고 빠르게 개발토록 하는데 있습니다. 


  - Controller는 View HTML에서 발생한 이벤트에 따라 Model 변경을 제어하고, Service는 백앤드 서비스를 데이터 I/O 통신을 담당합니다. 각 필요한 기능은 DI(Dependency Injection)을 통하여 펑션의 파라미터 주입방식으로 인스턴스를 받아서 사용합니다. 


  - SPA 의 Single Page라는 의미는 최초에 index.html 을 서버로부터 받은 후 부분적인 화면의 변경을 위하여 부분 HTML(Partial HTML)만을 받아서 index.html의 특정 영역의 DOM 객체 변경을 통해 View의 일부분을 바꿔줍니다. 이후 서버로 부터 받는 것은 View의 컨텐츠 데이터인 JSON 이나 XML 입니다. 이렇게 화면의 부분 변경을 위하여 Routing 기능을 제공합니다. 


  - jQuery + PHP, jQuery + JSP 코드가 들어간 HTML 이 기존의 코딩 방식이라면 Javascript + HTML 만 존재하는 것이 앵귤러의 코딩 방식이다. 또한 반복해서 사용하는 HTML 또는 자바스크립트 코드조각이나 위젯/플러그인을 앵귤러만의 컴포넌트로 만들어서 HTML tag, attribute, class, comment 등의 방식으로 HTML에 포함시킬 수 있는 Directives(지시자) 기능을 제공합니다. Flex의 MXML에 차트관련 컴포넌트를 <Line> 태그로 표현하듯이, Angular.js의 Directive(컴포넌트)를 만들면 HTML안에 <Line> 과 같은 태그를 포함시킬 수 있습니다. 즉, Directive는 HTML 태그로 표기할 수 있는 컴포넌트 모듈을 만들 수 있고 Callback 펑션 기능을 내부로 숨기고 재사용할 수 있는 것이다. 


  - 백앤드로 Node.js를 사용한다면 Flex의 Messaging 기술과 같은 Push 방식의 구현을 Socket.io 모듈을 통하여 보다 더 쉽게 구현 할 수 있다. 


이제 자바스크립트 코딩이 가능하다면 싱글 페이지 애플리케이션(SPA) 에 도전해 봅시다.



<참조>

  - 스타트업을 위한 서비스 개발 기술 - MEAN Stack

  - 웹 애플리케이션 견고하게 만들기

  - 프론트 엔드 웹앱 프레임워크 (SlideShare)

posted by peter yun 윤영식
2013.09.28 16:18 AngularJS/Concept


posted by peter yun 윤영식
2013.04.03 14:15 Testing, TDD/Test First

Node.js를 사용하기로 하면서 TDD를 위하여 Mocha를 선택하였다. 그리고 클라이언트단의 테스트 또한 Mocha로 이용해 보려 하였으나 DOM 조작이 많을 경우와 테스트 간결함등등에 강점이 많은 QUnit이 오히려 매력적으로 다가 왔다



1) QUnit vs Mocha

  - QUnit

    + DOM 조작관련 Client 단위 테스트에 적합

    + assert.equal이 아니라 equal만 사용하면 됨 

    + UI에서 테스트 모듈별로 콤보 선택하여 볼 수 있음

    + 클라이언트단 라이브러리들에서 주로 사용함 (BackboneJS 등)

    + PhantomJS와 연계하여 테스트

   



  - Mocha

    + 다양한 라이브러리를 접목 할 수 있다

    + 브라우져 UI 와 소스보기등이 QUnit 보다 나아 보임

    + equal 이 아니라 assert.equal을 씀 (assert의 경우) 즉, DRY 위배

    + UI에서 테스트 결과 전체가 리스팅 되고 선택하여 볼 수 없음 

 


** Backbone의 QUnit  코드를 Mocha를 가지고 메소드별로 TDD방식으로 테스트 해보았다. 라이브러리 테스트 코드를 하나하나 체크하면 전체 API의 동작방식을 심도 있게 이해 할 수 있다


https://github.com/ysyun/prototyping/tree/master/tdd/backbone-mocha/tests



2) 결론

  - 클라이언트 : QUnit + PhantomJS(CasperJS) 를 사용하여 테스트 진행

  - 서버 : Mocha + Assert 을 사용



<참조>

  - 원문 : Test  Libraries 비교 - 테스트 라이브러리별 사용처 권고함

posted by peter yun 윤영식

Chrome 의 Dev Tools에 Backbone/Ember/AngularJS 프레임워크 및 CoffeeScript Console을 확장해 본다. 

최종 확장한 모습이다 



1) CoffeeConsole 

  - 로컬에 파일 복제 : git clone https://github.com/snookca/CoffeeConsole.git

  - CoffeeConsole 폴더 밑에 coffeeconsole.crx 파일 존재

  - 크롬브라우져 URL 입력창에 chrome://extensions/  호출

  - coffeeconsole.crx 파일을 "확장프로그램 설치"창으로 drag&drop 하고 팝업창뜨면 설치 OK

  - 결과 확인 (크롬 : command+option+i)

  

  좌측에서 커피코드를 짜면 우측에서 실시간 해석되어 자바스크립트 코드가 보인다



2) BackboneJS

  - 로컬에 파일 복제 : git clone https://github.com/spect88/backbone-devtools.git

  - 크롬브라우져 URL 입력창에 chrome://extensions/  호출

  - "압축해제된 확장 프로그램 로드.." 버튼 클릭 -> backbone-devtools 폴더 선택하고 OK

  - [] Inject Backbone.Debug 를 선택하면 DevTools을 띄운 페이지가 reload된다 

  

  ** 결정적 단점은 AMD가 아직 지원이 안된다 ㅠ.ㅠ; 그냥 <script> 태그 통해서 BackboneJS 로딩해야 함

      window.Backbone available on DOMContentLoaded (no require.js support as of now, sorry)

  ** QUnit 이나 Mocha를 통하여 TDD 할 때 사용하면 된다. 



3) EmberJS

  - 로컬에 파일 복제 : git clone https://github.com/tildeio/ember-extension.git

  - 크롬브라우져 URL 입력창에 chrome://flags/ 호출하고 "실험실 확장 프로그램 API" 사용을 해야한다 

  - 크롬브라우져 URL 입력창에 chrome://extensions/  호출

  - "압축해제된 확장 프로그램 로드.." 버튼 클릭 -> backbone-devtools 폴더 선택하고 OK

  - Ember가 추가되었다  

  


4) AngularJS

  - 로컬에 파일 복제 : git clone https://github.com/angular/angularjs-batarang.git

  - 크롬브라우져 URL 입력창에 chrome://extensions/  호출

  - "압축해제된 확장 프로그램 로드.." 버튼 클릭 -> backbone-devtools 폴더 선택하고 OK

  - AngularJS 설치 화면 

  


Build Tool인 Grunt 또한 확장을 할 수가 있다. Grunt와 함께 확장툴은 사용하면서 다시 블로깅하기로 한다. 



<참조>

  - 원문 : DevTools Extensions in Chrome for Developers

posted by peter yun 윤영식
2013.03.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 정보 : https://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 peter yun 윤영식
2013.03.20 23:18 Testing, TDD/Test First

  TDD 또는 BDD로 진행을 하는 것은 소프트웨어의 명세를 만들어 가면서 보다 안정적인 서비스를 만드는 지름길이다. 물론 좀 더 시간을 투자해야하는 지름길이지만 나중의 유지보수를 생각하면 긴안목에서 역시 빠른 지름길이다. 특히 모바일 서비스의 경우는 몇번의 에러가 발생하면 사용자는 해당 앱을 삭제하고 절대로 사용하지 않는다는 보고가 있다. 그리고 페이스북에는 QA조직이 없고 개발자가 직접 모든 테스트를 수행하고 책임을 지도록 되어있다. 

  우리가 생산성을 위하여 프레임워크를 사용하듯, 안정성을 위해서는 테스트 코드가 필수이다. 또한 테스트 코드에 주석을 달고 Groc 같은 유틸로 문서화를 한다면 소프트웨어의 명세를 따로 하지 않아도 될 것이다. 

  백본기반의 개발에 있어서도 모델, 뷰, 라우터등의 TDD는 필요하며 이를 어떻게 하는지 따라해 보자



1) TDD 준비하기

  - backbone-mocha.zip 파일을 다운로드 받는다 

backbone-mocha.zip


  - tests/test-runner.html 을 수행한다 

  


  - test-runner.html 파일 이해

<!DOCTYPE html>

<html lang="en">

<head>

    <!-- Title &amp; Meta -->

    <title>Frontend tests</title>

    <meta charset="utf-8">


    <!-- Stylesheets -->

    <link rel="stylesheet" href="libs/mocha/mocha.css">

</head>

<body>


    <!-- mocha 결과 화면을 뿌리기 위한 div --> 

    <div id="mocha"></div>


    <!-- Testing Libraries 첨부 -->

    <script src="libs/mocha/mocha.js"></script>

    <script src="libs/chai/chai.js"></script>

    <script src="libs/sinon/sinon.js"></script> <!-- 본 예제에서는 sinon.js 안씀. 즉, 삭제가능 -->


    <!-- chai를 사용하고 mocha는 TDD를 사용한다. BDD는 bdd 소문자로 입력 

          TDD를 하면 mocha에서 suit(), setup(), teardown(), test() 4가지 메소드를 사용한다 

          첨부파일의 user.test.js 파일 참조


          chai는 should, expect, assert 방식을 선택할 수 있는데 여기서는 expect 방식을 선택

    -->

    <script>

        // Use the expect version of chai assertions - http://chaijs.com/api/bdd

        var expect = chai.expect;


        // Tell mocha we want TDD syntax

        mocha.setup('tdd');

    </script>


    <!-- 사용하는 Libs -->

    <script src="../libs/jquery/jquery-1.8.3.min.js"></script>

    <script src="../libs/underscore/underscore-min.js"></script>

    <script src="../libs/backbone/backbone-min.js"></script>


    <!-- 코딩한 원본 Source files -->

    <script src="../src/app.js"></script>

    <script src="../src/models/user.js"></script>

    <script src="../src/views/profile.js"></script>


    <!-- 개발한 소스와 맵핑되는 Test files -->

    <script src="models/user.test.js"></script>

    <script src="views/profile.test.js"></script>


    <!-- 최종적으로 mocha 를 수행한다 -->

    <script>

        mocha.run();

    </script>


</body>

</html>



2) Backbone Model TDD

  - tests/models/user.test.js 밑에 getFullName 테스트 코드 첨부

    + suite, setup, teardown, test : Mocha interface

    + expect : Chai interface

suite('User Model', function() {


    setup(function() {

        this.user = new app.models.User({

            first_name: "Yun",

            last_name: "DoWon"

        });

    });


    teardown(function() {

        this.user = null;

    });


    test('should exist', function() {

        expect(this.user).to.be.ok; // Tests this.user is truthy  <- chai 코드

    });


    test('calling getFullName should return first_name[space]last_name', function() {

        expect(this.user.getFullName()).to.equal('Yun DoWon');

    });


});

  

   - 호출하면 빨간색 Fail 발생

  - 에러 해결하여 초록 Green 으로 만들기위해 user.js 안에 getFullName 메소드 구현

(function(global, _, Backbone, undefined) {


    app.models.User = Backbone.Model.extend({

        getFullName: function() {

               // model 내역은 user.test.js의 setup에서 이미 설정해 놓았음

        return this.get('first_name') + " " + this.get('last_name');

        }

    });


})(this, _, Backbone);


  - 브라우져 호출 결과 : "User Model" 제목은 user.test.js 에서 지정한 제목임

  



3) Backbone View TDD

  - test/views 폴더 밑에 profile.test.js 파일을 만든다 

  - 다음 코드를 넣는다

suite('Profile View', function() {

 

    // Create a User model to pass into our view to give it data

    var model = new app.models.User({

        first_name: 'Yun',

        last_name: 'YoungSik',

        age: 23

    });

 

    setup(function() {

        this.profile = new app.views.Profile({

            // Pass in a jQuery in memory <div> for testing the view rendering

            el: $('<div>'), 

            

            // Pass in the User model 

            // dependency inversion makes this simple to test, 

            // we are in control of the dependencies rather 

            // than the view setting them up internally.

            model: model 

        });

    });

 

    teardown(function() {

        this.profile = null;

    });

 

    test('should exist', function() {

        expect(this.profile).to.be.ok;

    });

 

});


  - 브라우저에서 호출하기전 test-runner.html 에 profile.js 와 profile.test.js 를 넣는다

    <!-- Source files -->

    <script src="../src/app.js"></script>

    <script src="../src/models/user.js"></script>

    <script src="../src/views/profile.js"></script>


    <!-- Test -->

    <script src="models/user.test.js"></script>

    <script src="views/profile.test.js"></script>


  - 브라우져 호출 결과

  - src/views 폴더에 profile.js 파일을 생성하고 다음 코드는 넣고 다시 호출한다

(function(global, $, _, Backbone, undefined) {

 

    app.views.Profile = Backbone.View.extend({

 

    });

 

})(this, $, _, Backbone);

    

  - 정상 호출됨  

 


  - profile.test.js 안에 구현하고 싶은 다음 테스트 코드를 넣고 호출한다

    test('should exist', function() {

        expect(this.profile).to.be.ok;

    });

    // view 에 대한 render 테스트 : Regex 로 해당 내역이 화면출력으로 나왔는지 테스트

    test('render()', function() {

        this.profile.render();

     

        // 렌더링된 결과화면에 대하여 정규표현식으로 검사를 하는 것이 핵심!

        expect(this.profile.$el.html().match(/Yun/)).to.be.ok;

        expect(this.profile.$el.html().match(/YoungSik/)).to.be.ok;

        expect(this.profile.$el.html().match(/23/)).to.be.ok;

    });


  - profile.js 의 내역을 구현지 않았기 때문에 테스트에 대한 결과는 빨간색 fail 

  


  - profile.js 의 render() 메소드를 구현한다 

(function(global, $, _, Backbone, undefined) {

    app.views.Profile = Backbone.View.extend({

 

        render: function() {

            var html = "<h1>"+ this.model.getFullName() +"</h1>" +

                "<p>"+ this.model.get('first_name') +" is "+ this.model.get('age') + " years old";

            this.$el.html(html);

        }

 

    });

})(this, $, _, Backbone); 


  - 브라우져 호출 결과

  

 


테스트 코드를 만들고 실행하여 에러(빨간색)가 발생하면 테스트 코드에 대응하는 업무 코드를 짜고, 다시 실행하여 정상(녹색)적으로 돌아가게 한다. 정상에는 두 단계가 있는데, 비즈니스 로직이 없이 API와 정적값을 통해 정상(녹색) 통과를 하고 나면 이후 비즈니스 로직을 넣고 다시 정상(녹색) 통과를 하는지 체크한다. 



<참조> 

  - 원문 : Testing Backbone.js with mocha 

  - http://visionmedia.github.com/mocha/

  - http://chaijs.com/

posted by peter yun 윤영식
2013.03.20 15:09 Backbone.js

기존에 작성한 index.html 파일안에는 템플릿에 대한 내역도 같이 포함되어 있다. 해당 템플릿 내역을 별도의 파일로 때어 내어 AMD  모듈화와 결합하는 방법을 알아본다. 



1) Require.js 플러그인 test.js 설치

  - 텍스트 파일을 로딩하는 text.js 파일을 적절한 위치에 설치 (여기서는 require.js 랑 같은 위치에 설치함)

  - 다운로드 : http://requirejs.org/docs/download.html#text

  - index.html 파일의 requirejs.config 에 의존성 설정 추가
requirejs.config({
    baseUrl: './js/', 
    paths: {
        'jquery': 'jquery',
        'underscore': 'underscore',
        'backbone': 'backbone',
        'text': 'text',
        'jquery.dateformat' : 'jquery-dateformat'
    },
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery.dateformat': {
            deps: ['jquery']
        }
    }
});



2) index.html 에서 템플릿내역 분리하기 

  - 템플릿 영역 분리하여 ride_template.html 명칭으로 index.html 과 같은 위치에 저장

////////////////////////////////

// index.html 내부

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

            <li><%= keywords %></li>

        </ul>

        <button class="delete">Delete</button>

    </script-->

</div>


////////////////////////////////

// ride_template.html 전체 내역

<img src="<%= coverImage %>"/>

<ul>

    <li><%= title %></li>

    <li><%= rider %></li>

    <li><%= ridingDate %></li>

    <li><%= keywords %></li>

</ul>

<button class="delete">Delete</button>



3) ride.js 파일에 템플릿 의존성 주입

  - AMD는 SOLID의 Dependency Inversion Principle과 같은 원리. 즉, 스프링의 Inversion Of Control 과 같은 방식이다. 

  - 따라서 모듈 ride_template.html 을 ride.js 에 주입해 보자 

    +  define([의존관계], 파라미터) : 의존관계에 템플릿 파일 상대 경로 지정

    + 기존 template 프로퍼티의 값을 파라미터로 변경

define(['jquery', 'backbone', 'underscore', 'text!../ride_template.html', 'jquery.dateformat'], function($, Backbone, _, rideTemplate) {

   .. 중략 ..

   var RideView = Backbone.View.extend({

        tagName:"div",

        className:"rideContainer",

        //template: $("#rideTemplate").html(),

        template: rideTemplate,


   render:function () {

        .. 중략 ..



4) 브라우져 호출 

  - 호출후 크롬 개발자 도구의 DOM 구성 : rideContainer div 태그안에 ride_template.html 이 들어가 있다 

   


 ** 전체 소스 

riding.zip



<참조>

  - 백본에 템플릿 텍스트 적용하기

  - text.js 사용법 : prefix로 반드시 text!을 붙여서 정적파일을 로딩한다 


posted by peter yun 윤영식
2013.03.18 14:42 Backbone.js

엔터프라이즈급의 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


    + https://localhost:8080/  : 하나더 추가해 보았다 

  


<참조>

  - Require.js API

  - backbone.js 소스 주석 한글화

posted by peter yun 윤영식
2013.03.15 17:49 Backbone.js

서점 샘플 응용하기 - 01 에 이어서 02 에서는 서버-Node.js & MongoDB- 와 붙이는 작업을 한다. 원문이 과거 버전이어서 좀 더 이해하기 쉽도록 재구성하였고, RESTful API 테스트 방법도 새롭게 시도해 보았다



1) RESTful API 와 Node.js 환경 구성하기 

  - 호출하는 API 목록

/api/rides  GET 모든 라이딩정보의 배열을 얻는다.

/api/rides/:id  GET 아이디가 :id인 라이딩정보을 얻는다.

/api/rides  POST  새로운 라이딩정보를 추가하고 아이디가 추가된 그 정보를 반환한다.

/api/rides/:id  PUT 아이디가 :id인 라이딩정보를 수정한다.

/api/rides/:id  DELETE  아이디가 :id인 라이딩정보를 삭제한다.


  - node.js & mongodb 설치되어 있음을 가정하고 node.js 모듈을 설치한다

// 모듈 설치

$ npm install express

$ npm install mongoose


  - public 디렉토리를 생성하여 img, js, css, index.html 파일을 public 디렉토리 밑으로 옮긴다 

  


  - server.js 코딩하기

// 모듈 의존성

var express = require("express"); //웹 프레임워크


// 서버를 생성한다

var app = express();


// 서버를 설정한다

app.configure(function () {

    app.use(express.bodyParser()); //요청 바디를 파싱해서 req.body를 만든다

    app.use(express.methodOverride()); //HTTP 메쏘드를 덮어쓰기 위해서 req.body를 확인한다

    app.use(app.router); //url과 HTTP 메쏘드에 기반한 라우팅을 수행한다

    app.use(express.static(__dirname + '/public')); //정적 자원을 제공하는 곳

    app.use(express.errorHandler({ dumpExceptions:true, showStack:true })); //개발시점에 모든 에러를 보여준다

});


// 서버를 구동한다

app.listen(8080, function () {

    console.log("Express server listening on port %d in %s mode", 8080, app.settings.env);

});


  - nodemon 을 통해서 구동하기 : 수정된 코딩이 있으면 자동으로 restart node 수행 (nodemon 블로깅)

nodemon server.js

15 Mar 14:37:11 - [nodemon] v0.7.2

15 Mar 14:37:11 - [nodemon] watching: ~/backbone/riding

15 Mar 14:37:11 - [nodemon] starting `node server.js`

Express server listening on port 8080 in development mode


  - MongoDB 구동하기 

// mongod 데몬 실행 

$ mongod --dbpath /mongodb/ride_database/

Fri Mar 15 15:33:19 [initandlisten] MongoDB starting : pid=50361 port=27017 dbpath=/Users/nulpulum/mongodb/ride_database/ 64-bit host=mac-42-retina.local

Fri Mar 15 15:33:19 [initandlisten] db version v2.2.3, pdfile version 4.5

... 중략 ..

Fri Mar 15 15:33:19 [websvr] admin web console waiting for connections on port 28017

Fri Mar 15 15:33:19 [initandlisten] waiting for connections on port 27017

// Node.js 서버가 구동 되어 있으면 연결 정보가 출력된다 

Fri Mar 15 15:34:27 [initandlisten] connection accepted from 127.0.0.1:61129 #1 (1 connection now open)

Fri Mar 15 15:34:27 [initandlisten] connection accepted from 127.0.0.1:61130 #2 (2 connections now open)

Fri Mar 15 15:34:27 [initandlisten] connection accepted from 127.0.0.1:61131 #3 (3 connections now open)

Fri Mar 15 15:34:27 [initandlisten] connection accepted from 127.0.0.1:61132 #4 (4 connections now open)



2) Mongoose 통하여 MongoDB 접근하기 

  - biz.js 파일을 생성하고 mongoose 코딩하기

    + Mongoose 용 schema와 model을 만든다 

    + MongoDB 에 접속한다 

    + 모듈패턴으로 업무 callback CRUD function 들을 GET, POST, PUT, DELTE 메소드를 정의한다

  - server.js 안에 RESTful API 추가하기

.. 중략 ..

// 서버를 설정한다

app.configure(function () {

    app.use(express.bodyParser()); //요청 바디를 파싱해서 req.body를 만든다

    app.use(express.methodOverride()); //HTTP 메쏘드를 덮어쓰기 위해서 req.body를 확인한다

    app.use(app.router); //url과 HTTP 메쏘드에 기반한 라우팅을 수행한다

    app.use(express.static(__dirname + '/public')); //정적 자원을 제공하는 곳

    app.use(express.errorHandler({ dumpExceptions:true, showStack:true })); //개발시점에 모든 에러를 보여준다

});


// mongoose 업무모듈인 biz.js 가져오기 

var biz = require("./biz");


// RESTful API에 대한 호출에 대하여 biz.js 모듈의 callback 펑션을 설정함

app.get( '/api/rides', biz.readAll);

app.post('/api/rides', biz.create);

app.get( '/api/rides/:id', biz.read);

app.put( '/api/rides/:id', biz.update);

app.delete('/api/rides/:id', biz.delete);


// 서버를 구동한다

app.listen(8080, function () {

    console.log("Express server listening on port %d in %s mode", 8080, app.settings.env);

});



3) RESTful API 테스트하기 

  - Chrome extention 인 "Advanced REST client" 설치한다 : Chrome Web Store에서 검색하고 설치하면 됨


  - Advanced REST client 실행

    + POST 메소드를 선택 (GET, PUT, DELETE 순으로 실행하여 본다)

    + 하단의 Form 탭을 선택하여 key=value 를 추가한다 

    + "Send" 버튼을 클릭하면 결과가 최하단에 나온다 (200 OK)

          

 - MongoDB에서 결과 조회

$ mongo

MongoDB shell version: 2.2.3

connecting to: test

> show dbs

local (empty)


// POST가 성공하면 데이터베이스가 보인다 

> show dbs

local (empty)

ride_database 0.203125GB

> use ride_database

switched to db ride_database

> show collections

rides

system.indexes

> db.rides.find().toArray();

[

{

"title" : "투어 드 코리아",

"rider" : "윤복자",

"ridingDate" : ISODate("2013-06-01T00:00:00Z"),

"keywords" : "코리아 싸이클링",

"_id" : ObjectId("5142ccbd1b06d36acc000001"),

"__v" : 0

}

]

>


  - PUT 은 URL 뒤에 MongoDB document의 _id 값인  5142ccbd1b06d36acc000001  을 붙여준다. (DELETE 도 동일)

   



4) Backbone.js 와 Node.js 연결하기 

  - 클라이언트 <-> 서버 연결

    + MongoDB사용시 : _id 지정하기 

    + url 설정 : /api/rides

    + fetch() 호출

    + reset callback으로 render 설정

  - ride.js 백본파일을 수정 : 라이딩 정보 목록 가져오기 == 컬렉션 모델에서 url 설정

   var Ride = Backbone.Model.extend({

        defaults:{

            coverImage:"img/my_cycle.png",

            title:"2011년 대관령 대회",

            rider:"Yun YoungSik",

            ridingDate:"2011",

            keywords:"대관령 힐크라이밍 대회"

        },

        idAttribute: "_id"  // MongoDB 사용시 바꾸어줌 

        // idAttribute 와 같은 효과를 같는다 

        /*parse:function (response) {

            console.log(response);

            response.id = response._id;

            return response;

        }*/

    });

.. 중략 ..  

    // rides 

   /* var rides = [{title:"대관령 힐크라이밍 대회", rider:"Yun YoungSik", ridingDate:"2010", keywords:"대관령"},

        {title:"미시령 힐크라이밍 대회", rider:"Yun DoWon", ridingDate:"2011", keywords:"미시령"},

        {title:"투어 드 코리아", rider:"Yun YoungSik", ridingDate:"2012", keywords:"코리아"}];*/

    var rides = [];   // 위의 샘플은 사용하지 않고 빈 배열을 만들어 준다 

  

    ////////////////////

    // Ride Collection

    var Rides = Backbone.Collection.extend({

        model : Ride,

        url : '/api/rides'  // 서버 호출 API

    });


    ///////////////////

    // Collection View

    var RidesView = Backbone.View.extend({

        el: $("#rides"),


        initialize: function(){

            this.collection = new Rides(rides);

            // 서버로 부터 데이터 가져오기 

            this.collection.fetch();

            this.render();

            // 컬렉션 add가 호출되면 renderRide를 trigger 한다 

            this.collection.on("add", this.renderRide, this);

            this.collection.on("remove", this.removeRide, this);

            // fetch()가 비동기적이기 때문에 Backbone이 reset을 호출하면 trigger 될 수 있도록 한다 

            this.collection.on("reset", this.render, this);  

        },

.. 중략 ..


  - 브라우져 호출 : MongoDB 의 데이터를 가져와서 Backbone이 데이터를 reset 하게 되면 입력한 라이딩정보가 출력된다 

   


  -  날짜가 이상하게 나오므로 jQuery를 이용하여 날짜를 포멧팅 해준다 

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

            <li><%= keywords %></li>

        </ul>

        <button class="delete">Delete</button>

    </script>

</div>

<script src="js/jquery.js"></script>

<!-- 다운로드 받아서 js 폴더에 놓는다 -->

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


  - 브라우져 화면에서 MongoDB로 add 하기 : Backbone의 ride.js 에서 addRide 수정

var RidesView = Backbone.View.extend({

        el: $("#rides"),


        initialize: function(){

            this.collection = new Rides(rides);

            // 서버로 부터 데이터 가져오기 

            this.collection.fetch();

            this.render();

            // 컬렉션 add가 호출되면 renderRide를 trigger 한다 

            this.collection.on("add", this.renderRide, this);

            this.collection.on("remove", this.removeRide, this);

            // fetch()가 비동기적이기 때문에 Backbone이 reset을 호출하면 trigger 될 수 있도록 한다 

            this.collection.on("reset", this.render, this);

        },


        render: function(){

            var that = this;

            _.each(this.collection.models, function(item){

                that.renderRide(item);

            }, this);

        },


        renderRide: function(item){

            var rideView = new RideView({

                model: item

            });

            this.$el.append(rideView.render().el);

        },


        addRide: function(e){

            e.preventDefault();


            var formData = {};

            // jQuery의 each로 formData key=value 객체를 만듦

            $("#addRide").children("input").each(function (i, el) {

                if ($(el).val() !== "") {

                    formData[el.id] = $(el).val();

                }

            });


            // rides 배열에 저장

            rides.push(formData);

            // 컬렉션 객체에 저장

            // 서버로 저장하기 기존 add를 create 으로 바꾸면 된다 

            this.collection.create(formData); 

            //this.collection.add(new Ride(formData));

        }, 


  - 브라우져 결과 화면 : "평택 대회" 입력

   


  - MongoDB의 결과값 : 3개의 도큐먼트가 존재한다 

> db.rides.find().toArray();

[

{

"title" : "투어 드 코리아3",

"rider" : "윤영식",

"ridingDate" : ISODate("2012-06-01T00:00:00Z"),

"keywords" : "싸이클링 코리아 우승",

"_id" : ObjectId("5142dc4ae196a916e0000001"),

"__v" : 0

},

{

"title" : "대관령 힐크라이밍 대회",

"rider" : "윤도원",

"ridingDate" : ISODate("2013-07-01T00:00:00Z"),

"keywords" : "강원도 우승목표",

"_id" : ObjectId("5142dd8cba03b734e1000001"),

"__v" : 0

},

{

"title" : "평택 대회",

"rider" : "윤복자",

"ridingDate" : ISODate("2013-03-01T00:00:00Z"),

"keywords" : "고속도로 개통기념",

"_id" : ObjectId("5142de7351b4341ee2000001"),

"__v" : 0

}

]

>


  - 원문에 포함된 날짜 포함하기와 키워드배열로 만들기는 패스~~~ ^^;


** 전체 소스 코드 

riding.zip



<참조>

  - 원문 : Backbone.js Developing 번역글

  - Node.js & Express & Mongoose ToDo 예제

  - Handlebars 홈페이지

  - Tool : Advanced Rest Client

posted by peter yun 윤영식
2013.03.15 13:30 Backbone.js

Backbone.js 서점 샘플 예제를 사이클링 샘플로 변경하면서 직접 코딩해 보고 구조를 파악하자. 



1) index.html 파일 준비하기 

  - 이미지 파일 다운로드 하고 img 폴더에 넣는다 (100*152)

   


  - backbone.js, underscore.js, jquery.js 파일 다운로드 받아서 js 폴더에 넣는다 

   


  - index.html 파일을 루트에 생성한다


  - 브라우져 수행 점검 

   


  - css 폴더를 만들고 screen.css 파일을 생성한다 

css body { background-color: #eee; }

.bookContainer { border: 1px solid #aaa; width: 350px; height: 170px; background-color: #fff; float: left; margin: 5px; } .bookContainer img { float: left; margin: 10px; } .bookContainer ul { list-style-type: none; }



2) index.html 확장하기 

  - script 태그를 넣는다 

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

        <img src="<%= coverImage %>"/>

        <ul>

            <li><%= title %></li>

            <li><%= rider %></li>

            <li><%= ridingDate %></li>

            <li><%= keywords %></li>

        </ul>

    </script>

   Model의 명칭과 template의 <%= 명칭 %> 을 일치시켰다

   


  

3) ride.js 통해 Backbone 코딩하기 

  - js 폴더안에 ride.js파일을 생성하고 Model, View 클래스를 만든다 

(function ($) {

    // model 만들기

    var Ride = Backbone.Model.extend({

        defaults:{

            coverImage:"img/my_cycle.png",

            title:"2011년 대관령 대회",

            rider:"Yun YoungSik",

            ridingDate:"2011",

            keywords:"대관령 힐크라이밍 대회"

        }

    });


    // view 만들기

    var RideView = Backbone.View.extend({

        // el 변수에 html에 있는 DOM 레퍼런스를 만든다. $el은 DOM에 대한 jQuery 객체를 의미 한다  

        // html에 없는 DOM을 만들때는 tagName/className/id 등을 설정한다. 설정하지 않으면 기본 div 태그임

        // el 이란 무엇인가?

        tagName:"div",

        // screen.css 에서 사용할 css의 클래스이름 .rideContainer 

        className:"rideContainer",

        template:$("#rideTemplate").html(),


        render:function () {

            //tmpl은 JSON객체를 받아서 html을 반환하는 함수이다.

            var tmpl = _.template(this.template); 

            //jQuery html() 함수를 사용하기 위해 jQuery객체 $el을 쓴다.

            this.$el.html(tmpl(this.model.toJSON())); 

            return this;

        }

    });


})(jQuery);


  - View를 생성하고 Model를 할당한 후 render()를 호출하여 화면을 그린다 

(function ($) {

    // model 만들기

    var Ride = Backbone.Model.extend({

        defaults:{

            coverImage:"img/my_cycle.png",

            title:"2011년 대관령 대회",

            rider:"Yun YoungSik",

            ridingDate:"2011",

            keywords:"대관령 힐크라이밍 대회"

        }

    });


    // view 만들기

    var RideView = Backbone.View.extend({

        tagName:"div",

        className:"rideContainer",

        template:$("#rideTemplate").html(),


        render:function () {

        //tmpl은 JSON객체를 받아서 html을 반환하는 함수이다.

            var tmpl = _.template(this.template); 

            //this.el은 tagName에 정의된 것이다. jQuery html() 함수를 사용하기 위해서는 $el을 쓴다.

            this.$el.html(tmpl(this.model.toJSON())); 

            return this;

        }

    });


   // model, view 생성하여 view에 model 할당하기 

    var ride = new Ride({

        title:"Some title",

        rider:"Yun DoWon",

        ridingDate:"2011",

        keywords:"대관령 힐크라이밍 대회"

    });


    rideView = new RideView({

        model: ride

    });

    // 템플릿에 값을 맵핑한 DOM 을 최종적으로 넘김 

    $("#rides").html(rideView.render().el);

    

})(jQuery);


  - 브라우져 호출 결과화면 

    



4) Collection을 통해 목록 만들기 

 - Collection 클래스를 상속받아 Collection Model을 만들고 Collection을 제어할 수 있는 View도 만든다 

(function ($) {


    var Ride = Backbone.Model.extend({

        defaults:{

            coverImage:"img/my_cycle.png",

            title:"2011년 대관령 대회",

            rider:"Yun YoungSik",

            ridingDate:"2011",

            keywords:"대관령 힐크라이밍 대회"

        }

    });


    var RideView = Backbone.View.extend({

        tagName:"div",

        className:"rideContainer",

        template:$("#rideTemplate").html(),


        render:function () {

        //tmpl은 JSON객체를 받아서 html을 반환하는 함수이다.

            var tmpl = _.template(this.template); 

            //this.el은 tagName에 정의된 것이다. jQuery html() 함수를 사용하기 위해서는 $el을 쓴다.

            this.$el.html(tmpl(this.model.toJSON())); 

            return this;

        }

    });


    var ride = new Ride({

        title:"Some title",

        rider:"Yun DoWon",

        ridingDate:"2011",

        keywords:"대관령 힐크라이밍 대회"

    });


    var rideView = new RideView({

        model: ride

    });


    $("#rides").html(rideView.render().el);

    

    //////////////////////

    // rides 샘플 3개 생성

    var rides = [{title:"대관령 힐크라이밍 대회", rider:"Yun YoungSik", ridingDate:"2010", keywords:"대관령"},

        {title:"미시령 힐크라이밍 대회", rider:"Yun DoWon", ridingDate:"2011", keywords:"미시령"},

        {title:"투어 드 코리아", rider:"Yun YoungSik", ridingDate:"2012", keywords:"코리아"}];


    //////////////////////

    // Ride Collection 생성

    var Rides = Backbone.Collection.extend({

        model : Ride

    });


    //////////////////////

    // Collection View 생성

    var RidesView = Backbone.View.extend({

        el:$("#rides"),


        initialize:function(){

            this.collection = new Rides(rides);

            this.render();

        },


        // 컬렉션의 내역을 루핑을 돌고, 

        // each 메소드내에서서 함수 그자체가 this가 된다. 따라서 this 참조 안하게 that 을 설정한다 (블로깅)

        render: function(){

            var that = this;

            _.each(this.collection.models, function(item){

                that.renderRide(item);

            }, this);

        },


        // RideView 를 통해 개별적으로 렌더링한다 

        renderRide:function(item){

            var rideView = new RideView({

                model: item

            });

            this.$el.append(rideView.render().el);

        }

    });


    // new 를 하면  initialize() 가 자동 호출된다 

    var ridesView = new RidesView();


})(jQuery);


  - 호출한 결과 화면 : 기존 1개와 샘플 데이터 4개로 총 4개의 화면이 나옴 

   



5) 컬렉션에 모델을 추가하기 

  - 옷 신제품 발표 컬렉션에 옷입은 모델들을 추가하는 느낌이랄까 어감이 비슷하네요. ^^

  - 모델을 추가하기 위해서 index.html에 input tag 를 추가한다 

.. 중략 ..

<div id="rides">

    <!-- default 로 들어 있던 div 태그 제거 --> 

    <!--div class="rideContainer">

        <img src="img/my_cycle.png"/>

        <ul>

            <li>Title</li>

            <li>Rider</li>

            <li>Riding date</li>

            <li>Keywords</li>

        </ul>

    </div-->


    <!-- 새로운 카드를 넣을 수 있는 input tags --> 

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


    <!-- 하단의 template script 만 놓는다 --> 

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

.. 중략 ..


  - screen.css 파일에 하기 내역을 추가한다 

css body { background-color: #eee; }


.rideContainer { border: 1px solid #aaa; width: 350px; height: 170px; background-color: #fff; float: left; margin: 5px; } .rideContainer img { float: left; margin: 10px; } .rideContainer ul { list-style-type: none; }


#addRide label {

    width:100px;

    margin-right:10px;

    text-align:right;

    line-height:25px;

}


#addRide label, #addRide input {

    display:block;

    margin-bottom:10px;

    float:left;

}


#addRide label[for="title"], #addRide label[for="ridingDate"] {

    clear:both;

}


#addRide button {

    display:block;

    margin:5px 20px 10px 10px;

    float: right;

    clear: both;

}


#addRide div {

    width: 550px;

}


#addRide div:after {

    content:"";

    display:block;

    height:0;

    visibility:hidden;

    clear:both;

    font-size:0;

    line-height:0;

}


  - ride.js 파일에서 RidesView 안의 renderRide 메소드 밑으로 addRide 메소드를 추가한다

// 테스트로 한개 넣었던 코드에 대해서 주석처리한다.

/*  var ride = new Ride({

        title:"No title",

        rider:"Unknown",

        ridingDate:"Unknown",

        keywords:"empty"

    });


    var rideView = new RideView({

        model: ride

    });


    $("#rides").html(rideView.render().el);  */

    

.. 중략 ..

        renderRide:function(item){

            var rideView = new RideView({

                model: item

            });

            this.$el.append(rideView.render().el);

        },


        addRide: function(e){

      e.preventDefault();


            var formData = {};

      // jQuery의 each로 formData key=value 객체를 만듦

             $("#addRide").children("input").each(function (i, el) {

                if ($(el).val() !== "") {

                    formData[el.id] = $(el).val();

                }

            });


            // rides 배열에 저장

            //rides.push(formData);

            // 컬렉션 객체에 저장 

            this.collection.add(new Ride(formData));

        }, 

        

        // add버튼 누를때 이벤트 발생하여 addRide 메소드 호출

        events:{

            "click #add": "addRide"

        }


    });


  - 컬렉션에 모델이 추가되는 add 메소드 호출시 이벤트 발생토록 함

var RidesView = Backbone.View.extend({

        el:$("#rides"),


        initialize:function(){

            this.collection = new Rides(rides);

            this.render();


// initailize 초기화일 때 자동으로 trigger 될 수 있도록 설정을 합니다 

            this.collection.on("add", this.renderRide, this);

        },


  - 실행하기 

$ static 

serving "." at http://127.0.0.1:8080

11:16:58 [200]: /

11:16:58 [200]: /css/screen.css

11:16:58 [200]: /js/ride.js

11:16:58 [200]: /js/underscore.js

11:16:58 [200]: /js/backbone.js

11:16:58 [200]: /img/my_cycle.png

11:16:58 [200]: /js/jquery.js

11:16:58 [404]: /favicon.ico


    + http://localhost:8080 호출 한 경우

   

    + 값을 입력하고 "Add" 클릭하였을 때 (평택 대회)

   



6) 모델 삭제하기 

  - index.html안에 삭제 버튼을 넣는다 

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

        <img src="<%= coverImage %>"/>

        <ul>

            <li><%= title %></li>

            <li><%= rider %></li>

            <li><%= ridingDate %></li>

            <li><%= keywords %></li>

        </ul>

        <button class="delete">Delete</button>

    </script>


  - button에 대한 screen.css 를 조정한다 

.rideContainer ul {

    list-style-type: none;

    margin-bottom: 0;

}


.rideContainer button {

    float:right;

    margin: 10px;

}


  - 개별 모델에 delete button이 놓인다

   


  - 삭제 로직을 RideView 에 코딩한다 : 삭제 메소드 -> 이벤트 등록

     var RideView = Backbone.View.extend({

        tagName:"div",

        className:"rideContainer",

        template:$("#rideTemplate").html(),


        render:function () {

         //tmpl은 JSON객체를 받아서 html을 반환하는 함수이다.

            var tmpl = _.template(this.template); 

            //this.el은 tagName에 정의된 것이다. jQuery html() 함수를 사용하기 위해서는 $el을 쓴다.

            this.$el.html(tmpl(this.model.toJSON())); 

            return this;

        }, 


        events: {

            "click .delete": "deleteRide"

        },


        deleteRide:function () {

            //모델을 삭제한다.

            this.model.destroy();


            //뷰를 삭제한다.

            this.remove();

        }

    });



7) 컬렉션 모델 삭제하기

  - rides 배열에는 아직 그대로 데이터가 존재한다. 이를 삭제하기 위하여 먼저 remove 이벤트의 trigger를 RidesView에 등록한다

var RidesView = Backbone.View.extend({

        el: $("#rides"),


        initialize: function(){

            this.collection = new Rides(rides);

            this.render();

            // 컬렉션 add가 호출되면 renderRide를 trigger 한다 

            this.collection.on("add", this.renderRide, this);

            this.collection.on("remove", this.removeRide, this);

        },


        render: function(){

            var that = this;

            _.each(this.collection.models, function(item){

                that.renderRide(item);

            }, this);

        },


        renderRide: function(item){

            var rideView = new RideView({

                model: item

            });

            this.$el.append(rideView.render().el);

        },


        addRide: function(e){

            e.preventDefault();


            var formData = {};

            // jQuery의 each로 formData key=value 객체를 만듦

            $("#addRide").children("input").each(function (i, el) {

                if ($(el).val() !== "") {

                    formData[el.id] = $(el).val();

                }

            });


            // rides 배열에 저장

            rides.push(formData);

            // 컬렉션 객체에 저장 

            this.collection.add(new Ride(formData));

        }, 


        // 삭제된 모델을 인자로 자동 넣어준다 

        removeRide: function(removedRide){

            // attributes는 Model의 hash key=value object 이다 

            var removedRideData = removedRide.attributes;


            _.each(removedRideData, function(val, key){

                if(removedRideData[key] === removedRide.defaults[key]){

                    console.log(">> 1 : " + removedRideData[key]);

                    delete removedRideData[key];

                }

            });


            _.each(rides, function(ride){

                if(_.isEqual(ride, removedRideData)){

                    console.log(">> 2 : " + ride);

                    rides.splice(_.indexOf(rides, ride), 1);

                }

            });

        },

        

        // add버튼 누를때 이벤트 발생하여 addRide 메소드 호출

        events:{

            "click #add": "addRide"

        }

    });


  - 삭제버튼을 클릭하면 삭제가 잘 된다 



* 지금까지의 소스 

riding.zip



<참조>

  - 원문 : Backbone.js Developing 번역글

posted by peter yun 윤영식
2013.03.13 16:58 Testing, TDD/Test First

Backbone.js 번역서를 보던 중 코드를 테스트 해볼 수 있는 방법을 찾아 보았다. 백본이 브라우져에서 구동되는 SPA 라는 점을 감안한다면 브라우져 없이도 테스트 가능케 하는 방법으로 Casper.js 가 괜찮은 대안으로 보였다.  알아 볼까나~~~



1) Casper.js 란 무엇인가?

  - 클라이언트 사이드 화면에 대하여 PhatomJS 기반하에 자바스크립트 코드로 테스트를 좀 더 쉽게 만들어 주는 유틸리티이다

  - 따라서 사전에 PhantomJS는 설치되어 있어야 한다 (v1.7 이상, $ phantomjs --version 으로 확인)

  - UI 코드 테스팅이 가능하다 : 페이지 네비게이션, 이벤트, 폼 서밋, 화면 렌더링 이미지 캡쳐등이 가능 

  - 즉, 브라우져에서 사람이 하는 행위를 자동화 하여 수행할 수 있다

    


2) 설치하기 

  - GitHub 위치 : https://github.com/n1k0/casperjs

  - Mac : /usr/local/bin 은 .bash_profile 안에 PATH 걸려 있다는 가정

///////////////////////

// phantomjs 먼저 설치

1) 웹사이트에서 zip 파일 다운로드 

2) 심볼릭 링크 : phantomjs 디렉토리로 들어가서 설정한 것임 

$ ln -sf `pwd`/bin/phantomjs /usr/local/bin/phantomjs


///////////////////////

// casperjs 설치 

$ git clone https://github.com/n1k0/casperjs.git

$ cd casperjs/

$ git checkout tags/1.0.2

ln -sf `pwd`/bin/casperjs /usr/local/bin/casperjs



3) 사용하기

  - PhantomJS를 내부적으로 사용하기 때문에 팬텀의 기본 사용법을 익힌다  

    + 팬텀 v1.6 이상부터 자체 내장 모듈을 4가지를 가지고 있다. CommonJS Modules' Require (참조)

       1. webpage : var page = require('webapage').create(); 웹페이지 핸들링 추상화

       2. system : var system = require('system'); os 정보, pid 정보, cli 아규먼트 정보

       3. fs : var fs = require('fs'); 파일 시스템 핸들링, 디렉토리, 패스, 이름 정보

       4. webserver : var svr = require('webserver').create(); Mongoose 라는 자체 웹서버 내장


    + 여러 가지 예제들을 돌려보자 (예제 소스)


  - PhantomJS 간단 예제 

///////////////////////

// 테스트하고 빠져나오기 

// hello.js 코드

console.log("hi dowon");

phantom.exit();


// 결과 

$ phantomjs hello.js

hi dowon



//////////////////////

// URL 속도 측정

// loadspeed.js

var page = require('webpage').create(),

    system = require('system'),

    t, address;


if (system.args.length === 1) {

    console.log('Usage: loadspeed.js <some URL>');

    phantom.exit();

}


t = Date.now();

address = system.args[1];

page.open(address, function (status) {

    if (status !== 'success') {

        console.log('FAIL to load the address');

    } else {

        t = Date.now() - t;

        console.log('Loading time ' + t + ' msec');

    }

    phantom.exit();

})


// 결과 

$ phantomjs loadspeed.js http://www.google.co.kr

Loading time 1027 msec


  - CasperJS API의 예제를 돌려보자  

    + Casper API : var capser = require('casper').create(); 캐스퍼 생성, 로깅, 시작/종료/대기, 마우스이벤트, 페이지네비게이션

    + Client Side API : 에코, 인코딩, 북마크릿(웹킷기반 브라우져만), 폼/필드 값얻기(__utils__ 프로퍼티사용), 마우스 이벤트 

    + Colorizer API : var colorizer = require('colorizer').create('Colorizer'); 레벨에 따른 출력 색깔 표현

        casper.echo('text message', 'INFO'); // green

        casper.echo('text message', 'ERROR'); // red 

        미리 정의된 레벨과 컬러값 

        


    + Tester API :casper객체에 test 프로퍼티로 Tester 클래스 제공함. assert 계열 메소드, info 메세지 

var url = 'http://www.google.fr/';

var casper = require('casper').create();

casper.start(url, function() {

    this.test.assert(this.getCurrentUrl() === url, 'url is the one expected');

});

   + Utils API var util = require('utils')표준 자바스크립트 API 없는 것들 보충. isXX() 계열 메소드, dump하여 JSON 출력등 


  - CasperJS 간단 예제 

////////////////////////////////

// casperjs 사용하여 이미지 생성

// 객체 생성

var casper = require('casper').create({

    // 옵션적용

    onError: function(self, m) {   // Any "error" level message will be written

        console.log('FATAL:' + m); // on the console output and PhantomJS will

        self.exit();               // terminate

    }

});


// 지정 url 호출과 callback 지정 

// start 대신 open 을 통하여 POST, PUT, DELETE 값 전달도 가능 

casper.start('http://www.weather.com/', function() {

    this.captureSelector('weather.png', '#wx-main');

});


// 캐스퍼 수행하기  

casper.run();


// casper.run() 이 Async 구동이기 때문에 casper.exit(); 를 호출하면 이미지 생성전에 exit 됨 (호출하지 말것)

//casper.exit();  



4) Backbone.js 테스트 절차

나름 어떻게 테스트 해 볼 수 있을까 고민하다가 다음의 순서로 해보았고, 코드에 assert을 넣거나 응용을 하면 될듯하다  


  - 먼저 테스트 클라이언트 화면을 만든다 (index.html)

  - CasperJS 테스트 코드를 짠다 

  - 테스트를 위한 웹서버를 구동한다 (static 띄우기)

$ static

serving "." at http://127.0.0.1:8080

16:46:17 [200]: /index.html

16:46:17 [200]: /lib/jquery-1.8.2.min.js

16:46:17 [200]: /lib/backbone-min.js

16:46:17 [200]: /lib/underscore-min.js


  - 브라우져에서 확인(옵션)


  - CasperJS 테스트 수행하기 

$ casperjs  index_test.js

>> {"title":"","completed":false}

test done



5) Node 에서 단순 테스트 하기 

  - 백본을 노드에서 수행할 수도 있다. 어차피 자바스크립트이기 때문이다

  - 기본준비 : underscore.js, backbone.js 모듈을 node_modules 디렉토리방식으로 설치한다 

$ npm install underscore

$ npm install backbone


  - coffeescript 예제 코드 만들기 

Backbone = require 'backbone'


Todo = Backbone.Model.extend {

    # Todo에 대한 기본 속성

    defaults: {

      title: '',

      completed: false

    }

  }


Todos = Backbone.Collection.extend {

    model: Todo

  }


firstTodo = new Todo {title:'Read whole book'}


# 컬렉션 객체에 모델 배열을 전달한다.

todos = new Todos [firstTodo]

console.log todos.length


  - 수행 결과

// 커피파일 컴파일 

$ coffee -c *.coffee


// 노드로 수행 

$ node backbone_node.js

1



<참조>

  - Casper.js 홈페이지

  - NodeQA 사이트 소개글

  - Headless Integration Tests with CasperJS


posted by peter yun 윤영식
2013.03.12 13:55 Backbone.js

MVC 프레임워크를 사용하는 이유는 마틴 파울러 아저씨의 주장처럼 Clean Code를 생산하기 위해서이다. 클린 코드가 되면 클라이언트 입장에서 events와 callbacks의 유지보수 용이성이 높아지고, Testing이 쉬워진다. Backbone.js 는 그 중에서도 가장 간결하면서 여러 Third part 모듈을 붙일 수 있어서 확장성이 높다. 그러나 Backbone.js 만을 가지고 큰 규모의 확장성 있는 애플리케이션을 만들기에는 부족함이 존재한다. 이를 해결할 수 있는 방법을 알아보자 


1) MV* Framework : Backbone.js 

  - Selector : jQuery, YUI 등 선택

  - Template : Handlebar, Mustache 등 선택

  - MVC

    + Model : Data 유효성검사, 서버로부터 가져오고, 여러 화면에 공유하는 백본의 핵심 - Collection 개념으로 확장

    + View : 데이터의 표현, Cotroller 역할 하지 않고  EventListener를 통하여 Controller에게 위임한다 

    + Controller :  백본에선 진정한 Controller 는 없다. View & Router 가 controller와 유사하고, Router는 Model 이벤트의 요청에 대해 View 응답을 갖는다 

  - 백본은 SPA(Single Page Applications) 개발을 위한 기본적인 추상화 레이어(Abstraction Layer)일 뿐이다. 모든 것을 제공하진 않으니 필요한 요소를 잘 선택하여 모듈화해야 한다 



2) 좀 더 복잡한 SPA 개발하기 

  - 백본을 기반으로 Large Scale Application 개발을 위한 프레임워크들

  - http://chaplinjs.org/ 

  - http://thoraxjs.org/ : Backbone.js & Handlebar 

  - http://marionettejs.com/

  - Backbone.js LayoutManager

  - Aura : 위젯기반 프레임워크 



3) 채플린 배우기 

  - 백본은 저수준의 프레임워크이기 때문에 잘 구조화해서 사용하는 방법을 알아야 한다 

  - 백본 예제의 To do list 는 SPA 라고 할 수 없으며 좀 더 규모가 큰 구조화된 애플리케이션 개발의 가이드가 될 수 없다 

  - 예제 : 채플린 기반 Real world application 인 moviepilot

  - GitHub 저장소

  - 의존성 (SmartSolution에서 사용할 기준)

    + Backbone.js

    + Underscore.js

    + jQuery

    + Handlebar.js 

    + AMD (Requires.js)

    + CoffeeScript

  - 채플린 Boilerplate 소스



4) 채플린 Boilerplate 소스 돌려보기 

  - Git clone

$ git clone https://github.com/chaplinjs/chaplin-boilerplate.git

Cloning into 'chaplin-boilerplate'...

remote: Counting objects: 263, done.

remote: Compressing objects: 100% (204/204), done.

remote: Total 263 (delta 135), reused 178 (delta 50)

Receiving objects: 100% (263/263), 302.91 KiB | 148 KiB/s, done.

Resolving deltas: 100% (135/135), done.


  - static 수행 (블로깅)

static

serving "." at http://127.0.0.1:8080


// 브라우져 호출


// 브라우져 호출후 static console 출력 내용 

11:28:08 [200]: /

11:28:08 [200]: /js/vendor/require-2.1.1.js

11:28:08 [200]: /js/hello_world_application.js

11:28:08 [200]: /js/routes.js

11:28:08 [200]: /js/vendor/chaplin-0.6.0.js

11:28:08 [200]: /js/views/layout.js

11:28:08 [200]: /js/vendor/jquery-1.8.3.js

11:28:08 [200]: /js/vendor/underscore-1.4.3.js

11:28:09 [200]: /js/vendor/backbone-0.9.9.js

11:28:09 [200]: /js/controllers/hello_world_controller.js

11:28:09 [200]: /js/models/hello_world.js

11:28:09 [200]: /js/views/hello_world_view.js

11:28:09 [200]: /js/models/base/model.js

11:28:09 [200]: /js/views/base/view.js

11:28:09 [200]: /js/vendor/require-text-2.0.3.js

11:28:09 [200]: /js/lib/view_helper.js

11:28:09 [200]: /js/templates/hello_world.hbs

11:28:09 [200]: /js/vendor/handlebars-1.0.rc.1.js

11:28:09 [200]: /js/lib/utils.js

11:28:09 [404]: /favicon.ico


  - .coffee 소스 수정시 컴파일 방법

    + /coffee 디렉토리에 위치 /js 컴파일된 파일 

    + 컴파일 : coffee --bare --output js/ coffee/


  - 구조파악 

    + models, views, controllers, lib, vendor  디렉토리

    + vendor : backbone.js, jquery.js 등의 모듈 

    + views : Handlebar 템플릿 사용 -> js/templates/hello_world.hbs 

    + index.html : AMD 모듈 관리 (블로깅) -> coffee/hello_world_application.coffee 메인

   


5) 마리오네트

  - 다음 블로깅에서 마리오네트를 살펴보자 : 좀 더 활발하게 활동하고 있다는데 채플린 또는 마리오네트 아니면 코너스톤중 택일



<참조>

  - 채플린 (Chaplin)

  - JavaScript Framework 별 To Do List

  - 예제 : 와인셀러 (블러깅)

  - 채플린 Boilerplate 소스

  - 코너스톤 팀의 Backbone & CSS 를 위한 프레임워크 고도화


posted by peter yun 윤영식
2013.02.20 17:01 Backbone.js

프론트앤드 자바스크립트 프레임워크의 시작은 백본의 이해가 기본이라고 생각합니다. 어떻게 배워야 할지 알아보죠


1) 이럴 때 사용하자 

  - modern single page web application 개발시 사용

  - 다른 최신의 (meteor.js, derby.js, ember.js)를 시작하기 이전에 기본으로 배우자 

  - 자바스크립트 MVC or MV* 프레임워크에 대해서 잘 이해하고 쓰자

  - Node.js와 궁합 잘 맞음 


2) 백본 기초 다지기

  - Developing Backbone.js Applications 번역서로 시작하자


3) 마스터 하기 

  - 자바스크립트를 먼저 익혀야 한다

  - 자바스크립트 생기초 개념

    + JavaScript Objects in Detail

    + JavaScript Variable Scope and Hoisting Explained

    + Understand JavaScript Closure with ease : 꼭 읽자. 설명 잘 했다

  - Model, View, Router, Collections에 대한 개념 정리

    + 모델이란

    + 뷰란

    + 라우터란

    + 컬렉션이란

  - 백본사용하여 개발된 예제 Wine Cellar 예제 시작하기 : Part 1

  - Developing Backbone.js Applications 복습 ^^;

  - 백본관련 블로깅 글 2개 읽기 

    + 백본의 MV* 각 역할에 대한 이해

    + 백본 시작하기 3단계

  - Wine Cellar CRUD 이해하기 : Part 2

  - Wine Cellar 어플리케이션 성능 개선 및 배울점 : Part 3 (꼭 읽자)

  - 마무리 블로깅 꼭 읽자 

    + 뷰와 서브뷰간의 통신 방법 이해하기1, 이해하기2

    + 페이지 변경 제어 이해하기1, 이해하기2


전체 하는데 30시간 정도 투자하시라 (하루 3시간씩 2주면 되겠네요)


4) 마무리

  - 이제 Node.js 를 배워보자 

  - 백본과 노드에 대해서 개념 잡았으면 현대적인 웹앱만들 준비 끝~~~

  - 실제 구현사례는 http://dailyjs.com/web-app.html 여기서 틈틈히 살펴보자 


5) 기타

  - 핸들바 템플릿엔진에 대한 이해

  - 백본 확장, 백본 Grunt, Unit Testing 방법등을 알아본다



<참조>

  - 원문 : http://javascriptissexy.com/learn-backbone-js-completely/

posted by peter yun 윤영식
2013.02.16 11:21 NodeJS/Concept

웹 기술에 대한 발전방향을 고찰해 보자.


1) Physical Level

  - file base - static web (web server : content management, http 통신) - web browser (mime type)

    + Content Delivery Service

  - GET, POST 만 주로 사용



2) Logical Level

  - framework operation (MVC라는 server side기술에서 출발함)

  - controller : request/response, model : data, view : ui  

  - DRY Service: Don't Repeat Yourself 를 위한 좋은 framework으로 요즘 spring 을 기업에서 많이 사용함 

  - Routing 통한 RESTful Web Services : Data Service -> Cloud Service 로 발전 (CRUD 서비스를 GET/POST/PUT/DELETE)

  - RIA 기술의 태동 : 

  - MVC 초기 document base 에서 stream base 로 이동한다. 이에 따라 DB도 code first 로 이동하면서 어플리케이션과 merge를 쉽게 하는 방향으로 이동한다 

  - Data Service로 가면서 View가 없어지면서(None UI) SPA(MS의 서버사이드 기술임)을 스티브 샌더슨이 말하고 있다

  - 즉,  RIA (activex, flash, etc) -> SPA 로 변해감 (기술이 JavaScript로 통일되어 감)

  - application level 이다 



3) SNS Level

  - SNS 기술 : community level, Service Level 이다 

  - 2)의 application level 과 service level 로 구분된다 

  - Client-WebApp, Server-Node.js, NoSQL-MongoDB 기술들의 등장 

  - Client Side에서 SPA (Single Page Application)등장 : Backbone(Underscore), Angular (DI 존재), Ember (DI 없음)

   + 2)레벨의 MVC는 의미가 희석됨

   + Backbone의 $el 는 3세대 jQuery 라고 보면됨 

   + Functional programming이 가능 

   + Backbone -> AngularJS로 이동하면 된다 

  - Client + Server + Store 를 합치는 기술 = Meteor 또는 Derby 

  - MV* = Functional 이라는 개념으로 이동한다. 이것은 뷰가 모델이 되고, 컨트롤러가 없어지고, 나뉘었다 합쳐졌다하면서 데이터만 남는다. 즉, 과거 MVC 처럼 역할이 나뉘지 않는다

   


4) Contextual Level

  - 융합 서비스

  - Trend (500만) -> Culture (1000만) 즉, SNS를 통하여 트랜드나 문화로 가는 서비스 레벨

  - 데이터에 대한 MapReduce만 남는다 

    + Map = Key + Value 예) JSON

    + Reduce Function = Business Intelligence 솔루션으로 가는 것이다


결론, 기술 변천을 느끼고 만들어 가려면 Coding 하자.... ^^


<참조>

  - KOSTA : 이복영 강사, MongoDB/Node.js 강의 4주차 

posted by peter yun 윤영식

웹애플리케이션을 개발하기 위한 최신 기술셋을 알아보자. 모바일 컨버전스 솔루션 또는 서비스를 개발하기 위하여 방향전환을 시도중이다. 14년을 Java만 사용하다가 이제 다시 Reset 하는 기분으로 스터디중이랄까... 기본 언어가 자바스크립트이기 때문에 틈틈히 언어 공부도 필요하다. 하기 작성된 목록은 원문의 내용중 눈에 띄는 것을 임으로 정리한 것이다. 


1) Node.js 

  - 생태계가 잘 갖추어져 가고 있다 : modulesresources

  - 특징 : single-threaded, event-driven, asychronous I/O JavaScript Server Framework 

  - twitter list 팔로잉해서 최신 정보를 받자 

  - Logging, Error Handling, Bootup&Restart, Hosting 등의 해결책을 제시하고 있다 


2) JavaScript 

  - Node를 하려면 기본적으로 숙달해 있어야 한다 (JavaScript: The Definition Guide 추천 - 번역서 나왔음 6th)

  - DailyJS 통하여 최신 정보도 숙지한다 


3) CoffeeScript

  - .coffee 확장자로 코딩하여 .js로 컴파일 된다

  - 코드가 깔끔해 지고 유지보수성이 높아진다 

  - CoffeeScript의 스타일 가이드 참조 (참조2)

  - JavaScript를 CoffeeScript로 전환 툴

  - cake.coffee 툴 : CoffeeScript로 작성한 make 버전이다. CLI 방식 호출 (참조)


4) MongoDB

  - NoSQL : JSON방식 데이터 통신, 저장은 BSON(Binary JSON) 형태, JavaScript언어로 제어 

  - Replication Set 을 통한 High Availability 제공

  - Sharding을 통한 Scale-out을 제공

  - Aggregation Framework을 통하여 Big Data 제어 


5) Web Application 개발

  - Node에서는 Jade(Template Engine)사용, CSS는 stylus 사용함 

  - jQuery 기본 사용

  - UI MV* Framework으로 Backbone.js가 대세 - underscore.js를 기본사용함 -

  - Express : Node 에서 기본사용하는 MVC Framework - REST Web Services 개발함 - 


6) Testing 

  - Jasmine : BDD 

  - Vows : 비동기 BDD

  - QUnit : jQuery Javascript library


7) 통합 해주는 것들 

  - Express 개발할 때 : Express Wiki

  - CoffeeScript, Express, Jade, Stylus에 대한 boilerplate 코드 생성 : Cham

 

8) 추가적인 것들

  - socket.io : 실시간 구현

  - meteor : 실시간 서버 프레임워크 

  - 모바일 프레임워크 : PhoneGap


위의 내용들이 대충 눈에 들어오면 SKT의 CornerStone Framework을 내가 생각하는 모바일 컨버전스 솔루션이나 서비스에 접목 시켜 볼까 한다. 맨땅에 해딩하지 말고 이미 만들어진 것을 사용 목적에 맞게 수정하여 써보는 방향을 택한다. 실력이 된다면 기여자가 되보고 싶다. 



<참조>

  - 원문 : Getting Started With Node.js, Coffeescript, MongoDB, and More

posted by peter yun 윤영식
2013.01.10 23:33 Backbone.js

1) Backbone의 탄생

  - Clean Code를 위한 UI 단의 MVC Framework 

  - Single Page Application (SPA)를 구현하는 가벼운 Framework


2) Backbone과 함께 협력하는 모듈들

  - Backbone과 함께 쓸 수 있는 모듈은?

  - 프로젝트 구조는?

  - Underscore.js, jQuery 의존. MIT 라이센스


3) Backbone의 아키텍쳐 

  - DOM UI + View(Template) + Model(Collection) 동작방식 및 설명

  - Large Scale Application 개발시 사용하라

  - Backbone으로 만들어 보는 Chaplin : https://github.com/chaplinjs/chaplin (Real-World Single-page application)

  - Chaplin에 대한 설명 : 다양한 패턴을 사용한다


posted by peter yun 윤영식
2012.12.29 11:36 Backbone.js

View단위 MVC Framework으로 알려진 몇가지에 대해서 알아보자. MOVE solution으로 M=Model, O=Operation, VE=View 이다. 특히 View는 Logical DOM을 핸들링하게(Stream을 타고 즉, 동적으로 Storage지까지 가는 것이다. Stream=Function 이다.) 되고 MVC의 Controller 역할을 하게 된다. Operation은 단순 서비스/이벤트 역할이다. 대표적인 프레임워크가 BackBone이다. 

HTML -> Dynamic -> WebApp 그 정점에 SPA(Single Page Application)이 존재하고, 결국 최종 종착점은 고객에게 서비스하기 위한 View 기술이다. 여기에 필요한 전체 구조는 BackBone + Node.js + MongoDB 라고 보면되고, 이들은 Stream(Dynamic)하게 그러면서 Functional로 연력되어 Schemaless하게 움직이게 된다.



1) 전체 레밸의 MVC Framework

  - 브라우저 : BackBone.js

  - 서버 : Node.js위에서 구동되는 Express.js

  - 스토리지 : MongoDB위의 Mongoos 

* Node.js로 구성할 수 있는 Web App의 구성도



> BackBone.js 


> Ember.js


> Angular.js


3가지의 장단점에 대해서 검토해 보자 (다음번에 구체적으로 정리) O;TL

posted by peter yun 윤영식
prev 1 next