[javascript] Marionette.js의 라우팅(Routing) 기능을 사용하여 페이지 네비게이션을 구현하는 방법은 어떤 것인가?

29 Nov 2023

javascript

Marionette.js는 Backbone.js의 확장 프레임워크로, 더욱 강력한 기능을 제공합니다. Marionette.js를 사용하여 페이지 네비게이션을 구현하기 위해서는 라우팅(Routing) 기능을 활용해야 합니다.

라우팅 기능을 사용하면 URL의 변경에 따라 해당하는 컨트롤러를 호출하고, 알맞은 뷰를 렌더링할 수 있습니다. 이를 통해 페이지 간의 전환과 각 페이지에 필요한 데이터의 로딩 등을 쉽게 처리할 수 있습니다.

다음은 Marionette.js를 사용하여 페이지 네비게이션을 구현하는 예제입니다.

라우터(Router) 정의하기

const AppRouter = Marionette.AppRouter.extend({
  appRoutes: {
    '': 'home',
    'about': 'showAbout',
    'contact': 'showContact',
    // 추가적인 라우트 정의 가능
  },

  controller: {
    home: function() {
      // 홈 페이지 컨트롤러 동작
    },

    showAbout: function() {
      // 어바웃 페이지 컨트롤러 동작
    },

    showContact: function() {
      // 컨택트 페이지 컨트롤러 동작
    },

    // 추가적인 컨트롤러 액션 정의 가능
  }
});

애플리케이션 초기화 및 라우터 설정하기

const MyApp = new Marionette.Application();

MyApp.on('start', function() {
  const router = new AppRouter();
  Backbone.history.start();
});

MyApp.start();

뷰(View)와 컨트롤러(Controller) 구현하기

const HomeView = Marionette.View.extend({
  template: _.template('<h1>Home</h1>')
});

const AboutView = Marionette.View.extend({
  template: _.template('<h1>About</h1>')
});

const ContactView = Marionette.View.extend({
  template: _.template('<h1>Contact</h1>')
});

const HomeController = {
  home: function() {
    const homeView = new HomeView();
    MyApp.mainRegion.show(homeView);
  },

  showAbout: function() {
    const aboutView = new AboutView();
    MyApp.mainRegion.show(aboutView);
  },

  showContact: function() {
    const contactView = new ContactView();
    MyApp.mainRegion.show(contactView);
  },
};

이제 페이지 네비게이션을 구현하기 위해 정의한 라우터와 컨트롤러를 사용할 수 있습니다. URL의 변경에 따라 해당하는 컨트롤러를 호출하고, 알맞은 뷰를 렌더링하는 방식으로 페이지 간의 전환이 이루어집니다.

위의 예제는 Marionette.js를 사용하여 페이지 네비게이션을 구현하는 간단한 방법을 보여줍니다. 더 복잡한 페이지 네비게이션 구조를 구현하기 위해서는 라우터와 컨트롤러를 확장하거나 Marionette.js에서 제공하는 다른 기능들을 사용할 수 있습니다.

자세한 내용은 Marionette.js 공식 문서를 참조하시기 바랍니다. (https://marionettejs.com/)