728x90
반응형
Marionette.js Region 을 통한 Life Cycle 관리

Marionette의 Region 객체는 view의 render나 jQuery 객체의 html()을 사용하여 DOM에 뷰를 삽입하는 코드역시 

보일러 플레이트 코드로 보고 이를 제거해준다.


- 보일러 플레이트 코드 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var Sanghoon = new Person({
    firstName: '이',
    lastName: '상훈',
    email: 'devsh@nara.co.kr'
});
 
var MyView = Marionette.ItemView.extend({
    template: '#my-view-template'
});
 
var myView = new MyView({
    model: Sanghoon
});
 
myView.render();
 
//  DOM에 뷰를 넣는다.
$('#content').html(myView.el);
cs


- Region 이용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var Sanghoon = new Person({
    firstName: '이',
    lastName: '상훈',
    email: 'devsh@nara.co.kr'
});
 
var MyView = Marionette.ItemView.extend({
    template: '#my-view-template'
});
 
var myView = new MyView({
    model: Sanghoon
});
 
//  Region 인스턴스를 만들고, 어떤 DOM 엘리먼트를 관리할지 지정한다.
var myRegion = new Marionette.Region({
    el: '#content'
});
 
//  Region 내의  뷰를 보여준다.
var view1 = new MyView();
myRegion.show(view1);
 
//  이 코드 어디선가 다른 뷰를 보여준다.
var view2 = new MyView();
myRegion.show(view2);
cs


얼핏봐서는 코드가 더 늘어난것 처럼 보일수도있겠다. 하지만 region객체를 이용하면 더이상 render 메서드를 호출할필요가없다 show() 메서드 내부에서 render() 를 호출 하고 뷰의 el을 가지고와서 DOM엘리먼트에 추가시킨다. 거거이ㅔ 고스트뷰가 되지않도록 show() 메서드 내에서 이벤트를 close 시킨다. 

Marionette.View 가아닌 Backbone.View 를 사용하였다 하더라도 close 구현체가 존재하지 않는다면 Backbone.View의 내장 메서드인 remove를 호출하여 이벤트를 안전하게 제거한다. 



728x90
반응형
저작자표시

'Backbone.js' 카테고리의 다른 글

Marionette.js 의 메모리관리  (0) 2015.02.27
클라이언트 측 MVC 또는 MV* 란?  (0) 2015.02.10
SPA(Single Page Application) 이란?  (0) 2015.02.10
728x90
반응형

Marionette.js 의 메모리관리


Marionette는 보일러플레이트 코드를 줄이는것외에도 고급 메모리 관리기능을 지원한다.

Marionette의 메모리관리에 공부하기전에 우선 고스트뷰에대해 이해가 필요하다.


고스트뷰(Ghost View) 란?

모델애 이벤트를 bind 하였을때 등록된 뷰를 이벤트의 unbind 없이 제거하였을시 모델은 뷰의 참조를 가지고 있기때문에

자바스크립트의 가바지 컬렉터는 메모리에서 뷰를 해제하지않는다. 이를 고스트뷰 라 한다.


고스트뷰에 대한 이해가 얼핏이라도 되었는가? 이해가 안된다면 우선 소스를 보고 이해하자.


- 모델 객체 생성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
*   공통 모델 객체 생성
*/
var Person = Backbone.Model.extend({
    defaults: {
        firstName: '이',
        lastName: '상훈',
        email: 'devsh@nara.co.kr'
    }
});
var Sanghoon = new Person({
    firstName: '이',
    lastName: '상훈',
    email: 'devsh@nara.co.kr'
});




- 고스트뷰 테스트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
*      고스트뷰 가 발생하는 코드
*/
var ZombieView = Backbone.View.extend({
    template: '#my-view-template',
    initialize: function() {
        //  모델의 change 이벤트에 이 뷰의 render를 바인딩
        this.model.on('change', this.render, this);
    },
    render: function() {
        //  문제 발생을 보여주기 위해서 alert 메시지 출력
        alert('We`re rendering the view');
    }
});
 
