MockData 만들기

실제 통신시 백엔드에서 넘어오는 API를 모방하여 미리 프런트에서 작성하는 데이터를 MockData라고 한다.
서버에서 받아야 하는 값이라도 백엔드 API가 미처 완성되지 않았을 수 있다. 이 때 서버에서 받을 값을 예상해서 프런트에서는 Mockdata를 활용하여 UI 개발을 진행할 수 있다.

⛳ Mockdata 작성하는 방법

1. public 폴더 ▶️ data 폴더 생성 ▶️ Mockdata.json 파일 생성
2. 배열과 객체를 활용해서 데이터 작성(형식은 자유 but 백엔드와 미리 상의하기 추천!!)

⛳ 예시

해당 데이터는 실제와 관계 없는 정보입니다. MockData 작성법을 보여주기 위한 예시일 뿐입니다.

[
  {
    "id": 1,
    "name": "서편제",
    "release_date": 1920,
    "image_url": "/images/poster/copyrightfree.jpg",
    "country": "한국",
    "score_average": "평균★3.5"
  },
  {
    "id": 2,
    "name": "위대한 개츠비",
    "release_date": 1920,
    "image_url": "/images/poster/copyrightfree_ocean.jpg",
    "country": "미국",
    "score_average": "평균★4.2"
  },
  {
    "id": 3,
    "name": "키다리 아저씨",
    "release_date": 1931,
    "image_url": "/images/poster/copyrightfree.jpg",
    "country": "미국",
    "score_average": "평균★1.5"
  },
  {
    "id": 4,
    "name": "대부",
    "release_date": 1931,
    "image_url": "/images/poster/copyrightfree.jpg",
    "country": "미국",
    "score_average": "평균★1.5"
  },
  {
    "id": 5,
    "name": "로마의 휴일",
    "release_date": 1931,
    "image_url": "/images/poster/copyrightfree.jpg",
    "country": "미국",
    "score_average": "평균★1.5"
  }
]

• 배열 안에 5개의 객체가 들어있다.

• 객체 하나 당 영화 하나에 대한 정보가 들어있다.

---

💡key값을 백엔드와 소통하여 작성하기!!!

Mockdata는 결과적으로 서버의 API를 받아오기 위해 사용되었기 때문에 같은 형태로 작성해야 한다.

만약 백엔드 개발자가 snake_case를 작성하여 key를 넘겨준다면, Mockdata도 snake_case를 작성해야 한다.

따라서 위의 release_date의 경우 프런트는 CamelCase를 사용하지만 백엔드에서 넘겨받을 정보이기 때문에 백엔드에서 사용하는 snake_case를 사용한다.

실제 백엔드에서 넘겨주는 API 데이터 형태

---

⛳ Mockdata를 fetch함수로 데이터 GET하기

public 파일에 저장된 Mockdata를 사용할 프로젝트로 가져오기 위해서
Main.js에 fetch함수를 작성한다.

import React, { useEffect, useState } from "react";
import MainBox from "./components/MainBox/MainBox";
import "./Main.scss";

const Main = () => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    fetch("/data/mainMock.json")
      .then(res => res.json())
      .then(data => {
        setMovies(data);
      });
  }, []);

  if (movies.length === 0) return;

  return (
    <div className="mainWrapper">
      <MainBox movies={movies} />
    </div>
  );
};

export default Main;

• useEffecct를 사용하는 이유는 useEffect가 무엇인지 확인하러 가기!

• useEffect를 사용하여 fetch함수를 작성하면 데이터를 불러오는 시간을 사용자가 기다리지 않고 UI를 먼저 볼 수 있다.

• fetch함수 안에는 현재 Mockdata가 저장된 위치를 작성한다.

• UseState를 사용하여 Mockdata에서 가져온 데이터를 movies라는 변수에 담는다.

• 그리고 movies의 초깃값이 빈 배열이며 그 빈배열 안에 setMovies를 통하여 데이터를 업데이트 한다.

• fetch함수 안에 setMovies를 작성하여 fetch함수로 받아온 데이터를 movies 안에 담는다.

• movies는 mockdata에 있는 데이터가 담겨있고 그 movies를 자식 컴포넌트인 <Main Box/>에 넘겨준다.

---

⛳ Long Story Short

백엔드와 key 이름을 맞추라고 강조하는 이유는 우리가 초반에 그러지 못했기 때문에 데이터가 들어가는 곧에 코드를 모두 수정해야 했다. 이름 뿐만아니라 데이터 구조도 중요하다. 객체에 담기는지 얼마만큼의 depth가 있는 객체인지 또는 배열인지 정확하게 알아요 프론트 측에서 점표기법이나 대괄호 표기법을 사용하여 객체에 접근할 수 있다. 백엔드 또한 프런트에게 어떻게 전달해야 서로가 효율적으로 데이터를 주고받을 수 있는지 알아야 한다.

이것에 알고 있었음에도 프런트는 페이지 레이아웃 구성하느라 정신 없고, 백엔드도 데이터 테이블 구성하느라 정신이 없어 신경을 전혀 쓰지 않았다. 하지만 모든 구성원이 시간이 지나고 나서야 깨달았다. 컨벤션과 데이터를 함께 정해야 했다는 것을....