인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

soap님의 프로필 이미지

작성한 질문수

스프링부트로 직접 만들면서 배우는 대규모 시스템 설계 - 게시판

게시글 목록 API - 페이지 번호 - 게시글 개수 - 설계

프론트에서 페이지네이션 count 계산법 질문드립니다!

해결된 질문

작성

·

135

·

수정됨

0

  1. 페이지 번호 공식은 다음 버튼 활성화 유무만 판단하는 거고 이전 버튼 유무는 프론트에서'만' 제어하는 걸까요?

 

  1. 프론트에서도 페이지 번호 공식을 알고 있는걸까요?

     

2:50초 11~20번 페이지에 있을때

프론트에서 계산한값(601) == 백엔드에서 내려준 값(601)

=> 같으므로 '다음' 버튼 활성화

 

프론트에서 계산한값(601) == 백엔드에서 내려준 값(500)

=> 601 미만 이므로 '다음' 버튼 비활성화

 

(강의 넘 재밌어요. 게임 하는거 보다 재밌다..)

답변 2

1

쿠케님의 프로필 이미지
쿠케
지식공유자

dncjf64님, 안녕하세요!

 

  1. 이전 버튼 유무는 자연스레 같이 알게 됩니다. 500개의 게시글이 응답되었다면, 당연히 이전 버튼으로도 이동할 수 있음을 의미합니다!

  2. 프론트에서는 해당 공식에 대해 몰라도 됩니다. 화면 상에 몇 페이지까지 노출할지 서버와 합의만 된다면(또는 파라미터로 전달할 수 있다면), 응답된 게시글 개수만 가지고도 충분히 구현할 수 있습니다!

 

혹시 더 궁금한 점 있으시면 편히 문의 주세요!

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. dncjf64님.

페이지네이션에 대한 질문에 대해 답변드리겠습니다. 페이지네이션은 주로 프론트엔드와 백엔드의 협력 작업이 필요합니다. 여기서 중요한 것은 프론트에서 어떻게 페이지 버튼의 활성화 상태를 결정하는가 하는 점입니다.

프론트에서 페이지 번호와 버튼 활성화

  1. 페이지 번호 공식: 페이지네이션에서 프론트엔드는 보통 다음과 같은 로직을 사용하여 페이지 번호를 계산하고 버튼을 활성화합니다. 이는 사용자 경험을 향상시키기 위한 것이며, 다음 페이지가 있는 경우 “다음” 버튼이 활성화되고, 없을 경우 비활성화 되도록 설정합니다.

  2. 프론트와 백엔드의 역할: 백엔드는 보통 총 아이템의 개수나 마지막 페이지의 유무를 프론트로 전달하고, 프론트는 이를 바탕으로 페이지 번호와 버튼의 활성화 상태를 결정합니다.

  3. 계산 방법: 두 가지 예시를 들어보겠습니다:

    • 프론트에서 계산한 값(프론트에서 필요한 요청 데이터 수)이 백엔드에서 제공한 값과 동일하면 다음 페이지가 있다는 의미로 ‘다음’ 버튼을 활성화합니다.
    • 프론트에서 계산한 값이 백엔드에서 제공한 값보다 크면 더 이상 페이지가 없다는 의미로 ‘다음’ 버튼을 비활성화합니다.

이런 과정을 통해 프론트엔드는 백엔드로부터 받은 데이터를 분석하여 사용자에게 적절한 페이지 네비게이션 버튼을 제공합니다.

아래는 유사한 질문에 대한 링크로, 더 궁금한 점이 있으면 참고해보시면 좋겠습니다:
- 무한 스크롤 쿼리와 페이지 번호 쿼리 질문
- 무한 스크롤 질문있습니다

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

soap님의 프로필 이미지

작성한 질문수

질문하기