Mock Data 만들기

🔥 글의 목적: 다른 사람들에게 정보를 제공

Mock Data?

mock 이란 거짓된, 가짜의 뜻을 가지고 있다. ‘mock data’는 실제 API에서 받아온 데이터가 아닌 front-end 개발자가 필요에 의해 샘플로 만들어 본 데이터를 말한다.

Mock Data를 활용하여 back-end API가 미완성이라도 차질없이 개발할 수 있다. mock data를 이용하여 미리 그 데이터 형태를 맞춰보면서 개발한다면 추후 API 연결과정의 수고가 줄어든다. mock data는 back-end API를 모방하기에 실제 API에서 응답값의 형태인 json 파일의 형태로 만들어야 한다.

mock data를 위한 파일은 commentData.json으로 설정했다.

🗂 public
  └── 🗂 data
			└── commentData.json

Mock data 생성

public 디렉터리는 CRA로 만든 프로젝트를 배포했을 때, 실제 서버에 배포되는 폴더가 public 폴더이다. 따라서 우리 서버 주소로 접근하면 public 폴더에 들어가는 것과 동일하다. public/data/commentData.json 파일을 만들면 서버 URL을 통해 해당 파일에 접근이 가능하다.

//commentData.json
[
  {
    "id": 1,
    "author": "wecode",
    "comment": "Welcome to world best coding bootcamp!",
    "isLiked": true
  },
  {
    "id": 2,
    "author": "joonsikyang",
    "comment": "Hi there.",
    "isLiked": false
  },
  {
    "id": 3,
    "author": "jayPark",
    "comment": "Hey.",
    "isLiked": false
  }
]

json 파일 형식이기 때문에 객체의 key를“”로 감싸주어야 한다. JSON 형식은 JavaScript 객체와 마찬가지로 key와 value가 존재할 수 있으며 key 값이나 문자열은 항상 “”을 이용하여 표기해야한다.

Mock Data 호출

http://localhost:3000/data/commentData.json을 API 주소로 생각하고 http 요청을 통해서 API 요청을 보내고 응답을 받아볼 수 있다.

//Feeds.js
import { useState, useEffect } from "react";
import CommentList from "./CommentList";
import "./Feeds.scss";

const Feeds = () => {
  const [comment, setComment] = useState("");
  const [commentList, setCommentList] = useState([]);
  const isCheckComment = comment.length > 0;

  ......
  useEffect(() => {
    fetch("http://localhost:3000/data/commentData.json", {
      method: "GET",
    })
      .then((response) => response.json())
      .then((data) => setCommentList(data));
  }, []);

  return (
    ......
      <CommentList newCommentList={commentList} />
      <form id="chat-form" onSubmit={addComment}>
        <input
          onChange={getComment}
          type="text"
          placeholder="댓글 달기..."
          value={comment}
        />
        <button className="post">게시</button>
        {/* form 안의 button은 default로 submit을 하는데 type을 button으로 주변, 그 default가 작동X*/}
      </form>
  );
}

export default CommentList;