pagination 기능 구현하기

pagination 기능이 엉망으로 코딩되어 있는 것을 발견...
흡사 코테문제 같은 기능이길래 짬내서 고쳐보았다.
그런데 사실 혼자 해결못했고
chatGPT 이녀석이 또...
대답을 넘나 잘해쥼

pagination 한 page에 data가 10개씩 들어가도록 구현되어 있는 상황이였고
ex. data가 75개면 1-6까지 pagination 숫자가 보이다가 page가 6을 넘어갈 때 7-8이 보이도록 구현하고 싶었다.

 getVisiblePages = (objects) => {
 const { current, number_pages: count } = objects; // 1 
 
    const visiblePageObj = {}; // 2
    for (let page = 1; page <= count; page += 1) {
      const key = Math.ceil(page / 6); // 3
      if (visiblePageObj[key]) {
        visiblePageObj[key].push(page); // 5
      } else {
        visiblePageObj[key] = [page]; // 4
      }
    }
    const visiblePages = visiblePageObj[Math.ceil(current / 6)];
    return visiblePages; // 6
  };

1. current는 현재 페이지 넘버, number_pages는 총 페이지 수 이다. number_pages: count 이게 뭔가 했더니 ES6의 destructuring assignment 문법을 사용한 것인데 객체 objects의 number_pages 속성 값을 count 변수에 할당하는 구문이였다. 왜 number_pages를 그대로 사용하지 않고 count 변수에 할당했는지는 모르겠다.

const current = objects.current;
const count = objects.number_pages; 

2. 일단 보여야할 페이지들이 나눠져있으니까 같이 보여야할 애들끼리 객체안에 배열로 묶어서 담아줄 예정
3. 한 번에 최대 6개씩 보여줄 것임으로 6으로 나눠서 올림한 수가 같은 애들끼리 동일 key값의 value로 들어갈 것이다.
4. 일단 처음은 빈 객체임으로 key값의 value로 해당 페이지 값이 들어간 배열을 하나 생성해주고
5. 그 다음부터 같이 보여질 page들은 배열안에 push되어지도록 구현했다.
6. 이제 현재 page(current) 가 속해있는 key값의 배열을 return해 주면 완성

//console.log(visiblePageObj)
{
  1: [1, 2, 3, 4, 5, 6],
  2: [7, 8]
}

더 나아가서 Object.values() 메서드를 사용하면 객체의 value 값인 배열들만 빼올 수도 있다.

const result = Object.values(visiblePageObj);

//console.log(result)
[[1, 2, 3, 4, 5, 6], [7, 8]]

chatGPT 보다 똑똑해지는 그 날까지... cheers✨