//  첫 번째 뷰 인스턴스를 만든다.
var zombieView = new ZombieView({
    model: Sanghoon
});
 
//  두 번째 뷰 인스턴스를 만들고
//  동일한 변수명에 이를 저장한다.
zombieView = new ZombieView({
    model:Sanghoon
});
 
Sanghoon.set('email', 'digimon.1740@gmail.com');
 
cs



위 코드를 실행하게 되면 "We`re rendering the view" 경고창이 두번뜨는것을 볼수 있다.

이를 수정하기 위해선 뷰가 수행되다가 닫힐 준비가됬다면 stopListening을 호출하여 이벤트를 unbind 해야한다


- stopListening 를 사용하여 이벤트 unbind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
*     stopListening 을 호출하여 고스트뷰를 제거
* */
var ZombieView = Backbone.View.extend({
    template: '#my-view-template',
    initialize: function() {
        //  모델의 change 이벤트에 이 뷰의 render를 바인딩
        this.listenTo(this.model, 'change', this.render);
    },
    close: function() {
        //   이 뷰가 리스닝하고 있는 이벤트를 바인딩 해제하자.
        this.stopListening();
    },
    render: function() {
        //  문제 발생을 보여주기 위해서 alert 메시지 출력
        alert('We`re rendering the view');
    }
});
 
//  첫 번째 뷰 인스턴스를 만든다.
var zombieView = new ZombieView({
    model: Sanghoon
});
 
zombieView.close(); // 더이상 수행할 필요가 없을때
 
//  두 번째 뷰 인스턴스를 만들고
//  동일한 변수명에 이를 저장한다.
zombieView = new ZombieView({
    model:Sanghoon
});
 
Sanghoon.set('email', 'digimon.1740@gmail.com');
cs



위 코드에서 model 이벤트의 bind 는 listenTo , unbind 는 stopListening 를 내부적으로 포함한 close가 사용되였다.

이를 Marionette 를 이용하면 아래와 같은 코드가 된다.


- Marionette를 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var ZombieView = Marionette.ItemView.extend({
    template: '#my-view-template',
 
    initialize: function () {
        //  뷰를 렌더링하기 위해 모델 변경을 바인딩한다.
        this.listenTo(this.model, 'change', this.render);
    },
    render: function () {
        //  alert을 통해 좀비 뷰의 문제점을 보여줄 것이다.
        alert('We`re rendering the view');
    }
});
 
//  첫 번째 뷰 인스턴스를 만든다.
var zombieView = new ZombieView({
    model: Sanghoon
});
 
zombieView.close(); //close 를 marionette에서 이미 정의하였다.
 
//  두 번째 뷰 인스턴스를 만들고
//  동일한 변수명에 이를 저장한다.
zombieView = new ZombieView({
    model: Sanghoon
});
 
Sanghoon.set('email', 'digimon.1740@gmail.com');


cs


Marionette를 사용한 코드를 보면 close를 우리가 구현해 주지 않아도 내부적으로 구현하고있다는것을 알 수있다.


- Marrionette 내부의 close 메서드

