알아야 할 것!
total = 총 게시물 수
limit = 페이지별 표시할 게시물 수
offset = 첫 게시물 위치
offset = (page - 1) * limit
- 필요한 페이지 수 -> Math.ceil(total / limit)
- 특정 페이지의 첫 게시물 위치 -> offset = (page - 1) * limit
(페이지 번호 - 1) * 페이지별 표시할 게시물 수
테일윈드 부트스트랩으로 페이지네이션 ui를 찾아보다가 속성값 중 sr-only
라는 것을 발견했다.
📌 sr-only
- 스크린 리더에만 읽히게 하고 화면에서는 보이지 않게 하는 것!
<span className="sr-only">이전</span>
<svg
aria-hidden="true"
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
svg아이콘만 화면에 보이는 것을 볼 수 있다.