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

안녕하세요!

감이 안오시는건 아마 프론트엔드 기술을 아직 모르셔서 그럴걸로 생각됩니다. 프론트에서는 매우 쉽습니다.

쉽게 말해서 그냥 메모리에 기억해두는 방식이라고 생각하시면 됩니다. 예를들어 [1...20] 까지 요청을 해서 데이터를 들고 있다면 프론트는 이 데이터를 이미 들고 있는 상태입니다. 또 가져올 필요 없이 그냥 계속 기억 해두면 됩니다.

추후 사용자가 스크롤을 하거나 페이지를 넘겼을때 [21...40] 까지 요청을 해서 기존 데이터에 붙이면 됩니다.

제 모든 강의는 아래 링크에서 확인 해보실 수 있으며 현재 프론트엔드 강의는 플러터 강의가 있습니다. 중급 강의에서 Pagination을 꽤나 비중 있게 다루고 있습니다.

https://links.codefactory.ai

감사합니다!

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

Full Stack 개발자님, 프론트엔드에서 pagination을 구현하는 방법에 대한 이해가 필요하신 것 같습니다.

프론트엔드에서 pagination을 처리하는 기본적인 방법은 서버로부터 한번에 많은 데이터를 받아오지 않고, 일정한 수(ex. 20개)씩 데이터를 불러오는 것입니다. 이를 위해 클라이언트는 현재 페이지 번호와 한 페이지당 몇 개의 데이터를 요청할 것인지를 서버에 전달하게 됩니다.

프론트엔드에서 구현하는 방식:

1. 페이지 상태 관리: 현재 페이지 번호를 상태로 관리하고, 페이지가 변경될 때 다시 데이터를 요청합니다.
   
2. 데이터 요청: 데이터 요청 시 필요한 페이지 정보를 포함해 서버에 요청합니다.
   
3. 데이터 보관 및 화면 업데이트: 서버로부터 받은 데이터는 저장소(예: Redux 상태, Context API 등)에 저장해 두고, 그 데이터를 활용해 화면을 업데이트합니다.
   

임시적인 조언:

• React, Vue, Angular 등 사용하는 프레임워크에 맞는 상태 관리 방법을 사용하세요.
  
• AJAX 요청 라이브러리(예: Axios, Fetch API)를 활용하여 비동기적으로 데이터를 요청하고 수신합니다.
  
• 프론트엔드 라이브러리를 사용하여 쉽게 페이지네이션 UI를 구축할 수 있습니다(예: Material UI의 Pagination 컴포넌트 등).
  

이와 관련해서는 인프런에 관련 강의를 찾아보시면 프론트엔드에서의 페이지네이션 처리 방법을 더 깊이 이해하시는 데 도움이 되실 겁니다.

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