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://thoraxjs.org/ : Backbone.js & Handlebar
- Aura : 위젯기반 프레임워크
3) 채플린 배우기
- 백본은 저수준의 프레임워크이기 때문에 잘 구조화해서 사용하는 방법을 알아야 한다
- 백본 예제의 To do list 는 SPA 라고 할 수 없으며 좀 더 규모가 큰 구조화된 애플리케이션 개발의 가이드가 될 수 없다
- 예제 : 채플린 기반 Real world application 인 moviepilot
- 의존성 (SmartSolution에서 사용할 기준)
+ Backbone.js
+ Underscore.js
+ jQuery
+ Handlebar.js
+ AMD (Requires.js)
+ CoffeeScript
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) 마리오네트
- 다음 블로깅에서 마리오네트를 살펴보자 : 좀 더 활발하게 활동하고 있다는데 채플린 또는 마리오네트 아니면 코너스톤중 택일
<참조>
- JavaScript Framework 별 To Do List
- 코너스톤 팀의 Backbone & CSS 를 위한 프레임워크 고도화
'Backbone.js' 카테고리의 다른 글
| [Backbone.js] 서점 샘플 응용하기 - 02 (MongoDB 연결하기) (0) | 2013.03.15 |
|---|---|
| [Backbone.js] 서점 샘플 응용하기 - 01 (0) | 2013.03.15 |
| [Backbone.js] Underscore.js 이해와 API 테스트 (0) | 2013.03.11 |
| [Backbone.js] 배우는 방법 (2) | 2013.02.20 |
| [Backbone.js] 기본 개념 잡기 (0) | 2013.01.10 |
