[Front End] 목 데이터 만들어서 사용하기

실무를 하면서 종종 API를 호출하면 안되는 경우가 있다.

잘 개발하다가 개발 서버가 터져서 테스트를 못하는 경우도 있고

여러가지 상황에 대해 테스트를 하고싶지만 API응답은 프론트앤드가 원하는대로 맘껏 주무르지 못하니 여러 상황을 확인하지 못하는 경우도 있다.

이런 경우를 겪으면서 나름 목데이터를 만들어 테스트 하는 방법을 찾게 되었고 이 방법이 개발 진도 나가는데 정말 큰 도움이 되었던 것 같아 공유해 보고자 한다.

1. 목데이터를 프론트앤드 코드에 작성한다.

const mockData = {
  success: true,
  data: {
    verificationExpiredAt: "2024-12-20 16:31:01.123",
  },
};

2. Promise 객체와 setTimeout을 이용해서 목데이터를 설정한 경우 리턴한다.

const useCodeCheck = () => {
  const isApiMock = process.env.REACT_APP_API_MOCK === "true";
	
  if (isApiMock) {
        return new Promise((resolve) => {
          setTimeout(() => resolve(mockData), 100);
        });
      } else {
        return httpClient.post(`/api/v1/register/email-verification`, params);
      }
}