카카오 지도 API에서 pagination과 필터링: 데이터 정렬 문제 해결하기

개요

진행중인 프로젝트는 주변 매장에 후기를 남기고 자신만의 기록처럼 사용할 수도 있고, 유저들간 공유를 할 수도 있는 커뮤니티 사이트이다. 기능을 개발하면서 후기를 남긴 매장과 남기지 않은 매장들만 모아볼 수 있는 곳이 있으면 좋을 것 같아서 추가하게 되었다.

 

문제

카카오 지도 api는 15개, 15개, 15개의 데이터를 나눠서 제공한다. 우리는 기본적으로 첫번째의 15개의 데이터를 제공받고 두번째의 15개 데이터, 세번째의 15개 데이터는 페이지네이션을 통해 제공 받는다. 여기서 내가 만약에 첫 번째 페이지의 15개의 매장 중 한 매장에 후기를 작성했다고 가정해 보자. 이 경우, “후기를 작성하지 않은 매장” 목록을 필터링하면 아래와 같이 데이터를 받아야 정상이다

• 첫 번째 페이지: 15개 → 후기 작성으로 인해 14개
• 두 번째 페이지: 15개
• 세 번째 페이지: 15개

즉, 전체적으로 15개, 15개, 14개의 데이터가 확인되어야 한다.

하지만 실제로 카카오 지도 API는 데이터를 이렇게 제공하지 않았다. 대신 다음과 같이 처리되었다

• 첫 번째 페이지: 14개
• 두 번째 페이지: 15개
• 세 번째 페이지: 15개

그렇다면 첫번째 페이지의 후기를 모두 남겼다면 어떻게 될까?

• 첫 번째 페이지: 0개 - 필요없는 페이지 발생
• 두 번째 페이지: 15개
• 세 번째 페이지: 15개

이로 인해 사용자가 예상했던 데이터 구조와 실제 데이터 구조 사이의 불일치가 발생하게 되었다.

 

원인

카카오 지도 API는 내부적으로 페이지 단위로 데이터를 처리한다. 필터링된 데이터가 페이지 경계를 고려하지 않고 계산되기 때문에, 첫 번째 페이지에서 제거된 데이터가 두 번째 페이지나 세 번째 페이지에 보충되지 않는 구조로 동작한다. 이로 인해 특정 조건에서 데이터 개수가 비정상적으로 보이게 된다.

 

해결방법

이 문제를 해결하기 위해서 생각한 방법은 전체 데이터를 가져와서 가공하는 것이였다.

페이지네이션을 통해 모든 데이터를 로드한 후, 클라이언트 측에서 추가 코드를 작성했다.

 

searchPlaces와 searchAllPlaces를 만들어서 기본적인 카카오 지도 api를 사용하는 함수와 전체데이터를 받아와서 사용하는 함수 2개를 만들어서 사용했다. 전체 데이터를 받아오는 함수만 사용해도 되는 거 아닌가? 할 수도 있지만 그냥 둘 다 사용해 보는게 좋은 경험이 될 거 같아서 위와 같이 하게 되었다.