[6기 대구 허정욱] 프론트앤드 프레임워크 BackBoneJS

"코드는 자산이 아닙니다. 코드를 많이 짤수록 나중에 유지보수해야 할 게 많아집니다."

□ backbone.js 란?

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

- Backbone.org

Backbone.js를 이용해 단일 페이지 애플리케이션(SPA) 모델로 사이트를 구축하는 방법뿐만 아니라, 모델-뷰-컨트롤러(MVC) 아키텍처의 Backbone 특유의 맛을 살려 구조화된 자바스크립트, 애플리케이션을 만드는 방법을 배울 수 있습니다. Backbone의 기본적인 사항들은 MVC, SPA를 시작으로 Todo리스트앱, RESTful, 그리고 모듈화된 앱과 같은 애플리케이션을 구현할 수 있습니다. BackBone.js는 클라이언트 측 코드를 보다 잘 만들고, 유지보수 하기 쉽게 만들기 위한 중급개발자들을 위해 만들어진 프레임워크입니다. 자바스크립트의 기초 사항을 이해해야 쉽게 접근이 가능합니다. 

Modern Single Page Web Application 개발시에 사용합니다.

BackboneJS를 이용하게 되면, 코드를 구조화하고 쉽게 확장할 수 있습니다.

Ajax로 꼬일대로 꼬인 부분, 도저히 이해할 수 없는 Call path를 쉽게 해 줍니다.

Event 갯수가 많아지고 복잡해지면서 코드를 구조화하고 쉽게 확장할 수 있게 Backbon이 담당해줍니다.

□ 모델-뷰-컨트롤러

