Backbone.js는 JavaScript 기반의 클라이언트 사이드 웹 애플리케이션 개발을 위한 프런트엔드 프레임워크입니다. 페이지 라우팅(Routing)은 Backbone.js에서 중요한 개념 중 하나로, URL 변화에 따라 다른 동작을 수행하고 해당하는 뷰(View)를 렌더링합니다. 이번 포스트에서는 Backbone.js에서 페이지 라우팅을 구현하는 방법에 대해 알아보겠습니다.

1. 라우터(Router) 생성하기

Backbone.js에서 페이지 라우팅은 라우터(Router) 객체를 생성하여 관리합니다. 라우터 객체는 Backbone.Router를 상속받은 사용자 정의 클래스로, URL 경로와 해당하는 동작을 매핑합니다.

var appRouter = Backbone.Router.extend({
  routes: {
    "": "home",           // 루트 경로인 경우 home 메소드 호출
    "about": "about"      // /about 경로인 경우 about 메소드 호출
  },

  home: function() {
    // 루트 경로에 해당하는 동작 수행
  },

  about: function() {
    // /about 경로에 해당하는 동작 수행
  }
});

var router = new appRouter();

위의 예제에서는 “/” 경로에 해당하는 동작은 “home” 메소드를 호출하고, “/about” 경로에 해당하는 동작은 “about” 메소드를 호출합니다. 각 메소드에서는 해당하는 뷰를 생성하거나 렌더링하는 등의 동작을 수행할 수 있습니다.

2. 라우터 시작하기

라우터 객체를 생성한 후에는 Backbone.history.start() 메소드를 호출하여 라우팅을 시작해야 합니다. 이 메소드는 기본적으로 HTML5의 pushState를 이용하여 라우팅을 처리하지만, 원하는 경우 hashchange 이벤트를 이용한 해시(#) 기반의 라우팅도 사용할 수 있습니다.

Backbone.history.start();

라우터를 시작할 때, pushState: true 옵션을 넘겨줄 수도 있습니다. 이렇게 하면 URL이 이쁘게 보이고, 실제 서버에서도 해당 경로에 대한 처리를 할 수 있습니다.

Backbone.history.start({ pushState: true });

3. URL 변경하기

라우터가 시작된 후에는 URL을 직접 변경할 수 있습니다. Backbone.js는 navigate() 메소드를 제공하여 URL을 변경하고, 이에 따른 라우터의 동작을 수행할 수 있습니다.

router.navigate("about", { trigger: true });

위의 예제는 “/about” 경로로 URL을 변경하고, 해당하는 동작을 수행합니다. trigger: true 옵션을 넘겨주면, URL이 변경됨과 동시에 라우터의 동작이 자동으로 수행됩니다. 이 옵션을 생략하면, URL만 변경되고 동작은 수행되지 않습니다.

마치며

이번 포스트에서는 Backbone.js에서 페이지 라우팅을 구현하는 방법에 대해 알아보았습니다. Backbone.js를 사용하면 URL을 기반으로 다양한 뷰를 관리하고, 웹 애플리케이션을 더욱 유연하게 구성할 수 있습니다. 더 많은 기능과 옵션에 대해서는 Backbone.js 공식 문서를 참고해보시기 바랍니다.