이전에 글들을 나열하는 페이지를 만들었다.
만약 게시글이 많아지게 되면 한 페이지에 모든 게시물들을 보여주기엔 좀 한계점이 존재한다.
그래서 페이지를 나눠볼꺼다

페이지네이션

우선 기존 코드에서
밑 코드와 같이 수정해서 /list 페이지에 게시글들을 5개씩 보여주도록 했다.

server.js

app.get('/list', async (req, resp) =>{
    let result = await db.collection('post').find().toArray();
    resp.render('list.ejs', {posts : result })
})

// 수정

app.get('/list', async (req, resp) =>{
    let result = await db.collection('post').find().limit(5).toArray();
    resp.render('list.ejs', {posts : result })
})

일단 페이지를 나누는 방법은 2가지다
한 가지는 skip()을 사용하는 것이고, 또 한가지는 find()에 조건식을 두어서 페이지를 나누는 방법이다.

await db.collection('post').find().limit(5).toArray() // 1 ~ 5번 게시글 가져오기
await db.collection('post').find().skip(5).limit(5).toArray()  // 6 ~ 10번 게시글 가져오기

이렇게 skip(x)은 x개를 스킵하고 가져와달라는 뜻이다.
일반적인 페이지네이션과 같이 1페이지 2페이지 3페이지 4페이지 5페이지 이렇게 나눌 수 있다.
하지만 skip()에서 숫자가 더 커지게 되면 나중에 데이터를 조회하는 시간이 오래 걸릴것이다.
그래서 나는 find()에 조건을 두어 찾아오도록 했다.

server.js

app.get('/list/next/:id', async (req, resp) =>{
    let result = await db.collection('post')
    .find({_id : {$gt : new ObjectId(req.params.id)}})
    .limit(5)
    .toArray();
    resp.render('list.ejs', {posts : result })
})

list.ejs

<div class="white-bg">
       <% for(let i = 0; i < posts.length; i++){ %>
            <div class="list-box" id="post_<%= posts[i]._id %>">
                <h4>
                    <a href="/detail/<%= posts[i]._id %>"><%= posts[i].title %></a>
                </h4>
                <p><%= posts[i].content %></p>
                <span class="delete" style="cursor: pointer;">글 삭제하기</span>
            </div>
        <% } %>
    </div>

    <a href="/list/next/<%= posts[posts.length -1]._id %>">다음 페이지</a>
    
    

id값을 url 파라미터로 받아와서 해당 아이디값 초과 인 게시물들을 5개씩 다음페이지 버튼을 누르면 보여주도록 했다.
하지만 이것의 단점으로는 1페이지 2페이지 3페이지 이렇게 나눌 수 없고, "몇 번째 게시글을 보여주세요." 라는 것을 할 수 없다
하지만 속도가 빠르다는 것이 장점으로 꼽을 수 있다.
간단한 게시글 페이지이면 skip()을 사용하는 것이 오히려 더 좋을 수 있다.

여기서 추가적으로 이전 페이지도 보여주는 것을 추가해주었다.

server.js

app.get('/list/prev/:id', async (req, resp) =>{
    let result = await db.collection('post')
    .find({_id : {$lt : new ObjectId(req.params.id)}})
    .sort({_id: -1})
    .limit(5)
    .toArray();
    resp.render('list.ejs', {posts : result.reverse() })
})



list.ejs


<div class="white-bg">
       <% for(let i = 0; i < posts.length; i++){ %>
            <div class="list-box" id="post_<%= posts[i]._id %>">
                <h4>
                    <a href="/detail/<%= posts[i]._id %>"><%= posts[i].title %></a>
                </h4>
                <p><%= posts[i].content %></p>
                <span class="delete" style="cursor: pointer;">글 삭제하기</span>
            </div>
        <% } %>
    </div>

    <a href="/list/next/<%= posts[posts.length -1]._id %>">다음 페이지</a>
    <br/>
    <a href="/list/prev/<%= posts[0]._id %>" >이전 페이지</a>