더보기 버튼

음 그러면 페이지네이션 처리하는 것 처럼 더보기 버튼을 구현하면 되는데 ~
현재 데이터 베이스에 저장된 모든 포스트 갯수를 백엔드에서 구한후에 마지막 페이지를 예측한다음에
더보기 버튼을 마지막에 페이지에서 없애 주시면 됩니다.
하지만 그렇게 하려면 현재 상태에서 많은 코드가 바뀌어야 할것같습니다...

그래도 ..혹시나 좀 더 자세하게 보여드리자면

제가 페이징 처리할떄 쓰는 코드를 첨부 하겠습니다...

// 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;

수고하세요 ~~ !

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