[JavaScript] 목록 페이지 처리 (Paging) HTML + Bootstrap

웹에서 목록형 데이터를 화면에 보여줄 때 데이터가 많을 수록 렌더링 속도가 저하됩니다. 렌더링 속도 저하를 해결하기 위해 한 페이지에 보여주는 데이터 수를 제한하고 페이지를 나누는 방식을 페이징이라고 합니다.

페이지를 나누는 방식은 여러가지지만 화면에 정해진 양 만큼 페이지를 나눠 번호가 표시되는 방식을 알아보겠습니다. 페이징(Paging) 페이징에 필요한 데이터 1.

화면에 표시할 페이지 번호 수 2. 전체 데이터 목록 수 3.

페이지당 표시할 데이터 목록 수 4. 현재 페이지 번호 서버가 있다면 API 호출 시 3, 4번을 파라메터로 넘겨줘야하며, 2번과 결과 데이터를 서버로부터 받아옵니다.

페이지당 표시할 데이터만 조회해서 가져와줍니다. 페이지를 나누는 이유가 데이터가 많을 수록 렌더링이 느려지기 때문이기도 하지만 모든 데이터를 조회하는 데에도 오랜 시간이 걸리기 때문입니다.

페이지당 표시할 데이터 목록 수가 10이고, 전체 데이터 목록 수가 151이라고 했을 때 페이지 수는 ...