[FE] json-server를 통해 임시 API를 가지고 문제들을 출력한다.

[FE] json-server를 통해 임시 API를 가지고 문제들을 출력한다. by 4BFC · Pull Request #4 · 4BFC/sample_Capstone

나만의 시험지를 편집할 수 있는 페이지를 제작 중이다. 백엔드에서 제작한 sample json파일을 가지고 시험지에 들어갈 문제들을 호출해 볼 것이다. API를 불러오기 위해선 우선 fetch와 useEffect를 알아야하고 이를 활용해서 코드를 작성할 것이다. 아직 API가 정식으로 배포가 되지 않았기 때문에 임시로 사용할 수 있는 json-server를 가지고 임시주소로 API를 호출할 것이다. 문제를 불러오는 개수 제한은 다음 이슈에 다루어 볼 것이다. 우선 아래 코드를 살펴보자.

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

import { Link } from "react-router-dom";

export default function Sub_Lab() {

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

  useEffect(() => {

    fetch('http://localhost:3001/sample')

      .then(res => res.json())

      .then((data) => {

        setData(data); // slice를 통해서 10개의 아이템만 가져올 것

      })

      .catch((error) => {

        console.error("Error fetching data:", error);

      });

  }, []);

  return (

    <div>

      <h2>Test</h2>

      <Link to="/">back</Link>

      <ol>

        {data.map((data) => (

          <li key={data.id}><p>{data.question}</p>{data.options}</li>

        ))}

      </ol>

    </div>

  );

}

API를 React에서 불러오는 아주 기본 적인 방법으로 useEffect와 fetch를 사용해서 API를 가지고 왔다. 이제 필터가 적용되는 첫 번째 페이지에서 필터된 값을 어떻게 받는지에 따라서 해당 문제지가 변경이 되어야한다. 그렇다면 우리는 고민을 해볼 필요가 있다. 첫 번째 페이지에서는 어떻게 해당 값을 넘겨와서 두 번째 페이지에서 값을 적용할지 말이다. 그러기 위해선 Web Storage와 Cache에 대한 이해가 필요하다. 이 부분에 대한 개념은 회의 자료를 업로드하는 notion에 따로 적어 볼 것이다. 기회가 된다면 해당 개념을 따로 포스팅해 보겠다.

json-server ./src/db/driver_test.json --port 3001