항해99 👩‍💻75일차 TIL

 

⭐ Final Project ⭐

offset 방식을 사용하여 무한스크롤(Infinite Scroll)을 구현하였다. 

 

Infinite Scroll 

백엔드에서 가지고 있는 수 많은 데이터를 한 번에 보내주면 프론트에서 처리할 일이 많아지기 때문에 서로 약속한 일정 기준으로 잘라서 프론트엔드로 보내주는 방식이다.

 

원리

프론트엔드에서는 현재의 위치인 Offset과 한 번에 보여줄 갯수인 limit를 백엔드로 넘기면, 백엔드에서는 그에 해당하는 길이로 데이터를 끊어서 보내준다. 

 

장점

사용자 친화적이다(페이지 버튼을 클릭하는 것보다 편리하다).

화면이 작은 모바일에서 더욱 유용하다.

 

 

코드

const board = async (req, res) => {
  try {
    const data = req.query;
    
    //프런트엔드에서 page, limit값이 잘 넘어오는지 확인.
    console.log("page", data.page);
    console.log("limit", data.limit);
    
    //infinite scroll 핸들링
    // 변수 선언 값을 정수로 표현
    let page = Math.max(1, parseInt(data.page));
    let limit = Math.max(1, parseInt(data.limit));
    
    //NaN일때 값지정 
    page = !isNaN(page) ? page : 1;
    limit = !isNaN(limit) ? limit : 6;
    
    //제외할 데이터 지정 (+1 해준 게 다음 페이지 시작점이다.)
    let skip = (page - 1) * limit;

    const boards = await Board.find({})
      .skip(skip)
      .limit(limit);

    res.json({ boards });
  } catch (err) {
    console.error(err);
    next(err);
  }
};