인피니티 스크롤로 프론트엔드 최적화를 시도했다.
왜냐하면 본 프로젝트는 라이엇 api에서 제공하는 다양하고 많은 데이터를 설립한 수식들과 함께 긴 프로세스를 거치기 때문에 그 수가 많아지면 받아오는 로딩시간이 길어질 것이라고 예상했기 때문이다.
먼저 본 프로젝트는 React-hook을 사용하기 때문에 react-intersection-observer의 useInView를 이용해서 리액트스럽게 마지막 요소를 감지했다.
이후 클라이언트에서 마지막 요소를 특정할 수 있는 데이터를 전송하고, 서버에서 받는다.
서버는 받은 데이터로 보내줘야할 다음 데이터를 계산하고 보내준다.
요소를 특정할 수 있는 데이터는 페이지 단위로 구분을 했다.
마지막 요소가 보일 때 마다 마지막 요소의 번호를 계산해서 이어 받아야 할 페이지가 몇번째 페이지인데 계산했다.
중복 데이터 요청을 방지하기 위해 성공적인 요청 이후 page를 +1 증가시켰다.
서버에서의 쿼리는 limit, offset을 통해서 간단하게 페이징 단위의 쿼리를 구현했다. 과정에서 jpa_query_method nameing 원칙에 limit, offset 키워드가 없었기 때문에 nativequery문을 사용해서 쿼리문을 보냈다.
생각보다 인피니티 스크롤이 발생하고 데이터를 받아와 렌더링 속도가 무척 빨라서 일부러 500ms 정도 시간을 지연시켜서 로딩 피드백을 사용자가 확인할 수 있게 했다.
고민하고 있는 점은 새로고침시 리셋된다는 점인데, 새로고침을 하면 사용자는 최신 유저를 보고 싶어하는 것이라고 생각해서 굳이 page를 저장해서 관리할 필요는 없을 것 같다.
