[backbone.js] 개념

백본 (Backbone) : 

자신에게 연결되어 있는 소형 회선들로부터 데이터를 모아 빠르게 전송할 수 있는 대규모 전송회선.

백본 홈페이지 : http://backbonejs.org/

백본 예제

backbone-master.zip

도움이 될만한 사이트 모음

백본 첫 개발자를 위한 내용

http://armigar.blog.me/220066638455

백본 피피티 만들 때 도움 되는 것

http://www.slideshare.net/gyutaejo/backbonejs-m-v

투토리얼 동영상 (추천, 처음일경우 꼭 보셈)

https://www.youtube.com/watch?v=FZSjvWtUxYk

백본 시작하기,,

http://linuxism.tistory.com/1488

프론트엔드 웹앱 프레임웍

http://www.slideshare.net/iolo/ss-16821763

백본 괜찮은 예제

http://dogfeet.github.io/articles/2012/backbonejs-by-example.html

네이버 프론트엔드, 백엔드 개념 알차다!

http://helloworld.naver.com/helloworld/819776

 

개발을 위한 AMD와 Require.js

(http://helloworld.naver.com/helloworld/591319)

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

이 글에서는 RequireJS의 바탕이 되는 AMD(Asynchronous Module Definition)의 기본 개념을 살펴보고 RequireJS를 이용한 개발 가이드를 제시합니다.

백본 장점

(http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php 참고)

-프론트 앤드 프레임 워크

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

-MVC 패턴이다.

-Model, View, Controller(Router)

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

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

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

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

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

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

-Single Page Application??

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Backbone이 무엇인가?

프론트엔드 유지하기 쉽게 만들 수 있는... 초경량 라이브러리이다. 4킬로바이트~!

클라이언트 사이드 웹애플리케이션 개발에 MVC 패턴 적용을 가능하게 해주는 자바스크립트 프레임워크 중 하나.

참고로 자바스크립트 MVC패턴 프레임워크에는, JavaScriptMVC, Spine.js, SproutCore->Ember.js 가 있다.

backbonejs MVC 패턴

M(model, 데이터)

V(view, UI)

C(controller, 로직, 데이터 처리)

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

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

Models - MVC에서 model이다. 개별 데이터이다.

Collections - model의 집합이다. view와 연결하여, model에 변화가 생길 때 손 쉽게 UI를 갱신할 수 있다.

Router - MVC에서의 controller이다. location.hash의 변경에 따른 처리를 담당한다.

Views - MVC에서 view이다. 화면에 나타나는 UI를 담당한다. 프론트엔드의 특성상, view가 controller의 성격도 가지고 있다.

2. 왜 backbone을 사용하는가?

뭐, 백본을을 사용 안 해도 된다. 이것은 필수가 아닌 선택이다.

하지만, 편리한 기능을 말해주겠다.

(1) Collection과 View가 연동되어 데이터에 변화가 생길 때, 화면 UI 갱신해주는 일을 편리하게 할 수 있다.

(2) Router가 location.hash 변경에 따른 View의 갱신을 처리하는데 이는 Single Page Application의 개발을 대단히 용이하게 해준다. 사용자 UX에서의 장점이고, 트위터 등의 현재 그렇게 되어있다-

(3) 서버사이드와의 연동관련 기능도 있다. 데이터의 CRUD를 편리하게 구현할 수 있다.

(4) Underscore.js를 꼭 사용해야하는데, 여기 유용한 기능들이 많다.

(5) jQuery와 함께 쓸 수 있다.

끝으로,

백본은 유지보수가 매우 어려운 코드로부터 우리를 벗어나게 해준다.

DOM에서 데이터와 상태를 저장하는 것은 잘못된 생각이다.

템플릿은 개발할 때 절대적으로 필요하다, 자바스크립트 내부에 HTML을 두는 것은 당신에게 악업을 제공한다!

귤 껍데기를 까놓고 알맹이를 버리는 것과 같다.

백본은 내부적으로 자동으로 처리해주는 것들이 있다...

이걸 잘 모르면, 오류가 났을 때 원인을 찾지 못해서 헤메는 경우가 종종 있다.

- 추가

프론트앤드 자바스크립트 프레임워크의 시작은 백본의 이해이다-

MVC 패턴에 대해 설명해주고, Backbonejs에서 MVC 패턴이 무엇인지 말해준다.

그리고 하나씩 Model, Router, View, Collection 을 설명해준다.

마지막으로 코드가 어떻게 줄어지는 지 설명하고, 리펙터링 된 것들을 보여준다.

그리고 오브젝트로 된 것들을 보여준다.

끝끝ㄲ끝끝

예제 : http://dogfeet.github.io/articles/2012/backbonejs-by-example.html

Backbone.js 사전

http://documentcloud.github.io/backbone/#Model

backbone.js 구조

http://nodeqa.com/nodejs_ref/53

backbone.js 한 번 보셈

http://seye2.egloos.com/category/javascript

backbone.js 여기서 짜보기

http://jsfiddle.net/thomas/C9wew/6/