하루를 마무리 하기 전, 오늘 있었던 일들을 잔잔히 되짚어봅니다.
성공과 실패의 모든 요소에서 '배울 점'을 찾아내어 기록하고,
더 성장하는 내일의 나를 위해 'action plan'을 세웁니다.
오늘만큼은 뭔가 페이지에 대한 진도를 나가고싶었다.
주말까지 페이지 때문에 고생할 생각을 하니 눈앞이 캄캄...
솔직히 이비인후과 약때문에 너무 졸려서 오전에는 비몽사몽. 엎드렸다가 다시 일어났다가 또 엎드렸다가. 졸면서 페이저블 강의를 다시 보기도 하고 지난번에 띄워놓았돈 페이지 관련한 온갖 블로그 글과 공식 문서를 뒤지고 있었다.
어제 늦은 오후였나.
일과를 종료하기 전에 갑자기 프론트쪽에 8개의 데이터 array가 튀어나오는 것을 보고 오? 싶었는데 그 이후론 컨디션이 영 아니라서 일찍 자버렸다.
그걸 오늘로 끌고 온건데...
특정 1개의 페이지는 어찌저찌 콘솔에서 보이는데 그 나머지것들에 대해서는 어떻게 해야할지 정말 감이 잡히지 않았다.
어젯밤 침대에 누워서도 '이렇게 해볼까? 저렇게 해볼까?' 생각을 했고
오늘 새벽에 일어나서도 '스터디카페에 가면 이것부터 해봐야지' 라는 생각을 했었는데
그 생각들을 한데 모아 좀 나눠보기 시작했다.
페이지를 제대로 구현할 수 없을 것 같아 최악의 상황(?)에서 쓰려고 했던 '모든 데이터를 가져간 후에 8로 나눠버린다'를 떠올렸다.
백엔드에서 리턴해주는 값이 페이지 1개에 대한 것이라면, 그 리턴값을 한개 더 추가해서 repository에 있는 데이터 전체의 갯수를 내보내줘야겠다.
여기까지가 내 결론이었다.
그리고 나서 지난번에 봤던 공식문서와 블로그 글들을 보는데 갑자기 '전체 페이지의 갯수'를 알려주는 메서드 비스무리한 것을 봤던게 생각났다.
달달달. 찾아보니 .getTotalPages()라는 메서드가 있다.
사실 전체 컨텐츠의 갯수를 가져가버리면 내가 일일이 계산해서 페이지 넘버를 띄워줘야 하는 불상사(?)가 일어난다.... 예전 게시판 과제의 악몽이 다시 떠오르는 것 같아...
근데 .getTotalPages() 메서드로 전체 페이지 수만 가져가면 얘가 알아서 계산을 해줬기 때문에 나는 이 페이지 개수 만큼만 넘버링을 해주면 되는 것이다. 똑똑한 아이!
이 넘버를 가져가서 뭘 어떻게 해줘야하는지는 좀 고민스러웠지만 다행히 선각자(ㅋㅋ)가 블로그에 정리해준 부분이 있어 우선은 버튼으로 만들어주었다.
사실 이 과정까지 가는 것이 정말로 쉽지 않았다. 뭔가 알수없는 Page라는 객체에 대해 검색하고 알아가는 것도 쉽지 않았고...
프론트쪽에서 나오지 않는 문제나, 아님 백쪽에서 어떻게 코드를 짜줘야 하는지 같은 문제들.
오히려 백엔드는 좀 간단했는데 프론트쪽이 문제였다.
그래서 이번엔 정말 작정하고 모든 과정들마다 console.log();를 찍고 하나 하나 찾아나갔다.
이 과정을 통해
(1) 8개의 컨텐츠가 담긴 페이지 1개를 보내준다는 것을 알았고,
(2) 내가 받아야 할 데이터가 페이지 1개만이 아니구나 하는 것을 알았고,
(3) service, store 각각의 단에서 어떤 역할로 데이터를 가져오고, 어떤 데이터를 활용해야 하는지 알았다.
우선은... 1차로 되는 것 같으니 리팩터링에 집중하고....
주말동안은 CSS와 함께 지금 해결되지 않은 2가지 문제(amount 전역 관리, 새로고침 시 발생하는 문제)를 해결하자.
암것도 모를 것 같은 때엔 어디는 console.log();를 찍어보자. 길을 밝혀줄 터이니...
