Rails 및 React를 사용하여 JSON API 구축 및 사용

API를 어떻게 구축할 것인가를 생각할 때, 나는 그것을 실현하는 최선의 방법을 찾기 시작했다.나는 API를 구축하는 규범이 존재하는 것을 발견했는데 여기서 찾을 수 있다https://jsonapi.org.여기서 API에서 데이터를 보내고 받는 방법에 대한 일련의 규칙을 발견할 수 있습니다.
API를 구축하는 "모범 사례"를 이해한 후 다음 질문은 이러한 모든 규칙을 사용하여 API를 구축하는 방법입니다.할 일이 많아 보여요.좋아요.그건 진짜가 아니야!Rails에서는 jsonapi-resources라는gem을 사용하기 쉽다.
이 프로젝트에서 프런트엔드는 React를 사용하여 완료됩니다.Rails의 최신 버전(v.6.0.0)으로서 Rails는 통합된 Webpack(gem처리 Rails+Webpack의 통합)을 가지고 있다.이것은 우리로 하여금 더욱 쉽게 React를 사용할 수 있게 할 것이다.🙌
React를 사용하여 API의 데이터를 사용하는 것은 어렵지 않습니다.그러나 API로 보낼 데이터를 포맷하는 것은 복잡할 수 있습니다.또 다른 도서관이 이렇게 할 수 있다!또한 이 라이브러리는 폼 데이터를 검증하는 데 도움을 줄 것입니다.이 도서관은 Formik입니다.

우리 시작합시다!
사용할 도구의 버전:

Ruby 2.6.3

궤도 6.0.0

실 1.17.3

기본 항목 설정하기
rails를 사용하여 새 프로젝트를 만들려면 rails new 명령을 사용해야 합니다. 이 명령의 끝에는 프로젝트 이름이 있습니다.
우리는 또 몇 가지 추가 옵션을 추가할 수 있다.이 예에서 우리는 --database=postgresqlPostgreSQL을 우리의 데이터베이스로 사용하고 --skip-turbolinks사용을 피할 것이다turbolinks. 왜냐하면 우리는 전방에서 루트를 처리하고 --webpack=reactRails로 하여금 우리가 사용할 수 있도록 설정을 생성하기 때문이다.js.

$ rails new my-app --database=postgresql --skip-turbolinks --webpack=react

이제 포스트라는 모델을 추가합니다. 두 가지 속성이 있습니다. 타이틀과 바디입니다.title는 문자열이고 body는 텍스트입니다.Rails에서 모델은 데이터베이스 테이블을 나타냅니다.우리는 rails generate model 명령을 사용하고 속성을 가진 모델 이름을 따라 그것을 생성할 수 있다.속성은 빈칸으로 구분하고 이름과 유형은 :로 구분해야 한다. 예를 들어 title:string.등록 정보의 유형을 지정하지 않으면 Rails는 기본적으로 유형string으로 설정됩니다.
이 명령은 데이터베이스에서 변경할 것을 지정하는 모델 정의가 있는 파일과 이전 파일을 생성합니다. 이 예에서 새 테이블을 만듭니다.

$ rails generate model Post title body:text
$ rails db:create
$ rails db:migrate

Note: We could also use rails g which is an alias of rails generate.

rails db:create 프로젝트의 데이터베이스를 만들도록 명령하고 rails db:migrate 마운트된 모든 이전을 실행합니다. 새 프로젝트이기 때문에 매번 이전을 실행합니다.
우리는 피드 데이터를 추가할 수 있다.이렇게 하려면 db/seeds.rb 파일을 열고 다음 행을 추가해야 합니다.

Post.create(title: "Post 1", body: "My first Post")
Post.create(title: "Post 2", body: "My second Post")

피드 데이터로 데이터베이스를 채우려면 다음 명령을 실행해야 합니다.

$ rails db:seed

