[ React & Node ] Book-Reports-App 2. rest api

서버에서 api 받아오는 작업을 일단 하겠습니다.

 

사실 아직 초반 작업이라 아주 간단하게 해결이 가능합니다.

/server/Router/api.js 에서 bookReports 배열 객체를 만든뒤 dummy 데이터들을 집어넣은뒤 res.send로 날려주면 됩니다.

 

/server/Router/api.js

const express = require("express");
const router = express.Router();

const bookReports = [];

router.get("/rest/book", (req, res) => {
  res.send({ api: bookReports });
});

module.exports = router;

이렇게 코드를 짠뒤

 

const bookReports = [
  {
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    "email": "Eliseo@gardner.biz",
    "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
  },
  {
    "postId": 1,
    "id": 2,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
  },
  {
    "postId": 1,
    "id": 3,
    "name": "odio adipisci rerum aut animi",
    "email": "Nikita@garfield.biz",
    "body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
  },
  
  ...
  
  {
    "postId": 4,
    "id": 19,
    "name": "sed impedit rerum quia et et inventore unde officiis",
    "email": "Madelynn.Gorczany@darion.biz",
    "body": "doloribus est illo sed minima aperiam\nut dignissimos accusantium tempore atque et aut molestiae\nmagni ut accusamus voluptatem quos ut voluptates\nquisquam porro sed architecto ut"
  },
  {
    "postId": 4,
    "id": 20,
    "name": "molestias expedita iste aliquid voluptates",
    "email": "Mariana_Orn@preston.org",
    "body": "qui harum consequatur fugiat\net eligendi perferendis at molestiae commodi ducimus\ndoloremque asperiores numquam qui\nut sit dignissimos reprehenderit tempore"
  },
]

bookReports 데이터에 이렇게 넣어줍니다.

 

저는 총 20개의 데이터를 넣었고 

 

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

이 사이트를 통하여 데이터를 받아서 조금 추출하여 제 express 서버에서 dummy 데이터로 쓰고 있습니다.

 

그리고 postman 또는 브라우저 주소창에 'http://localhost:5000/api/rest/book' 이러한 url을 넣게되면

엉청난 양의 json 데이터 들이 나온다면 정상적으로 된것입니다.

 

이제 react에서 받아오는 코드를 짜보겠습니다.

 

/client/src/App.js

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

function App() {
  const [data, setData] = useState([]);

  const callApi = async () => {
    const getData = await axios.get("/api/rest/book").then((res) => res.data.api);

    console.log(getData);
  };

  useEffect(() => {
    callApi();
  }, []);
  
  return (
    <div className="reports-container">
    </div>
  );
}

export default App;

 

axios를 이용하여 /api/rest/book 이라는 url 을 넣고 get 요청을 합니다.

async await 함수를 이용하여 getData에 데이터가 담겼을때 console.log에 찍어주는 코드 입니다.

 

console 을 확인해보면 20개의 배열 객체가 나오는것을 볼수 있습니다.

 

이제 이것을 이용해 가공을 할것입니다.

가공은 Array.prototype.map() 함수를 이용할것이구요 

 

const [data, setData] = useState([]);
const dataID = useRef();

const callApi = async () => {
  const getData = await axios.get("/api/rest/book").then((res) => res.data.api);
  const initData = getData.map((item) => {
    return {
      author: item.email,
      comment: item.body,
      create_date: new Date().getTime(),
      id: dataID.current++
    }
  });
  
  console.log(initData)
};

다음과 같이 코드를 짤수있습니다.

 

 

그리고 나서 initData를 console에서 확인해본다면 우리가 원하는 대로 데이터가 가공되어 나오는것을 확인할 수 있습니다.

 

다음 블로그 포스트는 Component 구조와 대략적인 틀을 짜보도록 하겠습니다.