[Node.js] Pagination

📁 Pagination이 뭔데?

Pagination이라고 하는 이 기술은 대체 뭘까? 한정된 데이터 자원을 효율적으로 활용하기 위해 쿼리의 결과값으로 리턴된 리소스를 분할하여 전달하는 것을 의미한다고 한다. 결국 이건 보여줄 데이터가 방대한 것에 비해 한번에 보여줄 수 없을 때 사용하는 기능으로 일종의 데이터를 나눠서 보여주는 방식이라고 할 수 있다.

 

웹으로 가정했을때, 한 페이지 내에서 보여줄 수 있는 데이터의 양이 일정 부분 정해져있다고 생각해보자. 예를 들어 우리의 해상도 가득 데이터를 보여주는 정도를 말이다. 데이터가 아무리 많아도 우리는 해상도에 다 들어갈 만큼만의 데이터를 보여줄 수 밖에 없는데 이때 페이지를 나눠서 보여주는 형식을 Pagination 이라고 할 수 있다.

 

보통 Pagination이라고 하면 방법이 다양하다고 한다. 다음과 같이 번호로 나눠서 데이터를 보여줄 수 있고,

 

번호로 나눠서 데이터 분할 전달

 

다른 방법으로 같이 일정량 이상의 스크롤을 하면 자동으로 다음 것을 보여주는 instagram이나 twitter, youtube의 방식이 있다.위와 같은 방식의 pagination같은 경우는 사용자의 흐름을 깨지않고 데이터를 계속해서 제공해 줄 수 있는 방법이라는 면에서 장점을 지닐 수 있다. 이와 같은 방식은 무한 스크롤(Infinite scroll) 이라고 한다.

 

🎡 무한 스크롤이 제대로 뭔데?

무한 스크롤이란 위의 인스타그램과 트위터, 유튜브와 같이 정의해둔 페이지의 하단에 사용자가 도달했을 시, 데이터를 계속 로드해주는 방식이라고 할 수 있다. 이렇게 되면 사용자는 흐름의 끈김없이 데이터를 계속해서 추가로 공급받을 수 있다는 장점이 있다. 한 페이지 내에서 무한으로 데이터를 제공해 주기 때문에 가능한 것이라고 할 수 있다.

 

무한 스크롤의 장점

• 사용자의 참여 유도 및 콘텐츠 탐색의 용이
• 페이지 로드 시간이 짧음
• 모바일 환경일 시 더욱 직관적으로 볼 수 있고 사용하기 용이

 

무한 스크롤의 단점

• 페이지 성능이 느려짐
• 원래 위치로 되돌아오기 힘듦
• 스크롤 막대가 실제 데이터를 전부다 반영하지는 못함

 

 

 

📁 Pagination은 어떻게 구현될까?

페이지 네이션의 구현은 기본적으로 다음과 같다고 한다.

 

Pagination의 필수 값

• TotalItem : 총 데이터 수
• CurrentPage : 현재 페이지
• PageLength : 총 페이지 수
• ItemPerPage : 한 페이지에 나타낼 데이터 수

기본적으로 위의 값을 갖고 get 방식을 통해 데이터를 나타낼 수 있다. 또 무한 스크롤의 경우 저기에서 필요한 부분이 추가되는데 다음과 같다.

무한 스크롤의 필수 값

• window.innerHeight : 요소의 높이와 내부 여백(padding)
• window.scrollY : 현재 스크롤된 부분의 높이
• scrollHeight: 요소 콘텐츠의 총 높이

 

---

참조 : https://hi-zini.tistory.com/m/entry/%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%B2%98%EB%A6%AC

페이지 처리

참조 : https://velog.io/@seob/Pagination-%ED%8E%98%EC%9D%B4%EC%A7%95-%EA%B7%B8%EA%B2%8C-%EB%AD%90%EC%A7%80

Pagination? 페이징? 그게 뭐지?