Ember.js는 JavaScript 기반의 웹 애플리케이션 개발 프레임워크로, 라우터를 통해 다른 경로로의 동적인 네비게이션을 구현할 수 있습니다. Ember.js의 라우터를 사용하여 동적 라우팅을 구현하는 방법에 대해 알아보겠습니다.

1. 라우트 생성

먼저, 동적으로 라우팅할 페이지의 라우트를 생성해야 합니다. 예를 들어, “post” 라는 경로에 동적으로 포스트의 ID를 전달하는 페이지를 만들어보겠습니다. 다음과 같은 명령어로 라우트를 생성합니다:

ember generate route post/:post_id

위 명령어를 실행하면, app/router.js 파일에 “post/:post_id” 경로에 해당하는 라우트가 생성됩니다.

1. 라우터 설정

라우터 설정 파일인 app/router.js 파일을 열어, 동적 라우팅을 설정해야 합니다. 아래와 같이 코드를 수정해보세요:

Router.map(function() {
  this.route('post', { path: '/post/:post_id' });
});

위 코드는 “post/:post_id” 경로에 해당하는 “post” 라우트를 설정하는 부분입니다.

1. 라우트 처리

생성된 라우트 파일인 app/routes/post.js 파일을 열어서, 동적 라우트를 처리할 수 있도록 코드를 작성해야 합니다. 아래와 같이 코드를 작성해보세요:

import Route from '@ember/routing/route';

export default class PostRoute extends Route {
  model(params) {
    // params에는 동적으로 전달된 파라미터들이 담깁니다.
    // 예를 들어 params.post_id로 포스트의 ID에 접근할 수 있습니다.
    return this.store.findRecord('post', params.post_id);
  }
}

위 코드는 model() 메서드를 사용하여 동적으로 전달된 파라미터를 받아 처리하는 방법을 보여줍니다. 라우트에 필요한 데이터를 가져오기 위해 this.store.findRecord() 메서드를 사용할 수 있습니다.

이제 동적 라우트를 구현하기 위해 애플리케이션의 라우터, 라우트 파일을 설정하고 데이터를 가져오는 코드를 작성했습니다. 이렇게 구현된 동적 라우트는 Ember.js의 라우터를 통해 접근할 수 있습니다.

더 자세한 내용은 Ember.js 공식 문서를 참고하시기 바랍니다: Ember Guides