소개

이전에는 JQuery의 autocomplete, ajax 및 httpclient를 사용하여 자동 완성을 구현했지만 내용에 대해 희미하게만 파악할 수 없었습니다. 리팩토링을 실시하면서 내용을 확인한다.

우선, 외부 API에 액세스하고 있는 부분은, 클래스에 잘라, lib 디렉토리에 넣는다.
lib/api_suggest.rb

require 'httpclient'
require 'json'

class ApiSuggest
  API_KEY = Rails.application.credentials.api[:API_KEY]
  API_URI = Rails.application.credentials.api[:API_URI]

  def self.suggest(keyword, max_num)
    uri = API_URI
    headers = {
      Authorization: "Bearer #{API_KEY}",
    }
    params = {
      keyword: keyword,
      max_num: max_num,
    }

    client = HTTPClient.new
    req = client.get(uri, body: params, header: headers)
    req
  end
end

리팩토링 전에는

    client = HTTPClient.new
    req = client.get(uri, body: params, header: headers)
    res = JSON.parse(req.body)
    res

그리고 JSON.parse(req.body)를했지만,
리팩토링 후,

req = client.get(uri, body: params, header: headers)

client.get한 결과를이다 req 부분을 그대로 컨트롤러에 돌려주고,

컨트롤러측에서는
app/controllers/suggests_controller.rb

require 'api_suggest'
class SuggestsController < ApplicationController
  SUGGEST_MAX_COUNT = 5
  def search
    @suggests = ApiSuggest.suggest(params[:keyword], SUGGEST_MAX_COUNT)

    render body: @suggests.body, status: @suggests.code
  end
end

일곱 번째 줄, render에서,

render body: @suggests.body, status: @suggests.code

각 파라미터에 넣는 것으로 JSON.parse 할 필요가 없어졌다.

그리고 그 파라미터는
app/assets/javascripts/suggest.js

$("#form").autocomplete ({
  source: function (req, res) {
    $.ajax({
      url: '/suggest',
      type: 'GET',
      cache: false,
      dataType: "json",
      data: { keyword: req.term },
  n    success: function (data) {
        res(data);
      },
      error: function (xhr, ts, err) {
 n       res(xhr, ts, err);
      }
    });
  }
});

ajax의 success 이하로 반환된다는 흐름이 되고 있다.

전체 흐름을 확인

ajax 옵션으로 지정url: '/suggest'에 요청이 전송되고,
라우팅에서

get 'suggest',    to: 'suggests#search'

app/controllers/suggests_controller.rb의 search 메소드가 호출되고,

  def search
    @suggests = ApiSuggest.suggest(params[:keyword], SUGGEST_MAX_NUM)
    render body: @suggests.body, status: @suggests.code
  end

ApiSuggest.suggest에 의한 httpclient의 외부 API 요청을 통한 결과,
render body: @suggests.body, status: @suggests.code반환,
app/assets/javascripts/suggest.js 아약스

success: function (res) {
  resp(res);
},
error: function (xhr, ts, err) {
  resp(xhr, ts, err);
}

성공, 실패 각각의 경우에 반환된다.
라는 흐름.

ajax 부분에 대해 자세히 알아보기

render body 옵션이 반환 값의 본문을 반환하고,
상태가 상태 코드 (200, 404, 500 등)의 외부 API 결과를 반환합니다.

ajax 측에서 그것을 받으면,
ajax 중에서는, 그 status code를 참조해, 200계, 300계를 정상으로서 판정해, success측을 실행.

그 이외의 status code가 오면 error측을 실행,
라는 처리를 하고 있다.

이상.

끝에.

끝까지 읽어 주셔서 감사합니다
전직을 위해, 미경험의 상태로부터 Rails를 학습하고 있습니다. 올바른 지식을 꾸준히 착용하고 실력 있는 엔지니어가 되고 싶습니다. 계속해서 투고해 나가는 가운데, 그 때문에의 인풋도 필연적으로 늘어나, 성장에 연결될까라고 생각하고 있습니다.
지금 현재, 초보자라고 해서 변명은 할 수 없습니다만, 투고의 내용에 잘못되어 있는 곳이나, 덧붙여야 할 곳이 많이 있을까 생각하므로, 지적 받을 수 있으면 다행입니다. 이 기사를 읽어 주셔서 감사합니다.