Discourse에서 라우트 생성 및 데이터 표시

[Discourse]

시간이 지나면서 Discourse의 복잡성이 증가했으며, 백엔드 Ruby on Rails 애플리케이션에서 프론트엔드 Ember.js 애플리케이션으로 데이터가 어떻게 전달되는지 초보자가 이해하기가 부담스러울 수 있습니다.

이 튜토리얼은 Discourse에서 요청의 전체 생명주기를 보여주고, 자체 URL을 가진 새 페이지를 구축하려면 어떤 단계가 필요한지를 설명하는 것을 목적으로 합니다.

먼저 URL부터

기능을 생각할 때 항상 해당 기능을 접근하기 위한 URL을 먼저 고려하는 것을 선호합니다. 예를 들어, Discourse 개발 중에 마지막으로 먹은 간식을 보여주는 관리자 기능을 구축한다고 가정해 보겠습니다. 이를 위한 적절한 URL은 /admin/snack일 것입니다.

이 경우:

• 브라우저에서 /admin/snack을 방문하면 “풀 스택(full stack)”을 사용하여 간식을 표시해야 합니다. 다시 말해, Ember 애플리케이션이 로드되고 간식을 표시하는 데 필요한 데이터를 요청하게 됩니다.

• /admin/snack.json을 방문하면 간식 자체의 JSON 데이터를 반환해야 합니다.

서버 측 (Ruby on Rails)

먼저 간식을 위한 새로운 컨트롤러를 만들어 시작해 보겠습니다.

app/controllers/admin/snack_controller.rb

class Admin::SnackController < Admin::AdminController
  def index
    render json: { name: "donut", description: "delicious!" }
  end
end

이 경우 Admin::AdminController를 상속받아 컨트롤러를 보는 사용자가 관리자임을 확인하는 모든 보안 검사를 수행합니다. 컨트롤러에 접근하기 전에 해야 할 마지막 한 가지가 있습니다. 그것은 config/routes.rb에 한 줄을 추가하는 것입니다:

다음과 같이 보이는 블록을 찾아보세요:

namespace :admin, constraints: StaffConstraint.new do
  # lots of stuff
end

그리고 그 안에 다음 줄을 추가하세요:

get 'snack' => 'snack#index'

완료되면 브라우저에서 /admin/snack.json을 방문할 수 있어야 하며, 간식의 JSON을 볼 수 있을 것입니다. 우리의 간식 API가 잘 작동하는 것 같습니다

물론, 기능을 구축하면서 더 많은 복잡성을 추가하게 되면 이 같은 컨트롤러에서 하드코딩된 JSON을 반환하는 것 대신에 데이터베이스를 쿼리하여 그 결과를 반환하게 될 것입니다.

클라이언트 측 (Ember.js)

브라우저를 열고 /admin/snack(.json 제외)을 방문하면 Discourse가 “Oops! That page doesn’t exist.”라고 표시하는 것을 볼 수 있습니다. 이는 프론트엔드 Ember 애플리케이션에서 해당 라우트에 응답할 내용이 없기 때문입니다. 간식을 표시하기 위해 .gjs 템플릿을 추가해 보겠습니다:

frontend/discourse/admin/templates/snack.gjs

<template>
  <h1>{{@controller.model.name}}</h1>

  <hr />

  <p>{{@controller.model.description}}</p>
</template>

그리고, Rails API 측에서와 마찬가지로 라우트를 연결해야 합니다. frontend/discourse/admin/routes/admin-route-map.js 파일을 열고 export default function() 메서드를 찾아보세요. 다음 줄을 추가하세요:

this.route("snack");

Ember 쪽에서 해야 할 마지막 한 가지가 남아 있습니다. 그것은 Ember 애플리케이션이 서버에서 우리의 JSON을 가져오기 위해 AJAX 요청을 수행하는 것입니다. 마지막 파일을 하나 만들어 보겠습니다. 이것은 Ember Route가 될 것입니다. 그 model() 함수는 라우트가 진입할 때 호출되므로, 거기서 ajax 호출을 수행하겠습니다:

frontend/discourse/admin/routes/admin-snack.js

import { ajax } from "discourse/lib/ajax";
import DiscourseRoute from "discourse/routes/discourse";

export default class AdminSnackRoute extends DiscourseRoute {
  model() {
    return ajax("/admin/snack.json");
  }
}

이제 브라우저에서 /admin/snack을 열면 페이지에 간식의 상세 정보가 렌더링되어 표시되는 것을 볼 수 있을 것입니다!

요약

• 브라우저에서 /admin/snack을 열면 Ember 애플리케이션이 부팅됩니다

• Ember 애플리케이션 라우터는 snack이 라우트가 되어야 한다고 말합니다

• snack의 Ember 라우트는 /admin/snack.json으로 AJAX 요청을 수행합니다

• Rails 애플리케이션 라우터는 그것이 admin_snack controller여야 한다고 말합니다

• admin_snack_controller는 JSON을 반환합니다

• Ember 애플리케이션은 JSON을 받아 .gjs 템플릿을 렌더링합니다

다음 단계

Discourse에 Ember 컴포넌트를 추가하는 방법에 대한 후속 튜토리얼을 작성했습니다.

---

이 문서는 버전 관리됩니다 - github에서 변경 사항을 제안해 주세요.