[javascript] Backbone.js에서 URL 해시(Hash)를 이용한 라우팅 방법

22 Nov 2023

javascript

Backbone.js는 웹 애플리케이션의 라우팅을 쉽게 처리할 수 있는 기능을 제공합니다. 이를 통해 URL의 변경에 따라 해당하는 뷰를 로드하고 상태를 업데이트할 수 있습니다. 이번 글에서는 Backbone.js에서 URL 해시(Hash)를 이용한 라우팅 방법에 대해 알아보겠습니다.

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

라우터(Router)는 Backbone.js에서 URL과 뷰를 연결해주는 역할을 합니다. 다음과 같이 라우터를 생성할 수 있습니다.

var AppRouter = Backbone.Router.extend({
  routes: {
    "": "home",
    "about": "about",
    "contact": "contact"
  },

  home: function() {
    // home 뷰 로드
  },

  about: function() {
    // about 뷰 로드
  },

  contact: function() {
    // contact 뷰 로드
  }
});

var router = new AppRouter();
Backbone.history.start();

위 코드에서 routes 객체는 URL 해시와 해당하는 뷰 메서드를 매핑합니다. 예를 들어 #about이라는 URL이 있을 경우 about 메서드가 호출되어 about 뷰를 로드하게 됩니다.

2. 해시(Hash) 변경 감지하기

URL 해시가 변경될 때마다 Backbone.js는 해당하는 라우터 메서드를 호출합니다. 이를 이용하여 URL 해시 변경을 감지하고 원하는 동작을 수행할 수 있습니다.

$(window).on("hashchange", function() {
  var fragment = window.location.hash;
  router.navigate(fragment, { trigger: true });
});

위 코드에서 hashchange 이벤트가 발생할 때마다 navigate 메서드를 호출하여 라우터를 트리거합니다. 이를 통해 URL이 변경될 때마다 해당하는 뷰를 로드하도록 할 수 있습니다.

3. 뷰(View) 업데이트하기

URL이 변경될 때마다 해당하는 뷰를 로드하고 업데이트하기 위해서는 뷰의 메서드에서 DOM을 조작하는 작업을 수행해야 합니다. 이 때 Backbone.js의 이벤트 기반 아키텍처를 활용하여 뷰의 상태를 업데이트할 수 있습니다.

var HomeView = Backbone.View.extend({
  el: "#home",

  initialize: function() {
    this.render();
  },

  render: function() {
    this.$el.html("This is the home view.");
  }
});

var AboutView = Backbone.View.extend({
  el: "#about",

  initialize: function() {
    this.render();
  },

  render: function() {
    this.$el.html("This is the about view.");
  }
});

var ContactView = Backbone.View.extend({
  el: "#contact",

  initialize: function() {
    this.render();
  },

  render: function() {
    this.$el.html("This is the contact view.");
  }
});

router.on("route:home", function() {
  var homeView = new HomeView();
});

router.on("route:about", function() {
  var aboutView = new AboutView();
});

router.on("route:contact", function() {
  var contactView = new ContactView();
});

위 코드에서 el 속성을 사용하여 뷰가 렌더링될 DOM 요소를 지정합니다. 뷰가 초기화될 때 initialize 메서드가 호출되며, 이후 render 메서드에서 DOM을 업데이트합니다.

결론

Backbone.js를 이용하여 URL 해시(Hash)를 이용한 라우팅을 구현하는 방법에 대해 알아보았습니다. Backbone.js의 라우터 기능을 활용하면 웹 애플리케이션의 URL 변경에 따라 쉽게 뷰를 로드하고 상태를 업데이트할 수 있습니다.