1
2
3
4
5
6
7
_.extend(Marionette.Controller.prototype, Backbone.Events, {
  close: function(){
    this.stopListening();
    var args = Array.prototype.slice.call(arguments);
    this.triggerMethod.apply(this, ["close"].concat(args));
    this.off();
  }
cs


이와 같이 내부적으로 이미 구현되어있기때문에 Marionette를 사용하는 개발자 입장에서는 close를 일일히 구현할 필요가 없다.


하지만 Marionette.Region을 사용하면 close메서드 마저도 Marionette가 알아서 호출해준다.

즉 Life Cycle을 관리해준다.

다음 주제에서 Marionette의 Life Cycle을 관리하는 객체인 Marionette.Region 을 살펴보자.


728x90
반응형
저작자표시

'Backbone.js' 카테고리의 다른 글

Marionette.js Region 을 통한 Life Cycle 관리  (0) 2015.02.27
클라이언트 측 MVC 또는 MV* 란?  (0) 2015.02.10
SPA(Single Page Application) 이란?  (0) 2015.02.10
728x90
반응형

클라이언트 측 MVC 또는 MV* 란?


지난 포스트에서 단일 페이지 어플리케이션(SPA) 에 대해 간략히 설명하였다. 

참조 : http://devsh.tistory.com/entry/SPASingle-Page-Application-%EC%9D%B4%EB%9E%80

설명하자면 단일 페이지 어플리케이션은 초기 페이지가 로딩된 후에 전체 페이지를 다시 로딩하지 않고 네비게이션과 데이터 요청을 처리한다.

사용자가 어떠한 요청을 하게될때 어플리케이션은 Ajax의XHR(XMLHttpRequest) 로 서버측과 REST API통신을 한다.

모든 커뮤니케이션은 백그라운드에서 서버와 비동기적으로 수행되며 백그라운드에서 비동기적인 작업을 수행되더라도 사용자는 페이지의 다른 부분에서 또 다른 작업을 동시에 수행할 수 있다.

이렇게 초기 SPA 는 Ajax 호출과 jQuery 등의 라이브러리를 통해 구현하였었는데 이러한 방식은 구조화되지 않은 코드를 만들어내어 유지보수를 어렵게 하였다.

코드의 중복과 복잡도 유지보수의 필요성에 의해 클라이언트 측(자바스크립트) 에서도 코드의 구조를 개선하고 유지보수를 쉽게 할 수 있는 전통적인 MVC패턴을 적용하기 시작했다. 

클라이언트측 MVC패턴은 Backbone.js,Angluar.js 등이 있다.

특히 Backbone.js 은 컨트롤러가 존재하지 않고 모델(Model), 뷰(View), 컬렉션(Collection), 라우터(Router)와 같은 핵심 컴포넌트를 가지고있다. 이러한 이유로 고전적인 MVC 패턴(Model2)방식 과는 다르게 MV*라고 불린다. 






728x90
반응형
저작자표시

'Backbone.js' 카테고리의 다른 글

Marionette.js Region 을 통한 Life Cycle 관리  (0) 2015.02.27
Marionette.js 의 메모리관리  (0) 2015.02.27
SPA(Single Page Application) 이란?  (0) 2015.02.10
728x90
반응형

SPA(Single Page Application) 이란? 


단일 페이지 어플리케이션 줄여서 SPA는 현재 웹개발의 트랜드가 되는 차세대 패러다임이다.

전통적인 웹은 요청시마다 새로고침이 일어나며 페이지가 로딩될때마다 서버로부터 리소스들을 전달받아 해석한뒤 화면에 렌더링 하게된다. 그러나 전통적인 방식의 웹은 현재의 풍부한 웹환경을 표현하기에 속도적인 측면에서 많은 리스크를 가지고있었고 이를 해소하기위해 캐싱과 압축이라는 방식으로 어느정도 해소하였지만 결국 브라우저는 모든 CSS, 자바스크립트, HTML을 해석한뒤에 이들을 화면에 렌더링한다. 

단일 페이지 어플리케이션은 브라우저에 로드되고 난 뒤에 페이지 전체를 서버에 요청하는것이 아니라 최초한번 페이지전체를 로딩한후 이후부턴 데이터만 변경해서 사용할 수 있는 웹 어플리케이션을 말한다. 

개발자들은 단일 페이지 어플리케이션을 만들기 위해 Backbone.js,Angular.js 등의 자바스크립트 라이브러리를 사용한다.


728x90
반응형
저작자표시

'Backbone.js' 카테고리의 다른 글

Marionette.js Region 을 통한 Life Cycle 관리  (0) 2015.02.27
Marionette.js 의 메모리관리  (0) 2015.02.27
클라이언트 측 MVC 또는 MV* 란?  (0) 2015.02.10

+ Recent posts

티스토리툴바