재사용 가능한 페이지네이션 컴포넌트 구축

소개

이 프로젝트에서는 웹 애플리케이션에서 흔히 사용되는 컴포넌트인 페이지네이션 (pagination) 컴포넌트를 구축하는 방법을 배우게 됩니다. 페이지네이션 컴포넌트는 백엔드에서 쿼리 시간을 줄이는 데 도움이 되며, 너무 많은 데이터 로딩으로 인한 페이지 렌더링 성능 저하를 방지합니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

• 데이터 요청을 처리하고 현재 페이지의 데이터와 총 페이지 수를 검색하기 위해 ajax 함수를 구현하는 방법.
• 페이지네이션 컴포넌트의 버튼에 이벤트를 바인딩하기 위해 initEvents 함수를 구현하는 방법.
• 함수 인수를 기반으로 페이지네이션 배열을 생성하기 위해 createPaginationIndexArr 함수를 구현하는 방법.
• 페이지네이션 컴포넌트의 문자열 템플릿을 생성하기 위해 renderPagination 함수를 구현하는 방법.
• 현재 페이지를 기반으로 콘텐츠를 렌더링하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

• JavaScript 로 재사용 가능한 페이지네이션 컴포넌트를 구축할 수 있습니다.
• Axios 를 사용하여 HTTP 요청을 하고 응답 데이터를 처리할 수 있습니다.
• 현재 페이지, 총 페이지 수 및 표시할 최대 페이지 버튼 수를 기반으로 페이지네이션 배열을 생성할 수 있습니다.
• 현재 페이지를 기반으로 페이지네이션 컴포넌트와 콘텐츠를 업데이트할 수 있습니다.