[javascript] Knockout.js에서의 라우팅 처리 방법

04 Dec 2023

javascript

개요

Knockout.js는 JavaScript 기반의 클라이언트 사이드 MVVM(Model-View-ViewModel) 라이브러리로서, 웹 애플리케이션 개발에 많이 사용됩니다. 이 라이브러리는 뷰와 뷰모델을 자동으로 바인딩하여 UI와 데이터를 동기화하는 기능을 제공합니다.

라우팅은 웹 애플리케이션에서 페이지 간 이동을 가능하게 해주는 기능입니다. 즉, 라우팅을 통해 URL의 경로를 기반으로 다른 페이지나 컴포넌트로 이동할 수 있게 됩니다.

Knockout.js 라우팅 라이브러리

Knockout.js는 기본적으로 라우팅 기능을 내장하고 있지 않기 때문에, 별도의 라우팅 라이브러리를 사용해야 합니다. 가장 많이 사용되는 Knockout 라우팅 라이브러리는 Durandal입니다.

Durandal은 뷰 레이아웃과 뷰 및 뷰모델 간의 관계의 표현을 위한 라우팅 시스템을 제공합니다. 또한, 비동기 모듈 로딩과 의존성 주입을 지원하여 애플리케이션의 구조화를 도와줍니다.

Durandal을 사용한 Knockout.js 라우팅 설정

Durandal을 사용하여 Knockout.js 라우팅을 설정하는 방법은 다음과 같습니다.

라우팅 설정 파일 작성

define(['durandal/app', 'durandal/system', 'plugins/router'], function (app, system, router) {
    // 라우터 구성
    router.map([
        { route: '', title: 'Home', moduleId: 'viewmodels/home' },
        { route: 'about', title: 'About', moduleId: 'viewmodels/about' }
    ]).buildNavigationModel();
   
    // 라우팅 시작
    app.start().then(function () {
        router.activate();
    });
});

뷰 모델 작성

define([], function () {
    var home = {
        // 홈 페이지 뷰모델 내용
    };

    var about = {
        // 어바웃 페이지 뷰모델 내용
    };

    return {
        home: home,
        about: about
    };
});

HTML 파일 작성

<body>
    <div id="content" data-bind="router: true"></div>
   
    <script src="durandal/require.js"></script>
    <script src="durandal/app.js"></script>
    <script src="durandal/system.js"></script>
    <script>
        requirejs.config({
            baseUrl: 'scripts',
            paths: {
                'text': 'durandal/amd/text'
            }
        });
   
        require(['main']);
    </script>
</body>

Durandal을 사용하여 Knockout.js 라우팅을 설정하는 방법을 알아보았습니다. 이를 통해 웹 애플리케이션에서 라우팅 기능을 구현할 수 있게 됩니다.

결론

Knockout.js는 뷰와 뷰모델을 바인딩하여 데이터를 동기화하는 기능을 제공하지만, 기본적인 라우팅 기능은 내장되어 있지 않습니다. 따라서 Knockout.js를 사용하여 웹 애플리케이션을 개발할 때는 별도의 라우팅 라이브러리를 사용하여 라우팅 기능을 추가해야 합니다. Durandal은 Knockout.js와 함께 사용하기 좋은 라우팅 라이브러리 중 하나입니다.

참고: Durandal 라우터 문서