더보기 버튼

Question

Postsize >= Limit으로 설정을 하면 마지막으로 남는 상품의 개수가 limit과 동일하면 모든 사진을 다 불러온 상태임에도 더보기 버튼이 남게되는데요 예를들어 limit이 8이고 더 불러올 수 있는 상품이 딱 8개가 남으면 더보기버튼을 클릭해서 남은 8개의 상품을 다 가져와도 더보기 버튼이 그대로 남아 한번 더 클릭해야 없어집니다. 이 문제를 해결할 방법은 없을까요?

John Ahn · Answer

음 그러면 페이지네이션 처리하는 것 처럼 더보기 버튼을 구현하면 되는데 ~ 현재 데이터 베이스에 저장된 모든 포스트 갯수를 백엔드에서 구한후에 마지막 페이지를 예측한다음에 더보기 버튼을 마지막에 페이지에서 없애 주시면 됩니다. 하지만 그렇게 하려면 현재 상태에서 많은 코드가 바뀌어야 할것같습니다... 그래도 ..혹시나 좀 더 자세하게 보여드리자면 제가 페이징 처리할떄 쓰는 코드를 첨부 하겠습니다... // paged items route app . get ( ' /api/items ' , ( req , res , next ) => { const items = testData // get page from query params or default to page 1 const page = parseInt (req . query . page) || 1 ; // get pager object for specified page const pager = paginate (items . length , page) ; // get page of items from items array const pageOfItems = items . slice (pager . startIndex , pager . endIndex + 1 ) ; // return pager object and current page of items return res . json ( { pager , pageOfItems } ) ; } ) ; function paginate ( totalItems , currentPage = 1 , // number of items per page pageSize = 5 , maxPages = 1000 ) { // calculate total pages let totalPages = Math . ceil (totalItems / pageSize) ; // ensure current page isn't out of range if (currentPage < 1 ) { currentPage = 1 ; } else if (currentPage > totalPages) { currentPage = totalPages ; } let startPage , endPage ; if (totalPages <= maxPages) { // total pages less than max so show all pages startPage = 1 ; endPage = totalPages ; } else { // total pages more than max so calculate start and end pages let maxPagesBeforeCurrentPage = Math . floor (maxPages / 2 ) ; let maxPagesAfterCurrentPage = Math . ceil (maxPages / 2 ) - 1 ; if (currentPage <= maxPagesBeforeCurrentPage) { // current page near the start startPage = 1 ; endPage = maxPages ; } else if (currentPage + maxPagesAfterCurrentPage >= totalPages) { // current page near the end startPage = totalPages - maxPages + 1 ; endPage = totalPages ; } else { // current page somewhere in the middle startPage = currentPage - maxPagesBeforeCurrentPage ; endPage = currentPage + maxPagesAfterCurrentPage ; } } // calculate start and end item indexes let startIndex = (currentPage - 1 ) * pageSize ; let endIndex = Math . min (startIndex + pageSize - 1 , totalItems - 1 ) ; // create an array of pages let pages = Array . from ( Array ((endPage + 1 ) - startPage) . keys ()) . map ( i => startPage + i) ; // return object with all pager properties required for the API/Client view return { totalItems : totalItems , currentPage : currentPage , pageSize : pageSize , totalPages : totalPages , startPage : startPage , endPage : endPage , startIndex : startIndex , endIndex : endIndex , pages : pages }; } module . exports = paginate ; 수고하세요 ~~ !