자바스크립트로 페이지네이션을 만들어보자

 

 안녕하세요. 진득 코딩입니다.

 

 이번 시간에는 그동안 만들던 뉴스 웹페이지에 페이지네이션을 적용하고 마무리하는 시간을 가져보겠습니다.

 

 페이지네이션

 

 

 페이지네이션을 적용하기 전에 우선 API 문서부터 확인해 보도록 하겠습니다.

 

 해당 문서에서 제공하는 정보를 살펴보면 pageSize는 20이 default 값으로 페이지 당 20개의 데이터가 오는 것을 확인할 수 있습니다.

 

 또한 현재 보고 있는 페이지를 page로 알 수 있습니다.

 

 위 문서에는 없지만 totalResults도 알 수 있습니다.

 

HTML

 

 

 먼저 HTML을 살펴보도록 하겠습니다.

 

 HTML에 있는 부분은 거의 없습니다.

 

 pagination이 들어갈 section이 추가되었습니다.

 

 <nav> 태그로 되어 있는 것은 pagination의 특성상 페이지를 옮겨주는 역할을 하기 때문에 이렇게 구성했다고 보입니다.

 

 

 해당 HTML 부분은 bootstrap에서 가져왔습니다.

 

 Component 파트에서 pagination파트를 보게 되면 여러 pagination을 가져와서 쓸 수 있습니다.

 

CSS

 

 

 다음은 CSS 파트입니다.

 

 pagination과 관련된 여러 스타일들을 보실 수 있습니다.

 

 위 CSS 스타일들은 구글링을 통해서 가져온 스타일들을 적용해 주었습니다.

 

JS

 

 

 다음은 JS 파일을 살펴보도록 하겠습니다.

 

 fetchNews부분에서는 if문을 추가해서 page에 pagination이 영향을 줄 수 있도록 코드를 작성하였습니다.

 

 또한 render() 함수를 호출한 후에 paginationRender() 함수를 호출하여 다 그려놓은 화면 아래에 pagination 파트에 HTML을 그려주도록 하였습니다.

 

 

 뉴스 가져오기 함수들에 keywordCategory = "";와 currentCategory="";를 넣어주었습니다.

 

 해당 페이지들을 초기화해 주고 각 페이지를 누른 상태에서 pagination을 이용해 페이지를 넘겼을 때 해당 카테고리나 검색 결과의 페이지가 넘어갈 수 있도록 해주었습니다.

 

 

 다음은 위에서 호출한 paginationRender() 함수를 살펴보도록 하겠습니다.

 

 totalPages는 totalResult(데이터의 개수)를 pageSize(한 페이지에 나오는 데이터 개수)로 나눠서 변수에 넣어주었습니다.

 

 PAGEGROUP은 page 수에서 GROUPSIZE(페이지 수가 나타나는 개수)를 나눠서 변수에 넣어주었습니다.

 

 lastpage는 if문을 사용하여 마지막 페이지 그룹이 그룹사이즈보다 작을 때를 처리해 주었습니다.

 

 paginationHTML에는 첫 페이지, 이전 페이지를 먼저 그려주고 각각의 페이지를 추가한 후에 다음 페이지, 마지막 페이지 버튼을 추가해 주었습니다.

 

 

 각각의 pagination 버튼을 눌렀을 때 페이지가 이동하는 함수를 만들었습니다.

 

 fetchNews에 항상 params에 객체를 넣어서 보내주었기 때문에 각각에 page와 pageSize를 넣어서 보내주었습니다.

 

 if문을 사용하여 현재 페이지가 카테고리를 선택했는지 키워드를 선택한 페이지인지 여부를 params에 같이 담아서 보내주었습니다.

 

 

 이번 포스팅에서 구현한 pagination이 적용된 웹사이트 시연 영상입니다.

 

 해당 웹페이지를 살펴보고 싶으신 분들은 아래 링크를 참조해 주시기 바랍니다.

 

https://jongsnews.netlify.app/

jongsNews

 

---

 

 이번 시간에는  프론트엔드의 꽃이자 계속도 많고 복잡한 pagination에 대해 알아보았습니다.

 

 위 pagination 함수에서 여러 변수들을 계속하는 일이 복잡하지만 어떤 변수가 필요하고 이런 변수들에 어떤 관계가 있는지 확인하면서 하시다 보면 충분히 구현할 수 있는 기능이라고 생각합니다.

 

 해당 기능만 완벽하게 마스터하고 넘어가시면 자바스크립트로 웹페이지를 만드는데 크게 어려운 점은 없을 것이라고 생각합니다.

 

 이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항은 댓글에 남겨주시면 열심히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