소개
이 프로젝트에서는 웹 애플리케이션에서 흔히 사용되는 컴포넌트인 페이지네이션 (pagination) 컴포넌트를 구축하는 방법을 배우게 됩니다. 페이지네이션 컴포넌트는 백엔드에서 쿼리 시간을 줄이는 데 도움이 되며, 너무 많은 데이터 로딩으로 인한 페이지 렌더링 성능 저하를 방지합니다.
👀 미리보기
🎯 과제
이 프로젝트에서 다음을 배우게 됩니다:
- 데이터 요청을 처리하고 현재 페이지의 데이터와 총 페이지 수를 검색하기 위해
ajax함수를 구현하는 방법. - 페이지네이션 컴포넌트의 버튼에 이벤트를 바인딩하기 위해
initEvents함수를 구현하는 방법. - 함수 인수를 기반으로 페이지네이션 배열을 생성하기 위해
createPaginationIndexArr함수를 구현하는 방법. - 페이지네이션 컴포넌트의 문자열 템플릿을 생성하기 위해
renderPagination함수를 구현하는 방법. - 현재 페이지를 기반으로 콘텐츠를 렌더링하는 방법.
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
- JavaScript 로 재사용 가능한 페이지네이션 컴포넌트를 구축할 수 있습니다.
- Axios 를 사용하여 HTTP 요청을 하고 응답 데이터를 처리할 수 있습니다.
- 현재 페이지, 총 페이지 수 및 표시할 최대 페이지 버튼 수를 기반으로 페이지네이션 배열을 생성할 수 있습니다.
- 현재 페이지를 기반으로 페이지네이션 컴포넌트와 콘텐츠를 업데이트할 수 있습니다.
