[리팩터링] 프로젝트 관리 메인 페이지 api 호출 개수 줄이기

아래 사진은 관리 메인 페이지, 즉, 사용자가 생성한 프로젝트 리스트를 보여주는 페이지이다.

 

여기서는 전체와 진행 중 버튼이 있는데, 전체 버튼을 누르면 완료된 프로젝트와 진행 중인 프로젝트를 모두 보여주고, 진행 중 버튼을 누르면 진행 중인 프로젝트만 보여준다.

 

이 기능을 구현하면서 나는 고민이 하나 있었다.

일단, 처음 사용자가 접속했을 때는 진행 중 버튼이 활성화되어 있어서 진행 중인 프로젝트 리스트는 쭉 불러와야 하는 상황이었다.

그런데, 전체 프로젝트 리스트 데이터는 언제 불러와야 하지?라는 의문이 있었다.

 

선택지는 세 개였다.

- 전체 프로젝트 리스트를 prefetch 해놓을까? 

- 처음 접속했을 때 전체와 진행 중 모두를 불러와서 캐시에 저장해 놓을까? 

- 전체 버튼을 누른 경우 데이터를 불러오도록 할까?

 

처음 이 기능을 구현했을 때는 전체와 진행 중인 프로젝트 모두를 불러와서 캐시에 저장해 놓고, 사용자가 전체 버튼을 누른 경우 캐시에 저장된 데이터를 보여줌으로써 조금 더 빠르게 정보를 볼 수 있도록 했다.

 

해당 코드는 아래와 같다.

즉, useQuery문을 두 번 실행한 것이다.

const { data: allData = { projectList: [] } } = useQuery(
    ["managementAllProjectList", currentPage, allProjectListVisible],
    () => getProjectList(currentPage, "ALL"),
    { keepPreviousData: true }
);
  
const { data: ongoingData = { projectList: [] } } = useQuery(
    ["managementOngoingProjectList", ongoingCurrentPage, allProjectListVisible],
    () => getProjectList(ongoingCurrentPage, "ONGOING"),
    { keepPreviousData: true }
);

 

하지만, 이 페이지의 경우, 데이터 자체가 무겁지 않아서 불러오는 데 오래 걸리지 않는 상황인데, 굳이 데이터를 둘 다 불러와서 성능에 무리를 줘야 하나?라는 생각이 들었고, 그래서 로직을 수정해보려 했다.

 

수정한 코드는 다음과 같다.

현재 사용자가 활성화한 버튼에 따라서 어떤 데이터를 불러올지 정하는 것이다.

그래서 우리 사이트에서는 굳이 데이터를 미리 불러와서 저장해놓지 않아도 사용자에게 데이터를 보여주는 시간에는 크게 무리가 없다는 판단 하에 로직을 수정하였다.

const { data = { projectList: [] } } = useQuery(
    [
      allProjectListVisible
        ? "managementAllProjectList"
        : "managementOngoingProjectList",
      allProjectListVisible ? currentPage : ongoingCurrentPage,
      allProjectListVisible,
    ],
    () =>
      getProjectList(
        allProjectListVisible ? currentPage : ongoingCurrentPage,
        allProjectListVisible ? "ALL" : "ONGOING"
      ),
    { keepPreviousData: true }
  );

 

앞으로 서버에서 데이터를 불러오는 로직을 작성할 때, 어떻게 하면 사이트 특성에 맞춰서 성능에 있어서 가장 최적화된 방법으로 불러올 수 있는지 더 고민해 보면 좋을 것 같다.