저번시간에 이어서 또 작업을 진행한 뒤 기록해두기
오늘 작업한 내용
저번에 해보려했던 리덕스툴킷에 데이터를 미리 다 넣는걸 해보려했는데 까먹고 바로 진행해버렸다.
오늘은 게임목록들 상품들을 보여주는 페이지를 만들어봤는데 현재 디자인은 대충해놓고
구현한 기능은 중첩라우터로 카테고리를 만들고 받아온 데이터로 상품들 진열하고
한번에 5개씩 보여주게한 뒤 페이지네이션을 적용해줬다.
현재 모습인데 지금까지는 잘 작동되고 원하는대로 잘 나오고있는거같다.
이러한 모습인데 처음 기본값은 5개씩 보여주고 10개씩 15개씩 보여주는기능까지 만들어놓았다.
페이지네이션을 만들어놓고 페이지전환도 잘 작동하는데
사이트가 좀 느리다.. 최적화를 안시켜줘서 그런건지 데이터를 받아오는 속도가 느린건지는 작업하면서 알아봐야할거같다.
페이지네이션은 혼자의 힘으로 만들기는 힘든듯하여 구글링해서 코드를 참고해서 만들었다.
Pagination.js의 코드이다. 내가 봤던 블로그에서는 props로 page total limit정보를 받아와서 적용했는데 본인은 리덕스툴킷을 사용해볼 겸 store에 데이터를 넣어두고 작업했다.
store.js의 코드모습인데 내가 지금 리덕스툴킷을 잘 쓰고있는지는 잘 모르겠다.
그리고 페이지네이션의 코드보다 먼저 보여줬어야했던 All.js 모든게임 카테고리의 코드는
All.js의 코드는 이런식으로 짜두었다.
페이지네이션을 보고 만들면서 100퍼센트 이해한건 아니지만 어느정도는 이해가되는거같다.
다음엔 라이브러리도 사용해볼것이다.
그리고 지금까지는 코드가 막 복잡하지않은거같긴한데
이걸 똑같이 Puzzel.js , survival.js, simulation.js에 똑같이 작업하는건 좀 번거로울듯하니
컴포넌트로 분류시켜서 각각의 데이터만 잘 받아올 수 있게끔 만들어보고싶다.
다음 해야할 거
다음 해야할거는 위에 써놓았듯이
All.js에 작성한 저 코드들을 컴포넌트로 똑 떼와서 분류해놓은 뒤
Puzzel.js, survival.js, simulation.js에 컴포넌트만 불러오면 한방에 적용될 수 있게끔 만들어보고싶다.
그리고 저번시간에 하지못했던 리덕스 툴킷에 데이터를 넣는거 좀 더 좋은방법이 있는지 알아보고
바꿔보고싶다.
내일은 puzzel,survival,simulation 카테고리 까지 전부 끝내놓고 간단한 최적화를 진행해볼까싶다.
