개발일기

Backbonejs는 SPA 방식으로 처음 페이지를 서버에서 불러온 후, 이후에 변경되는 페이지 내 요소들은 클라이언트를 통해 부분 요소만 그려낼 수 있다. 이러한 방식을 사용하면 서버에 주는 부담을 최소화 할 수 있으며 최소한의 새로고침으로 사용자들이 해당 웹을 이용할 때, 자연스럽고 빠른 성능의 화면 변경 요소를 확인할 수 있다. SPA 방식으로 검색 페이지를 구현하고 검색 결과를 공유하기 위해 다른 사용자에게 URL를 공유하면 검색 결과가 나온 페이지가 아닌 검색을 처음부터 진행해야하는 페이지가 불러와지는 것을 확인할 수 있다. SPA 방식이지만 다른 사용자에게 공유할 수 있는 URL을 Backbonejs의 Router로 생성하여 공유할 수 있다. 1. Backbonejs의 Router // ind..

1. on() 이벤트 import Backbone from 'backbone'; const FruitModel = Backbone.Model.extend({ defaults: { name: 'melon', price: 5000 } }); const fruitModel = new FruitModel(); fruitModel.set({ name: 'water melon', price: 20000 }); // 속성 변경 fruitModel.on('change', function(e) { // 모델 속성 변경 이벤트 console.log(e.toJSON()); }); on() : 모델에 발생하는 이벤트에 따라 콜백함수를 연결해주는 메서드이다. 여기서 과일 모델의 속성을 이름은 수박, 가격을 2만원으로 수정하면 ..

1. Collection에 Model 추가 import Backbone from 'backbone'; const FruitModel = Backbone.Model.extend({ defaults: { id: '', name: '', price: '' } }); const FruitCollection = Backbone.Collection.extend({ model: FruitModel }); // 컬렉션 생성 const fruitCollection = new FruitCollection(); // 객체 생성 fruitCollection.add({ id: 'mangoId', name: 'mango', price: 1000 }); // 모델 추가 fruitCollection.add({ id: 'orangeI..

1. View 객체 생성 및 메서드 import Backbone from 'backbone'; const FruitView = Backbone.View.extend({ el: "#backbone-view", // 렌더링할 DOM 요소 template: "Orange Yummy!", // 템플릿 initialize: function() { // 초기화 메서드 console.log('view init'); }, render: function() { // 렌더링 메서드 this.$el.html(this.template) } }); const fruitView = new FruitView(); // 객체 생성 Backbone.View.extend({ }); 를 통해 뷰를 생성할 수 있다. 뷰를 생성한 후, ne..

1. 모델 객체 생성 import Backbone from 'backbone'; const FruitModel = Backbone.Model.extend({ defaults: { name: 'mango', price: '1000', } }); // 모델 생성 const fruitModel = new FruitModel(); // 모델 객체 생성 Backbone.Model.extend({ }); 를 통해 모델을 생성할 수 있다. 모델을 생성한 후, new 연산자를 사용하여 모델 객체를 생성하여 사용한다. 2. 모델 속성 추가 및 출력 import Backbone from 'backbone'; const FruitModel = Backbone.Model.extend({ defaults: { name: 'ma..

1. Backbone.js 란? Backbone.js는 자바스크립트의 클라이언트 측 코드에서 SPA를 원활하게 개발할 수 있는 MV* 패턴의 프레임워크이자 자바스크립트 라이브러리다. Backbone.js는 컨트롤러가 없기에 MVC패턴을 변형한 MV*패턴이라 불리운다. 요즘에 많이 쓰이는 React, Vue를 대신하여 JQuery와 Vanila Javascript를 사용하여 SPA를 개발할 경우 Backbone.js는 유용하게 활용된다. 모델(Model) : 애플리케이션과 상호작용하는데 필요한 데이터를 추가하여 보관한다. 뷰(View) : 템플릿을 나뉘어진 뷰를 모델과 결합하여 모델 또는 컬렉션의 데이터가 포함된 템플릿 또는 HTML 코드를 출력한다. 라우트(Route) : URL변경으로 페이지를 새로 불..