목업 데이터

목업 데이터는 무언가 제품을 만들기 전에 시연할 때 임의로 채우는 데이터라고 보면 된다.

홍길동, Lorem Ipsum같은 문구같은 것이다.

실제로 API가 개발되기 전에 프론트의 구현이 먼저되는 경우가 많다.

데이터를 불러와야하는데 아직 백엔드가 구현되지 않아서 이를 테스트하려면 어떻게 해야할지 설명하겠다.

목업 데이터 생성

흔히 목업데이터는 JSON 형태로 저장한다. 왜냐하면 API 자체가 JSON 응답이기 때문이다.

그래서 /public/data 디렉토리를 생성하여 data.json 파일을 생성한다.

그리고 여기에 API 명세에 적힌 형식을 그대로 JSON 데이터를 생성한다.

만약 아래와 같은 API가 있다고 하자.

HTTP GET /post/{postNum}
{
	"id": 1,
	"title": "React - 목업데이터",
    "author": "milkbottle0305",
    "time": "2024-03-10T13:45:00Z",
    "commentCount": 5
}

이를 실제 JSON으로 쓴다면?

{
  "post" : {
    "id": 1,
	"title": "React - 목업데이터",
    "author": "milkbottle0305",
    "time": "2024-03-10T13:45:00Z",
    "commentCount": 5
  }
}

이와 같이 data.json에 저장한다.

데이터 불러오기 함수

우리는 목업 데이터와 API 데이터 사이를 연결하는 불러오기 함수를 구현해야한다.

보통 /src/services에 이 함수를 명시하는 경우가 많다.

목업 Data는 JSON 파일이기때문에 http://localhost:3000/data/data.json에 요청하여 받을 수 있다.

참고로 http://IP:PORT/~~ 이후의 링크는 리액트 프로젝트 루트폴더의 /public의 하위내용과 같다.

export async function getPost() {
  const response = await fetch("http://localhost:3000/data/data.json");
  const data = await response.json();
  return data.post;
}

이런식으로 구현할 수 있다.

실제 API에서는 try 와 catch 구문을 이용하여 상태코드별 오류 분기처리를 사용하여 구현해야한다.

아래는 그 예시이다.

const BASE_URL = "http://IP:PORT";

export const validateToken = async (postId) => {
  try {
    const response = await fetch(`${BASE_URL}/post/${postId}`);

    if (!response.ok) {
      // 상태 코드가 200 OK가 아니면 오류 발생
      throw new Error("Failed to validate token");
    }

    const data = await response.json();
  } catch (error) {
    console.error(error);
    throw error; // 오류 처리
  }
};