템플릿 목록 응답의 전체 템플릿 수의 필요성에 대해 이야기해봐요

[jminkkk]

템플릿 목록 조회 API

템플릿 목록 조회 API가 성능 개선을 했지만 데이터가 많은 경우 여전히 느리다. (베타 서버 데이터 400만건 기준 API 응답 속도 8s)
그 이유는 여러가지가 있는데, 1차 성능 개선을 한 이후에서 가장 크게 느껴지는 문제는 전체 템플릿 수인 totalElements, totalPages 를 반환하는 것이다.

템플릿 목록을 조회하면, 전체 페이지 수와 전체 페이지 수 값을 반환해야 하기 때문에 조회 시 백엔드에서는 JPA Page타입을 사용하고 있다.
Page 타입을 사용하게 되면 JPA는 (조건에 맞는 템플릿을 조회했던 쿼리 + 조건에 맞는 템플릿의 전체 갯수)를 조회하는 쿼리를 발생시킨다.

"조건에 맞는 템플릿을 조회했던 쿼리"는 조건이 걸리고 인덱스를 탈 수도 있고 20개씩 offset이 지정되어 있기 때문에 상대적으로 속도가 느리지 않다.
하지만 두번째 쿼리인 "조건에 맞는 템플릿의 전체 갯수"는 offset과 별개로 모든 조건에 맞는 컬럼 수를 조회한다.

즉 우리 구경가기 페이지에 제일 처음 조회 시 아무런 조건이 없는데, 100만개의 데이터가 있으면 100만개를 풀스캔하는 것이다.

모든 조건을 구경가기 처음 클릭 시와 동일하게 작성하고 쿼리 실행 시간 분석 진행해보자.

템플릿 조회 쿼리

count 쿼리

실행 시간이 약 0.492ms vs 약 150ms 차이 발생하는 것을 알 수 있다.
다시말해 totalElements를 조회하는 쿼리가 20개의 템플릿을 조회하는 것보다 약 304.878배가 소요된다는 것이다.

totalElements 사용 이유

totalElements의 용도는 목록 조회 시 하단 페이지네이션 바에서 가장 마지막 페이지로 이동하기 위해서이다.

totalElements는 304배를 감수할만큼 자주 사용되고 있을까?

한국에서 굉장히 유명한 백엔드 향로 블로그에 따르면 "굳이 사용율이 떨어지는 페이지 버튼을 위해 매번 전체 count 쿼리가 수행될 필요가 있을까를 한번 고민해볼 필요가 있는데요." 라고 한다.

우리도 한번 이야기해봐요

[Jaymyong66]

좋은 접근이네요!
보통 이런 결정을 할 때, 사용율을 파악하기위해 페이지 버튼을 얼마나 사용자가 사용하는가를 알면 좋지만 지금은 GA가 제대로 안 되어있어서 확실한 지표를 알 긴 어렵네요.
저도 몰리처럼 검색할 때의 시간이 더 중요하다고 생각됩니다.
끝 페이지 버튼을 없애거나, total 데이터를 가져오는 API를 분리해보아도 좋겠네요

[Hain-tain]

일단 이렇게 문제제기 해주고, 근거를 수치화하여 멋지게 작성해준 몰리에게 무한 박수👏👏👏👏👏

몰리 글을 읽어본 결과 페이지네이션을 위해 프론트에게 전달해주고 있는 totalElements, totalPages를 가져오는게 성능 저하를 초래한다는 것 같네요!

일단 먼저 totalElements 는 페이지네이션에서 필요한 값은 아닙니다. 제 기억으로는 내템플릿 페이지에서 내가 작성한 템플릿이 총 몇개인지를 보여주기 위해서 api 에 추가되었으나, 디자인이 변경되는 과정에서 보여주지 않고 있는걸로 기억하고 있어요. 따라서 사용자에게 총 템플릿 개수를 보여주는 것보다 검색 성능 향상이 더 우선된다면 없애도 될 것 같습니다.

totalPages 의 경우 페이지네이션에서 사용되고있는 값이 맞습니다. 그런데 끝 페이지 버튼을 없애게 되더라도 totalPages를 받는게 아니라 다른 방식으로 구현이 바뀐다면 페이지네이션 구현이 조금 많이 변경되어야 할 수도 있겠다는 생각이 드네요🥲
하지만 성능이 개선된다면 해야하는 작업이라고 생각하기도 합니다!

결론: totalElements는 없애도 무관, totalPages는 없앨경우 어떻게 페이지네이션 로직을 변경할지 논의해봅시다!

(+) 페이지네이션을 totalPages없이 구현하기 위해서는

1. 현재 클라이언트에서는 총 5개의 페이지버튼을 보여주고 있습니다. 1,2 페이지의 경우 5 페이지까지 존재하는지 받아와야 합니다.
2. 4페이지 이후부터는 현재 페이지 +2 까지의 페이지가 존재하는지 받아와야 합니다. 이때 +2 까지 존재하지 않더라도 다음 페이지는 존재하는지도 별도로 받아와야 합니다.
3. 이 모든 것을 어떤 데이터 타입으로 받아오는 것이 좋을까요?

[jminkkk]

대면 회의를 통해 현재 페이지 기준 최대 페이지네이션바에 있을 수 있는 페이지를 반환하기로 했습니다.

현재 페이지 1, 총 페이지 25 -> 5페이지 반환
현재 페이지 1, 총 페이지 4 -> 4페이지 반환

AS IS

TOBE

{
  "nextPages": 5,
  "templates": [
  // 생략
  ]
}