반성문 (about 페이징 구현)

Wony Lee·2023년 5월 21일
0
post-thumbnail

오늘은 반성문을 쓰려고 한다. 글을 오랜만에 올리는 것도 반성하지만,
이전에 올린 게시글 때문이다.
이전에 페이징에 관해서 게시글을 올린 적이 있는데, 그때의 나는 내가 구현한 페이징이 좋은 코드이고 좋은 구현법이라고 생각했는데, 그게 아니라는 생각이 들었다.

그래서 그것을 slice로 나누어 보여주는 것이 좋다고 생각했다.
또한, 하나씩 페이지 넘버를 클릭할 때마다 서버로 콜을 보내는 방법보다 효율적이라고 생각했다. 하지만 그것은 나만의 생각이었다. Page 즉, page=2&limit=100과 page=3&limit=100을 연속적으로 불러오는 일이 계속 생기는 경우에 대해서는 생각해보지 않은 것이다.

그리하여, 현재는 댓글 총 개수를 참조하여, 페이징을 다시 구현하였다.
여기서 더 추가한 기능이 있는데, 바로 [>>] 과 [<<] 버튼이다.
버튼 [>>]에 대한 기획은 예를 들어 한 페이지에 1~5의 페이징 버튼이 있고.
그 다음에 6~10까지의 페이징 버튼이 있다면 1~5 넘버의 페이지에서 [>>]버튼을 클릭할 때 페이징 번호 6번에 해당하는 리스트를 보이게 하는 것이다.

나는 이것을
( page는 현재 리스트를 보고 있는 페이지 번호, post는 limit와 같다. 즉, 현재 페이지에 보고 자하는 게시물의 개수와 한 페이지에 보고자하는 페이징 넘버의 개수)

(page+ post)- ((page+post)%post)+1으로 계산하여 보이도록 하였다.
이걸 앞서 설명한 예시로 구현해보자면

즉, 한 페이지에 보여진 페이징 넘버 범위가 1~5이고 그 다음에 보여질 범위가 6~10일 때 (page = 3, post = 5) 기획한 대로 6이 된다.

예 : (3+5)-((3+5)%5)+1 = 6반면 [<<]버튼일 때는 해당하는 페이징 넘버의 가장 첫번째로 가면 된다.예를 들어 한 페이지의 페이징 넘버 범위가 1~5일 때, 어디서든 [<<]을 클릭하면 1page가 보여져야 한다는 것이다.

1page에서도 [<<]을 클릭하면 그대로 1page가 보여져야 한다.
사실, 이 방법을 찾지 못해 해매다가, 시니어 개발자로부터 index로 구별하라는
조언을 듣고 쉽게 해결하였다.

한페이지에 보이는 페이징 넘버는 배열 안에 담겨있고, 이것을 slice로 구분하여 보여지기 때문이다.

profile
I can do it

0개의 댓글