Backbone.js는 프론트엔드 웹 애플리케이션을 구축하기 위한 JavaScript 라이브러리입니다. 이를 사용하여 단일 페이지 애플리케이션을 개발할 수 있으며, 라우터를 통해 서로 다른 경로에 대한 동작을 설정할 수 있습니다.

Backbone.js의 라우터는 정적 경로를 기본으로 지원하지만, 동적 경로를 지원하는 방법도 있습니다. 이를 통해 유연한 라우팅을 구현할 수 있습니다.

아래의 예제를 통해 Backbone.js에서 라우터에 동적 경로를 추가하는 방법을 알아보겠습니다.

const Router = Backbone.Router.extend({
  routes: {
    // 정적 경로
    "users": "showUsers",
    
    // 동적 경로
    "users/:id": "showUser",
    
    // 기본 경로
    "*defaultRoute": "defaultRoute"
  },
  
  showUsers: function() {
    // 유저 목록을 표시하는 동작
  },
  
  showUser: function(id) {
    // 지정된 ID의 유저를 표시하는 동작
  },
  
  defaultRoute: function() {
    // 기본 경로에 대한 동작
  }
});

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

위의 코드에서 :id는 동적으로 변경되는 부분을 나타냅니다. 즉, /users/1 또는 /users/2와 같이 다양한 ID를 가진 사용자를 표시할 수 있습니다.

위의 예제에서는 정적 경로인 /users, 동적 경로인 /users/:id, 그리고 기본 경로를 설정했습니다. 각 경로에 해당하는 메서드를 정의하고, 해당 동작을 수행하도록 구현합니다.

라우터를 초기화한 후에는 Backbone.history.start()를 호출하여 브라우저의 URL 변화를 감지하고, 해당하는 라우터 동작을 실행합니다.

이렇게 Backbone.js의 라우터에서 동적 경로를 지원하는 방법을 알아보았습니다. 이를 통해 웹 애플리케이션의 URL을 효과적으로 관리하고, 동적인 화면 전환을 구현할 수 있습니다.

참고 자료

• Backbone.js 공식 문서
• Backbone.js 라우터 동적 경로 예제