zwonlala
commented
2 years ago 페이지 네이션
기존 컴타임즈
전체 기사 http://www.comtimes.kr http://www.comtimes.kr/news/list
명세
참고하면 좋을 글 : 페이지네이션 컨트롤 UX 원칙 9가지
페이지 네이션 명세
네이버 기술 블로그 디투 참고
- 현재 선택된 페이지는 다른 색상으로? 볼드로? 보여진다. (class에 select 추가되어 다르게 스타일링됨)
- 페이지들은 5개가 보여진다
- 가능하다면, 현재 선택된 페이지는 정중앙에 위치되고 좌우로 페이지가 두개씩 배치된다
- 현재 보이고 있는 페이지 번호 5개 이전과 이후에 다른 페이지가 존재한다면 좌우에 화살표 버튼이 추가된다
- 만약 전체 페이지가 N개 라면, 현재 페이지가 4(=== 1 + 5/2 올림) 이상일때
<-가 표시되고, (N - 5/2올림) 이하일때->가 표시된다- 불가능 한 상황에서 안보이게 할 것인지 아님 비활성화 시킬 것인지는 고민 중 🤔
- 조금 더 직관적으로 M(=== 5/2 올림한 값) 초과되면 좌측 화살표, N-M 이하면 우측 화살표 보여짐
- 각 화살표를 보여줄지 말지는 상태로 관리하고, 매 렌더링 시마다 검사후 화살표 버튼 보일지 말지 조건부 렌더링함
- 현재 페이지와, 화살표 버튼이 보일지 말지 상태는
- 만약 전체 페이지가 N개 라면, 현재 페이지가 4(=== 1 + 5/2 올림) 이상일때
- 화살표 버튼을 클릭하면 현재 페이지에서 +- 5 페이지 씩 이동한다.
- 만약 + - 5 페이지씩 이동하였는데 invalid 한 값이라면(음수, 0, N 보다 큰 값) 1 또는 N값으로 적절히 변경해주어야 한다 isValidPageNumber
- 각 페이지를 이동하면 api로 해당 페이지를 요청하고 받아온 값을 리스트뷰로 뿌린다.
- 각 페이지당 10개의 기사를 요청함(default 값임)
- api 요청으로 받아온 기사 데이터 리스트들은 Map등을 사용하여 캐싱하고 있다가, 다시 해당 페이지에 방문하면 재 api 요청없이 캐싱된 값을 보여준다라고 생각했는데
- 그럼 새로운 글이 올라와도, 기존 캐싱된 값 때문에 새로운 값을 못불로옴 🤔
- 페이지 네이션은 캐싱하지 않는 것이 맞는듯. 매번 Api 요청한다.
- 확인차 네이버 디투 확인해보니 매번 새로 Api 요청하고 있음
- 현재 페이지 값은 래퍼 뷰? 에서 상태로 가지고 있고, 화살표 버튼을 보일지 말지는 페이지 네이션 뷰에서 상태로 가지고 있어야 할듯
- [API] 토탈 페이지 값 api 리스폰스로 와야 함.
- 네이버 디투 블로그 api 분석해보니
- 현재 페이지 번호 (number)
- 한번에 요청하는 페이지 사이즈(size)
- 전체 기사 개수(totalElements)
- 전체 페이지 수(totalPages)
- 를 매 요청시마다 page 라는 정보도 보내줌
라우팅
기존 컴타임즈
리스트형 보기 페이지 www.comtimes.new/list 리스트형 보기 페이지 www.comtimes.new/list?page=1 기사 상세보기 페이지 www.comtimes.new/news/${newsIdx}
참고>
<벨로그>
https://velog.io/@zwonlala/
https://velog.io/@zwonlala?tag=JavaScript
https://velog.io/@zwonlala/%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85%EA%B3%BC-%ED%81%B4%EB%9E%98%EC%8A%A4-class
<네이버 기술 블로그 디투>
https://d2.naver.com/home
https://d2.naver.com/helloworld https://d2.naver.com/helloworld/0853669
https://d2.naver.com/news https://d2.naver.com/news/8284667
https://d2.naver.com/program
https://d2.naver.com/about
\
https://tech.kakao.com/
https://tech.kakao.com/blog/
https://tech.kakao.com/2022/02/04/2022-kakao-recruitment-round-2/ https://tech.kakao.com/2022/01/18/aqe-coalescing-post-shuffle-partitions/ https://tech.kakao.com/2022/01/14/2022-kakao-recruitment-round-1/
+생각해보니 404 페이지도 구상을 해야함... 🤔