Rails 프로젝트에서, 우리는 응용 프로그램의 주요 경로를 정의해야 한다. 이 응용 프로그램은 처리 경로 / 를 처리할 것이다.이동config/routes.rb하여 정의한 다음 블록Rails.application.routes.draw 내부에 추가합니다.

root to: "home#index"

get "*path", to: "home#index", constraints: { format: "html" }

Note: The routes are defined as "home#index", this means the controller which is going to control the behavior is HomeController and the specified action in the controller is index.

Home Controller를 만들어야 합니다.우선 home_controller.rb 폴더에 app/controllers 파일을 만듭니다.내부 작업index 추가:

class HomeController < ApplicationController
  def index; end
end

모든 동작은 HTML을 사용하는 보기를 보여 줍니다.app/views/home 폴더에 보기를 만들고 이름을 index.html.erb로 지정해야 합니다.이 파일에서, React 프로그램을 불러올 스크립트를 보여 주어야 합니다.

<%= javascript_pack_tag 'posts' %>

도우미javascript_pack_tag가 다음 스크립트 태그를 생성합니다.

<script src="/packs/js/posts-a447c92837fa3b701129.js"></script>

Note: The name of the pack is generated with a hash added at the end to let us cached it for a long time.

이 스크립트는 패키지posts.jsx를 로드합니다.app/javascript/packs 폴더에 패키지를 만들어야 합니다.

import React from "react";
import ReactDOM from "react-dom";
import App from "components/App";

document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <App />,
    document.body.appendChild(document.createElement("div"))
  );
});

React 응용 프로그램의 라우팅을 처리하려면 @reach/router를 사용합니다.설치하려면 다음을 실행하십시오.

$ yarn add @reach/router

App.js 폴더에 구성 요소app/javascript/components를 만듭니다.이 구성 요소를 사용하여 경로를 관리할 것입니다.

import React from "react";
import { Router } from "@reach/router";
import PostList from "./PostList";

function App() {
  return (
    <Router>
      <PostList path="/" />
    </Router>
  );
}

export default App;

여기서 첫 번째 노선/을 만들 것입니다. 이것은 PostList 구성 요소를 렌더링할 것입니다.
이제 PostList.js 폴더에 구성 요소 app/javascript/components 를 만들 것입니다.

import React from "react";

function PostList() {
  return <div>Hello from my React App inside my Rails App!</div>;
}

export default PostList;

내부에서, 우리는 우리의 React 응용 프로그램을 테스트하기 위해 div을 보여줄 것이다.

서버 시작
React와 Rails 애플리케이션을 동시에 실행하려면 foreman을 설치해야 합니다.다음 명령을 사용하여 설치할 수 있습니다.

$ gem install foreman

프로젝트의 루트 디렉터리에 Procfile.dev 파일을 만들어야 합니다.추가:

web: bundle exec rails s
webpacker: ./bin/webpack-dev-server

서버를 시작하려면 다음 명령을 실행해야 합니다.

$ foreman start -f Procfile.dev

API 생성
JSON: API 규범에 따라 저희 API를 만들기 위해gemjsonapi-resources을 사용합니다.그것을 사용하려면 Gemfile 에 추가하고 bundle install 실행할 때 설치해야 합니다.
Resources는 올바른 라우팅을 생성하는 데 도움이 되는 방법을 제공합니다.API 라우트는 config/routes.rb 이전 get "*path"에 추가됩니다.

namespace :api do
  jsonapi_resources :posts
end

Note: namespace :api is going to generate routes with /api before the route. Eg. /api/posts.

RailsApiController 모듈에서 컨트롤러를 확장하기 위해 ActionController::API를 만들 것입니다. 또한 JSONAPI: Resources의 JSONAPI::ActsAsResourceController도 포함됩니다.

class ApiController < ActionController::API
  include JSONAPI::ActsAsResourceController
end

지금 우리는 만들어야 한다PostsController.api 라는 폴더에 그것을 만들어야 합니다. 왜냐하면 루트 설정이 Api::PostsController 클래스를 검색하기 때문입니다.

