라우팅(Routing)은 웹 애플리케이션에서 URL의 변경에 따라 적절한 동작을 수행하는 기능을 말합니다. Backbone.js에서는 라우팅을 처리하기 위해 Backbone.Router
클래스를 제공합니다. 이 클래스를 사용하여 URL의 변경에 따라 애플리케이션의 상태를 업데이트하고 관련 이벤트를 처리할 수 있습니다.
1. 라우터 클래스 생성
라우터 클래스를 생성하기 위해 다음과 같이 코드를 작성합니다.
var AppRouter = Backbone.Router.extend({
routes: {
'': 'home',
'about': 'about',
'contact': 'contact'
},
home: function () {
// URL이 루트 경로일 때 호출되는 메서드
console.log('Home');
},
about: function () {
// URL에 'about'이 포함될 때 호출되는 메서드
console.log('About');
},
contact: function () {
// URL에 'contact'가 포함될 때 호출되는 메서드
console.log('Contact');
}
});
위 코드에서 routes
객체는 URL 패턴과 해당 URL 패턴에 대응되는 메서드를 매핑한 것입니다. 예를 들어 ''
는 루트 경로를 의미하며 home
메서드와 매핑됩니다. 따라서 웹 애플리케이션의 루트 경로로 이동하면 home
메서드가 호출됩니다.
2. 라우터 인스턴스 생성 및 시작
라우터 클래스의 인스턴스를 생성하고 시작하는 방법은 다음과 같습니다.
var router = new AppRouter();
Backbone.history.start();
위 코드에서 Backbone.history.start()
는 브라우저의 URL 변경을 감지하고 해당되는 라우팅 메서드를 호출합니다.
3. URL 변경에 따른 동작
웹 애플리케이션의 URL이 변경되면 등록된 라우팅 메서드가 호출됩니다. 예를 들어 브라우저 URL이 http://example.com/#about
로 변경되면 about
메서드가 호출됩니다.
라우팅 메서드 내에서는 URL 변경에 따른 적절한 동작을 수행할 수 있습니다. 예를 들어 데이터를 가져와서 모델을 업데이트하거나 뷰를 변경하는 등의 작업을 할 수 있습니다.
4. 다른 옵션 및 기능들
Backbone.js의 라우팅 기능은 더욱 다양한 옵션과 기능을 제공합니다. 예를 들어 URL의 해시 제거 및 HTML5 pushState를 지원하거나, 라우트 이벤트 취소 등의 기능을 사용할 수 있습니다. 자세한 내용은 Backbone.js 공식 문서를 참고하시기 바랍니다.