모델-뷰-컨트롤러(Model-View-Controller, MVC)는 소프트웨어 공학에서 사용되는 아키텍처 패턴입니다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비지니스로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있습니다.

 [참조 : 위키백과 (http://ko.wikipedia.org/wiki/모델-뷰-컨트롤러)]

모델, 뷰, 컨트롤러의 관계를 묘사하는 간단한 다이어그램. 주: 굵은 선은 직접적인 관계를, 점선은 간접적인 관계를 나타낸다(옵저버 패턴).

모델-뷰-컨트롤러는 응용 프로그램을 세 가지의 구성요소로 나눈다. 각각의 구성요소들 사이에는 다음과 같은 관계가 있다. ^[1]

• 컨트롤러는 모델에 명령을 보냄으로써 모델의 상태를 변경할 수 있다. (예: 워드 프로세서에서 문서를 편집하는 것) 또, 컨트롤러가 관련된 뷰에 명령을 보냄으로써 모델의 표시 방법을 바꿀 수 있다. (문서를 스크롤하는 것)
• 모델은 모델의 상태에 변화가 있을 때 컨트롤러와 뷰에 이를 통보한다. 이와 같은 통보를 통해서 뷰는 최신의 결과를 보여줄 수 있고, 컨트롤러는 모델의 변화에 따른 적용 가능한 명령을 추가·제거·수정할 수 있다. 어떤 MVC 구현에서는 통보 대신 뷰나 컨트롤러가 직접 모델의 상태를 읽어 오기도 한다.
• 뷰는 사용자가 볼 결과물을 생성하기 위해 모델로부터 정보를 얻어 온다.

[참조 : 위키백과 (http://ko.wikipedia.org/wiki/모델-뷰-컨트롤러)]

□ backbone.js 장점

Backbone의 장점에 대해 모르는 사람들이 많아, 한번 정리해보았습니다.

- 프론트 앤드 프레임 워크

- 패턴을 조합하여, 사상을 만들어낸 디자인 아키텍처

- MVC 패턴이다.

-Model, View, Controller(Router)

- 클라이언트 코드를 깔끔하고 쉽게 만들고 관리할 수 있다. 가볍고, 애플리케이션 관리 방식을해치지 않는다. 클라이언트 코드 확장 쉽다.

- 자바스크립트에서 클래스를 생성해서 관리하는 방식의 일종이다.

- 화면 갱신 x -> Single Page Application 개발을 대단히 용이하게 해준다.

- 서버사이드와의 연동관련 기능 -> 데이터의 CRUD(저장, 조회, 갱신, 삭제) 편리하게 구현할 수 있다.

- Underscorejs 의존성이 있다. 많이 유용한 편이다.

- jQuery와 함께 사용할 수 있다.

□ Single Page Application?

Backbone.JS를 공부하다보면 궁금한 "Single Page Application"을 정리해보았습니다.

- 하나의 HTML파일로된 애플리케이션을 의미한다.

- Location.jash를 사용하면, 하나의 HTML파일에서도 즐겨찾기가 가능하도록 URL을 변경해가면서 다양한 View를 보여줄 수 있다.

- 화면 갱신이 일어나지않아, UX 에서의 장점이 있으며, 현재 트위터 등이 그렇게 쓰이고 있다.

- Ajax 집중적 사용 방지하는 이유는?

- 웹 애플리케이션과 웹사이트 : 웹 개발 두 분야에서는 웹 해법 두 종류를 구별하기 위해 사용됩니다.

- 웹사이트에서 Ajax집중적인 사용이 문제가 된다. 아작스는, URL이 동일한 페이지를 변경할 수 있기 때문에, 최종 사용자는 북마크로 페이지 뷰 콘크리트(상태)를 저장할 수 없습니다.

- Ajax로 페이지를 구축하면, 구글링이나 네이버 검색 등 웹사이트 탐색 크롤러 인덱싱이 되지 않습니다.

- 페에지 방문에 따라 서비스 : 페이지가 로드되는 수가 중요한 사이트가 많다. 사용자 경험을 필요로 하는 사이트, 광고사이트 등,,, Ajax는 방해된다.

- 팝업 창에 대한 제어 수시로 필요하다.

-=> 그렇기 때문에, Ajax는 웹사이트에 좋지, 웹 애플리케이션에는 비추다!

-=> 현재는 웹사이트와 웹 애플리케이션 사이의 차이가 불분명해지고 있는 것이 사실이다.

- 페이지 기반의 탐색 및 개발의 단점은?

- 대역폭 낭비, 처리 시간 증가, 전체 페이지의 재구축 문제, iFrame 등

- 비효율적이고 코딩 스타일 제로!

□ backbone.js 구조

Backbone에서 가장 중요한 것은 Model, Collection, View 정도가 될 것입니다.

[BackboneJS 흐름도 참조 블로그 - http://language.is/149 ]

▷ backbonejs MVC 패턴은 다음과 같습니다.

M(model, 데이터) : 개별 데이터

Collection : Model의 집합이며, View와 연결하며, Model에 변화가 생길 때 손 쉽게 UI를 갱신

V(view, UI) : 화면 UI를 담당하며 프론트엔드 특성상 View가 Controller의 성격도 가짐

C(controller, 로직, 데이터 처리) : Router이며, location.hash의 변경에 따른 처리를 담당

코드의 역할을 나눠서 작성하고 관리할 수 있게 합니다.

프로그램의 구조를 체계화를 할 수있습니다.

⑴ Model

Backbone에서 Model은 하나의 단일한 데이터 객체를 의미하고 있습니다. 데이터베이스에 넣을 때에, 하나의 레코드가 될 수도 있습니다. JSON 덩어리가 될 수도 있죠.

개발 될 애플리케이션의 모든 로직들은 Model에서 서버와 주고 받는 Data를 가지고 있고, Model에서 수정, 삭제하며 View를 통해 Data를 볼 수 있습니다.

var Sidebar = Backbone.Model.extend({
  promptColor: function() {
    var cssColor = prompt("Please enter a CSS color:");
    this.set({color: cssColor});
  }
});

window.sidebar = new Sidebar;

sidebar.on('change:color', function(model, color) {
  $('#sidebar').css({background: color});
});

sidebar.set({color: 'white'});

sidebar.promptColor();

[참조 : http://documentcloud.github.io/backbone/#Model]

위와 같이 Sidebar 클래스가 있습니다. 이것은 간단한 와인에 대한 정보를 담고 있습니다.

이 클래스는 Backbone.Model 클래스를 확장해서 만든 것입니다.

클래스를 확장하는 extend 메소드에 이 Sidebar 모델이 어떤 값을 서버에 넘기거나 View에 보여줄 지에 대한 인자값들이 있습니다. 

⑵ Collection

Collection은 Model의 순차적 집합을 의미합니다. Change이벤트를 연결하여, 모델의 변경을 감지할 수 있으며, 모델의 추가, 삭제, 수정등을 통하여 관리할 수 있습니다.

var Library = Backbone.Collection.extend({

  model: function(attrs, options) {
    if (condition) {
      return new PublicDocument(attrs, options);
    } else {
      return new PrivateDocument(attrs, options);
    }
  }

});

[참조 : http://documentcloud.github.io/backbone/#Model]

⑶ View

View는 MVC 패턴에서 V또는 C에 해당하는 보여지는 부분입니다. Router에서 #해쉬 뒤에 있는 경로들이 라우팅되서 적절한 View가 랜더링됩니다. View 는 보여지는 부분이므로 보여질 데이터와 데이터를 담을 템플릿과 사용자로부터 이벤트를 받아 처리할 핸들러를 가지고 있습니다. MVC 로 따져봤을 때, View는 Controller 역할도 맡고 있습니다. 그래서 BackboneJS를 MV패턴이라고도 말할 수 있습니다. Backbone이 MVC인지에 따른 많은 물음표들이 있었습니다. 여기서 BackboneJS의 공식입장으로는 C가 View라고 합니다. 요즘에는 MVC가 Model, Underscore, View라고도 합니다.

아래는 정말 간단한 View를 나타내고 있습니다. Model의 Data를 어떻게 보여줄 지에 대한 용도라고 생각하시면 됩니다.

var DocumentRow = Backbone.View.extend({

  tagName: "li",

  className: "document-row",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  }

  render: function() {
   // underscore를 사용하여 template을 compile한다...
  }

});

[참조 : http://documentcloud.github.io/backbone/#Model]

Backbone,JS는 Underscore.JS의 자식입니다. Underscore.JS는 micro-templating 해결책을 포함하고 있습니다. View를 초기화할 때, "render()"함수를 호출하여 실행하여야 합니다. 

View에서 listeners를 attach하기 위하여, Backbone.View 속성의 "events"를 사용해야 합니다.

View의 전체적인 기능이 뛰어나긴 하지만, <%=%>를 이용할 수 있다는 점에서 장점의 절정을 보여주지않았을까 생각해볼 수 있습니다.

⑷ Router

hash tag(#)를 사용했을 때, application URL의 Routing을 위해 사용되어집니다.

Backbone "Router"는 적어도 한 가지 라우터 또는 특정 라우터 맵의 함수를 포함하고 있야합니다. 라우터는 # 태그 후를 해석합니다. 이 라우터를 통해서 어떤 View를 실행하고 Viewsms는 어떤 Collection을 실행하여 Model의 Data를 보여줄 지를 정합니다.

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

[참조 : http://documentcloud.github.io/backbone/#Model]

□ 개발을 위한 AMD와 Require.js

[참고 : http://helloworld.naver.com/helloworld/591319]

JavaScript 개발은 웹 사이트의 규모가 커질수록 소스를 관리하고 배포하는 비용이 커지는 경향이 있습니다. 또한 오래된 소스의 의존성 파악이 어려워 섣불리 수정하지 못하는 상황에 처하기도 합니다. 더 나은 웹 사이트 혹은 웹앱을 위해서는 해결해야 할 과제이며, 이는 RequireJS를 사용하여 라이브러리 차원에서 보완할 수 있습니다.