class Api::PostsController < ApiController
end

jsonapi_resources :posts 정의 요구PostResource류.우리는 PostResource에서 만들어야 한다app/resources/api/post_resource.rb.

class Api::PostResource < JSONAPI::Resource
  attributes :title, :body
end

여기서, 우리는 자원의 일부분으로 표시할 속성과 관계를 정의했다.
답변을 확인하려면 localhost:5000/api/posts를 방문하십시오.

API 사용
React 애플리케이션에서 API를 사용하도록 하겠습니다.우선 데이터만 읽읍시다.PostList 구성 요소를 편집하여 게시물 목록을 가져옵니다.

import React, { useEffect, useState } from "react";

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const requestPosts = async () => {
      const response = await fetch("/api/posts");
      const { data } = await response.json();
      setPosts(data);
    };
    requestPosts();
  }, []);

  return posts.map(post => <div>{post.attributes.title}</div>);
}

export default PostList;

auseEffect에서 우리는 /api/posts를 추출하여 응답을 구성 요소의 상태에 저장할 것이다.
이제 더 많은 댓글을 추가하기 위해 폼을 만듭니다.그러나 우선, 우리는 React 프로그램에 formik 를 의존항으로 추가해야 한다.

$ yarn add formik

폼을 표시할 새 구성 요소를 만들 것입니다. AddPost.js 라고 부릅니다.이 구성 요소에서, 우리는 정확한 데이터 형식으로 POST 방법 to /api/posts 를 만들어서 새로운 POST를 만들 것입니다.

import React from "react";
import { navigate } from "@reach/router";
import { Formik, Field, Form } from "formik";

function AddPost() {
  const handleSubmit = values => {
    const requestPosts = async () => {
      // We get the CSRF token generated by Rails to send it
      // as a header in the request to create a new post.
      // This is needed because with this token, Rails is going to
      // recognize the request as a valid request
      const csrfToken = document.querySelector("meta[name=csrf-token]").content;
      const response = await fetch("/api/posts", {
        method: "POST",
        credentials: "include",
        headers: {
          "Content-Type": "application/vnd.api+json",
          "X-CSRF-Token": csrfToken
        },
        body: JSON.stringify({ data: values })
      });
      if (response.status === 201) {
        navigate("/");
      }
    };
    requestPosts();
  };

  return (
    <div>
      <h2>Add your post</h2>
      <Formik
        initialValues={{
          type: "posts",
          attributes: {
            title: "",
            body: ""
          }
        }}
        onSubmit={handleSubmit}
        render={() => (
          <Form>
            <Field type="text" name="attributes.title" />
            <Field type="text" name="attributes.body" />

            <button type="submit">Create</button>
          </Form>
        )}
      />
    </div>
  );
}

export default AddPost;

마지막으로, 우리는 React 프로그램에 노선 /add 을 추가해야 한다.

import React from "react";
import { Router } from "@reach/router";
import PostList from "./PostList";
import AddPost from "./AddPost";

function App() {
  return (
    <Router>
      <PostList path="/" />
      <AddPost path="/add" />
    </Router>
  );
}

export default App;

만약 우리가 localhost:5000/add 로 돌아간다면, 우리는 표를 볼 것이다.필드를 작성하고 제출을 클릭하면 새 게시물이 만들어지고 목록의 일부로 자동으로 탐색됩니다localhost:5000/.
만약 우리가 페이지를 다시 불러오면, React 프로그램은 우리가 새로 만든 댓글을 사용하여 우리의 댓글을 다시 얻을 것입니다.
이것이 바로 우리가 Rails+React를 사용하여 응용 프로그램을 만드는 방법입니다. JSON: API 규범에 따릅니다.
나는 이 문장이나 이곳에서 사용하는 도서관에 대한 어떠한 피드백도 얻기를 바란다.❤️