[Troube Shooting] Json-Server를 활용한 가상 페이지네이션 데이터 호출 테스트

프로젝트를 하다보니, 페이지네이션을 구현해야 하는데 서버에서 API 명세서만 제공하고 아직 기능이 구현되지 않았다고 한다

이런 경우 프론트엔드는 어떻게 기능을 구현할 수 있을까?

 

* 여러 로직을 통해 인증하고/뭐하고, 뭐하고 해봤자, 결국 서버로부터 받는 것은 "데이터"이고, 그 데이터를 내가 가상으로 호출할 수 있다면 기능을 충분히 구현할 수 있다!

 

이를 위해 익숙한 개발 툴인 JSON-Server를 활용해서 페이지네이션을 구현해보기로 했다.

 

데이터 호출 코드

  const fetchList = async () => {
    const response = await axios.get(
      `http://{{url}}/list?pages=${currentPage}&size=20`
    );
    const data = response.data;
    setList([...list, ...data]);
    setCurrentPage((prevPage) => prevPage + 1);
    setLoading(false);
  };

여기서 API 명세서를 통해 전달해야 하는 쿼리는 pages=1&size=20, pages=2&size=20 ... 등등 이다.

이 상태에서 도전할 수 있는 방향은 2가지이다.

1. JSON-Server의 파일에 어떤 함수 로직을 추가해서 페이지네이션을 구현한다.
2. JSON-Server에서 기본으로 제공하고 있는 로직이 있는지 찾아본다.

결론은 2번이 맞았다.

https://www.youtube.com/watch?v=yz2t40vWtZg 

 

수정된 최종 코드

1. 기존의 호출 URL은 주석처리를 해 놓는다.

2. JSON-Server에서 제공하고 있는 메서드를 갖고 테스트용 URI를 작성한다.

// 페이지네이션 기본 예제
http://{{url}}/{endpoint}?_page={page}&_limit={limit}

  const fetchList = async () => {
    const response = await axios.get(
      // `http://{{url}}/list?pages=${currentPage}&size=20`
      // `http://ㅣocalhost:3000/list?_page=${currentPage}&_limit=20`
    );
    const data = response.data;
    setList([...list, ...data]);
    setCurrentPage((prevPage) => prevPage + 1);
    setLoading(false);
  };