[javascript] Backbone.js에서 URL 라우팅 패턴

22 Nov 2023

javascript

Backbone.js는 웹 애플리케이션의 URL을 효과적으로 관리하기 위한 라우팅 기능을 제공합니다. 이 기능을 사용하면 URL의 변경이나 조작에 따라 해당하는 뷰를 업데이트할 수 있습니다. 이는 웹 애플리케이션의 상태를 표시하기 위한 중요한 요소 중 하나입니다.

URL 라우팅 설정

Backbone.js에서 URL 라우팅 패턴을 설정하는 가장 기본적인 방법은 route 메서드를 사용하는 것입니다. route 메서드는 URL 패턴과 해당하는 핸들러 함수를 매핑하는 역할을 합니다.

예를 들어, 아래의 코드는 /users URL에 해당하는 페이지를 위한 핸들러 함수를 등록하는 예입니다.

var Router = Backbone.Router.extend({
  routes: {
    "users": "showUsers"
  },

  showUsers: function() {
    // 페이지를 위한 뷰를 업데이트하는 코드
  }
});

위의 코드에서 routes 객체는 URL 패턴과 해당하는 핸들러 함수를 매핑합니다. 즉, /users URL에 해당하는 핸들러 함수인 showUsers를 호출합니다.

동적 URL 패턴

때로는 URL 패턴에 동적 요소를 추가해야 하는 경우도 있습니다. Backbone.js에서는 동적 URL 패턴을 설정하는 방법을 제공합니다. 동적 요소는 콜론(:)으로 시작하여 해당하는 값을 변수로 사용할 수 있습니다.

예를 들어, /users/123와 같은 URL 패턴을 처리하기 위해서는 아래와 같이 설정할 수 있습니다.

var Router = Backbone.Router.extend({
  routes: {
    "users/:id": "showUser"
  },

  showUser: function(id) {
    // id 변수를 사용하여 특정 사용자의 정보를 불러오는 코드
  }
});

위의 코드에서 :id는 동적 요소로 사용됩니다. 해당하는 URL 패턴을 대응하는 핸들러 함수에 변수로 전달됩니다.

뷰 갱신

URL 라우팅 패턴이 변경되면 해당하는 뷰를 업데이트해야 합니다. Backbone.js에서는 이를 위해 navigate 메서드를 제공합니다. navigate 메서드는 새로운 URL로 이동하고 뷰를 업데이트하는 역할을 합니다.

아래의 예제는 /users URL로 이동하고 해당하는 뷰를 업데이트하는 코드입니다.

var router = new Router();

var showUsersView = new ShowUsersView();

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

위의 코드에서 navigate 메서드의 첫 번째 인자는 이동할 URL이고, 두 번째 인자는 옵션 객체입니다. trigger: true를 설정하여 해당하는 핸들러 함수를 호출하고 뷰를 업데이트할 수 있습니다.

URL 라우팅 설정

동적 URL 패턴

뷰 갱신

참고 자료