자유게시판에 페이지네이션을 만들어서 넣었다. 이것저것 고려하고 신경쓸 게 많아서 시간이 예상보다 훨씬 더 걸렸다. 완성된 모습이 아주 마음에 들지는 않지만, 기능을 제대로 구현했다는 것 만으로도 성공적인 첫 시도라고 생각한다. 메모해뒀던 페이지네이션 만드는 프로세스를 여기에도 옮겨둔다. (내가 보려고 해둔 메모라 나만 알아볼 수 있음 주의)
1. map을 이용해서 fetchBoards 한 데이터를 뿌려준다. 2. 한 번에 10개의 페이지를 노출시킨다고 할 때, 각각의 페이지는 {시작 페이지 + index }페이지가 되며, 시작페이지는 [1, 11, 21, 31 .. ]의 등차수열이다. 3. 시작 페이지에 해당하는 state를 만들고, 해당 state를 활용해서 fetchBoards의 variables와 map의 id값을 연결한다. (map의 id는 startPage + index) 4. prev 버튼과 next 버튼과 onClick 함수를 만들어준다. 5. 각각의 버튼을 누르면 startPage라는 state에 -10 / +10 되도록 한다. 6. 페이지가 음수로 넘어가지 않도록 prev 버튼 함수에 조건을 설정한다. 7. fethBoardsCount API를 활용해서 최대 페이지 수를 산출한다. 8. startPage + 10이 lastPage보다 커지면 페이지네이션이 넘어가지 않도록 next 버튼 함수에 조건을 설정한다. 9. prev / next 버튼이 실행됐을 때, 해당 10개 페이지 중 첫 페이지가 refetch 되도록 useQuery의 variables를 startPage state로 설정한다. 10. 페이지네이션의 마지막 10개 페이지가 노출되었을 때, lastPage 이후의 페이지는 노출되지 않도록 페이지네이션의 map에 조건부 렌더링을 걸어준다. (filter도 좋다. 사실 filter가 더 깔끔하다.)
따란~ 이렇게 하면 페이지네이션이 적용된 게시판을 만들 수 있다.
완성된 페이지네이션
list 페이지 타입 지정을 마치고 styles와 container부분을 손봤다. 완성! 까지는 아니지만 눈에 거슬리는 부분은 정리를 끝냈다. 이제 남은것은 최종보스 wrtie 페이지 뿐이다...
오늘 알고리즘 풀이를 하며 new Set()에 대한 설명을 들었다. 나도 처음 문제를 풀면서, '이건 set을 사용하면 해결되겠는데?' 라고 생각은 했지만 정작 사용에는 실패했다. 문제는 set이 객체도 배열도 아니라는 사실을 캐치하지 못하고 다른 것에 쓰는 메소드를 자꾸 갖다 붙이려 했던 것. 막힐때에는 잠시 멈춰서 내가 밟고 있는 프로세스를 찬찬히 점검해보는 것이 필요하다. 오늘은 시간에 쫓기다 보니 그걸 못해서, 문제를 온전히 스스로 해결하지 못했음. 문제가 발생하면 일단 멈춤! 기억하자.
앞으로 할 것
오늘 손 못 댄 Nav / Header / Banner 완성
포스팅과 복습은.. 주말과 명절에 해야 할 듯 하다. 일단 잊어버리지 않게 꼼꼼히 메모해두고 있다.