Backbonejs - Router로 URL 생성하기

Backbonejs는 SPA 방식으로 처음 페이지를 서버에서 불러온 후, 이후에 변경되는 페이지 내 요소들은 클라이언트를 통해 부분 요소만 그려낼 수 있다. 이러한 방식을 사용하면 서버에 주는 부담을 최소화 할 수 있으며 최소한의 새로고침으로 사용자들이 해당 웹을 이용할 때, 자연스럽고 빠른 성능의 화면 변경 요소를 확인할 수 있다.

SPA 방식으로 검색 페이지를 구현하고 검색 결과를 공유하기 위해 다른 사용자에게 URL를 공유하면 검색 결과가 나온 페이지가 아닌 검색을 처음부터 진행해야하는 페이지가 불러와지는 것을 확인할 수 있다.

SPA 방식이지만 다른 사용자에게 공유할 수 있는 URL을 Backbonejs의 Router로 생성하여 공유할 수 있다.

 

1. Backbonejs의 Router

// index.js
import Backbone from "backbone";

const Router = Backbone.Router.extend({
    routes: { // 라우트 목록
        "": "init", // 처음 주소
        "mango/choco": "mangoChoco",
        "banana/melon": "bananaMelon",
        // "URL 형식": "해당 주소일 때, 실행할 함수"
    },
    init: function() {
        console.log('init');
    },
    mangoChoco: function() {
        console.log('mango choco juice');
    },
    bananaMelon: function() {
        console.log('banana melon juice');
    } // 라우트와 연결된 함수 목록
});

const router = new Router(); // Router 객체 생성
Backbone.history.start();

routes는 URL과 해당 URL에 접근했을 때, 처리할 함수를 나열한 목록이다. 위의 코드를 바탕으로 실행하면 처음 페이지는 init이라는 함수가 실행되고, mango/choco라는 URL에 접근하면 mangoChoco라는 함수가 실행된다.

 

<!-- index.html -->
<a href="#">init</a>
<a href="#/mango/choco">mango choco</a>
<a href="#/banana/melon">banana melon</a>

index.html과 연결하여 a태그를 통해 텍스트를 클릭하면 URL이 변경되면서 콘솔에 함수별 로그가 찍히는 것을 확인할 수 있다.

 

• Backbone.history.start() : Backbonejs가 Router를 받고 URL 히스토리를 관리할 수 있도록 해주는 부분이다. Router 객체를 생성한 후, 잊지말고 추가해야하는 코드이다.
• # : 페이지 새로고침없이 URL를 변경하려면 #이 필요하다. routes에 매핑된 라우터 목록들은 # 다음을 기준으로 URL을 받는다. ( [page url]#/manogo/choco -> 페이지 새로고침없이 라우트 매핑 후 실행)

 

2. Parameter 추가

// index.js
import Backbone from "backbone";

const Router = Backbone.Router.extend({
    routes: { // 라우트 목록
        "": "init", // 처음 주소
        "fruit/:name": "fruitName", // name 파라미터
        // :뒤에 파라미터명을 입력
    },
    init: function() {
        console.log('init');
    },
    fruitName: function(name) {
        console.log(`fruit name : ${ name }`);
    } // 라우트와 연결된 함수 목록
});

const router = new Router(); // Router 객체 생성
Backbone.history.start();

: 뒤에 파라미터명을 써주면 URL을 동적으로 생성할 수 있다.

a태그를 통해 fruit/orange, fruit/mango 등으로 URL을 변경하면 fruitName이라는 함수가 실행된다. 파라미터를 fruitName 함수로 불러와 사용할 수 있다.

 

2-1. Parameter Wildcard

// index.js
import Backbone from "backbone";

const Router = Backbone.Router.extend({
    routes: { // 라우트 목록
        "": "init", // 처음 주소
        "fruit/*info": "fruitInfo", /. *로 모든 텍스트를 받는다.
    },
    init: function() {
        console.log('init');
    },
    fruitInfo: function(info) {
        console.log(`fruit info : ${ info }`);
    } // 라우트와 연결된 함수 목록
});

const router = new Router(); // Router 객체 생성
Backbone.history.start();

• * wildcard : fruit뒤에 오는 파라미터는 구분짓지않고 모두 info에 포함되어 매칭된다. fruit/mango이거나 fruit/orange/1000이 오든 슬래시(/) 여부에 상관없이 info 파라미터에 매칭되어 콘솔에 출력된다.

2-2. 능동적인 Parameter 생성

// index.js
import Backbone from "backbone";

const Router = Backbone.Router.extend({
    routes: { // 라우트 목록
        "": "init", // 처음 주소
        "fruit(:/name)(/:price)": "fruitInfo", // 파라미터가 있어도 되고 없어도  된다
    },
    init: function() {
        console.log('init');
    },
    fruitInfo: function(name, price) {
        console.log(`fruit name : ${ name }`);
        console.log(`fruit price: ${ price }`);
    } // 라우트와 연결된 함수 목록
});

const router = new Router(); // Router 객체 생성
Backbone.history.start();

파라미터를 ()로 감싸면 해당 파라미터가 존재하거나 존재하지 않아도 매핑된 라우터를 실행한다. name과 price 파라미터에 각각 mango, price를 매칭하여 fruit/mango/1000이라는 URL로 변경하면 콘솔에 name과 price값이 찍힌다. 만약 name과 price 파리미터에 값을 추가하지않고 fruit으로만 URL을 변경하면 해당 파리미터의 값은 null로 반환되어 콘솔에 찍힌게 된다.

 

3. navigate()로 URL 변경

<!-- index.html -->
<button id="clickTest">test</button>

// index.js
/*
	...
*/

const router = new Router();
Backbone.history.start()

// navigate()는 router 객체와 history.start()를 한 이후에 입력해야 작동한다.
$("#clickTest").on('click', function() {
    router.navigate("fruit/orange/5000")
}); // index.html의 버튼을 클릭하면 navigate()가 작동한다.

• navigate() : URL을 수정한다. 옵션을 추가하지 않으면 Router에 매핑된 함수는 실행하지않고 단순히 URL만 수정하도록 작동한다.  +URL 히스토리를 쌓는다.

3-1. trigger 옵션 추가

const router = new Router();

Backbone.history.start()
router.navigate("fruit/orange/5000", {trigger: true})

• trigger : trigger 옵션을 true로 설정하면 navigate()로 변경된 URL에 매핑된 Router 함수를 실행한다. 만약 trigger를 false로 설정하면 함수를 실행하지않고 단순히 URL만 수정한다. + URL 히스토리를 쌓는다.

3-2. replace 옵션 추가

const router = new Router();

Backbone.history.start()
router.navigate("fruit/orange/5000", {replace: true})

• replace : replace 옵션을 true로 설정하면 URL 히스토리를 쌓는게 아니라 현재 URL에서 navigate()의 파라미터로 설정된 URL로 변경만한다. URL 히스토리를 쌓지 않기 때문에 뒤로가기 버튼을 누르면 index.html이 아닌 그 이전의 페이지로 이동하게 된다.

• 즉, trigger 옵션은 URL 히스토리를 추가하고, replace 옵션을 URL 히스토리를 추가하지 않는다.

---

참고 사이트 : 

https://backbonejs.org/#Router

Backbone.js

 

https://dzone.com/articles/backbone-tutorial-part-7

BackBone Tutorial - Part 7: Understanding Backbone.js Routes and History - DZone

 

https://stackoverflow.com/questions/19947281/where-to-call-backbone-history-start

Where to call Backbone.history.start()?

 

https://www.geeksforgeeks.org/backbone-js-history/

Backbone.js History - GeeksforGeeks