[javascript] Backbone.js에서 라우팅 이벤트 처리 방법

라우팅(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 공식 문서를 참고하시기 바랍니다.