[TIL] 내배캠4기-NextJs-120일차

커뮤니티 게시판 페이지네이션 구현하기

알아야 할 것!

1. 필요한 페이지 수
2. 특정 페이지의 첫 게시물 위치

total = 총 게시물 수
limit = 페이지별 표시할 게시물 수
offset = 첫 게시물 위치

offset = (page - 1) * limit

1. 필요한 페이지 수 -> Math.ceil(total / limit)
2. 특정 페이지의 첫 게시물 위치 -> offset = (page - 1) * limit
   (페이지 번호 - 1) * 페이지별 표시할 게시물 수

sr-only

테일윈드 부트스트랩으로 페이지네이션 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아이콘만 화면에 보이는 것을 볼 수 있다.