본문 바로가기
Project/축구모임 홈페이지개발

[축구모임 홈페이지개발] 12/05 개발일지 Nodejs / 공지사항탭 페이지네이션, 검색기능

by 한33 2023. 12. 6.

어제 새벽에 미처 다 마무리 못한 페이지네이션 기능을 수정하고자했다.

우선 어제와 같이 코드를 짰을 때에는 글의 개수가 20개일 때에 페이지가 3개가 나오는 에러가 발생했다.

그래서 내가 생각한 방법은 올림 기능을 이용한 아래와 같은 코드이다.

          <div class="list-box" style="text-align: center; font-size: 18px;">
            <% for (let i=0; i<( Math.ceil((글전체.length) /10 )); i++ ) {%>
              <a href="/notice/<%=(i+1)%>" style="padding: 0px 3px 0px 3px;">
                <%=(i+1)%>
              </a>
              <%}%>
          </div>

 

우선 나는 일의자리에서 십의자리로 올림을 하고 싶었다.

하지만 Math.ceil() 을 이용하면 소수점에서 일의자리로 올림이 되기 때문에 먼저 글의 개수를 10으로 나누어서 소수점을 만들어주고 올림을 했다. 그럼 결국 내가 원하고자 하는 십의자리로 올림한 것과 같게 된다.

검색을 통해서 알았는데 이러한 방법을 이용하면 원하는 자리로 올림이든 내림이든 할 수 있을 거 같다. 기억해두자.

그러고 0부터 시작했기 때문에 출력을 i+1 로 해줬다.

app.get('/notice/:number', async (req, res) => {
  // let result = await db.collection('notice').find().sort({ _id: -1 }).skip((req.params.number - 1) * 10).limit(10).toArray()
  let result = await db.collection('notice').find().sort({ _id: -1 }).skip((req.params.number -1 ) * 10).limit(10).toArray();
  let result2 = await db.collection('notice').find().sort({ _id: -1 }).toArray();
  res.render('notice.ejs', { 글목록: result, 글전체: result2})
})

 

서버측에서는 우선

 

sort({ _id: -1 }).

sort 속성을 통해 정렬을 해줬는데, notice 안에 자동으로 생성되는 _id 같은 경우는 등록된 순서대로 id 가 배정받는다.

그런데 그대로 나열시키면 게시판의 맨 위에 가장 오래된 게시물이 나오게되어 내가 공지사항을 만들때에도 _id: -1 를 입력해주어서 역순으로 출력되게끔 설정해주었다.

 

.skip((req.params.number -1 ) * 10).

엔드포인트에서 :number 파라미터를 설정해서 number 마다 보여지는 게시물이 달라지게 설정했다.

skip 은 게시물을 몇 개씩 건너뛰냐에 관한 코드인데, 

만약 notice/1 은 첫번째 페이지기 때문에 skip 이 되면 안된다.

( 1 - 1 ) *10 으로 0이 스킵되어 스킵이 안된다.

 

limit(10).

10개씩 보여지게 된다.

 

하지만 위처럼 코드를 짜면 페이지네이션을 할 때 글목록.length 의 값이 10 아래로 계속 나올 것이다.

페이지네이션은 결국 전체 글의 개수를 이용하는 것이기 때문에 글 전체인 result2 를 하나 더 만들어서 글전체 라는 이름으로 렌더링시켜 사용했다.


두 번째는 검색기능. 공지사항탭에 구현할 마지막 기능이다. 원래는 검색란에 입력을 하면 검색버튼을 누르지 않아도 실시간으로 데이터를 전송시켜서 검색값만 띄워지게 구현을 하고자 했는데 우선 어떤 방법이든 구현을 해놓고 나중에 업그레이드 하는 방향으로 해보자는 얘기가 나와서 내가 우선 할 줄 아는 검색기능으로 구현을 했다.

    <div class="notice-title">검색결과</div>

    <div class="white-main">
      <div class="search-area">
        <input class="search">
        <button class="search-send">검색</button>
        <hr>
      </div>

      <script>
        document.querySelector('.search-send').addEventListener('click', function () {
          let inputdata = document.querySelector('.search').value
          location.href = '/notice-search?val=' + inputdata
        })
      </script>

 

검색버튼이 눌리면 input 태그로 지정되어있는 search 안에 있는 데이터를 /notice-search 로 보낸다. 

app.get('/notice-search', async (req, res) => {
  let result = await db.collection('notice')
    .find({
      $or: [
        { title: { $regex: req.query.val } },
        { content: { $regex: req.query.val } }
      ]
    }).toArray()

  res.render('notice-search.ejs', { 글목록: result})
})

 

데이터를 받으면 미리 mongoDB 에서 만들어놓은 title_index 와 content_index 로 접근을해서 요청받은 값으로 검색을 한다. 그 값을 글목록으로 보내면 끝이다.

 

발견한 문제점으로는 우선 검색결과 페이지에서 페이지네이션이 구현이 안되었다는 점