[Nodejs/Mysql] 게시글 페이징하기(1) : LIMIT을 사용한 Offset-based Pagination 구현하기

❓ Pagination (페이지네이션)

백엔드에서 클라이언트에게 값을 전달할 때, 일정 기준으로 분할하여 전달하는 것을 의미합니다. 웹에서 게시글을 1페이지, 2페이지로 넘기는 것과 '더보기' 버튼으로 무한 스크롤을 할 수 있는 것 모두 페이지네이션을 통해 구현된 것입니다. 페이지네이션의 방식에는 크게 2가지가 있는데, 하나는 offset 방식이고 하나는 cursor 방식입니다.

1. 오프셋 기반 페이지네이션(offset pagination)

• limit, offset 쿼리를 사용하여 구분함.
• 주로 웹 페이지에서 << 1 | 2 | 3 >> 이런 방식의 네비게이션을 쓸 때 사용

2. 커서 기반 페이지네이션(cursor pagination)

• 가장 최근 idx를 기준으로 구분함.
• 주로 무한 스크롤이나 더보기를 구현할 때 사용(SNS)

이번 포스팅에서는 가장 일반적인 페이징 방식인 offset부터 다루도록 하겠습니다.

 

 

1️⃣ Offset Pagination으로 페이징하기

offset pagination은 전체 데이터 값에서 "offset부터 limit까지" 만가져오는 방식입니다. 아래와 같은 select문을 썼을 때 aritst 테이블에서는 artist_idx가 1부터 5까지의 값을 반환해줍니다.

select * from articles LIMIT 0,5 

이제 일정하게 페이지로 받아보는 코드를 작성해보겠습니다. 먼저 , 클라이언트에서는 다음과 같은 url로 일정하게 요청이 들어온다고 가정해보겠습니다.

/artist/list?page=1&pageSize=5

page는 어디서부터 가져올지 시작할 offset을 계산할 값이고, pageSize는 offset에서부터 몇 개의 데이터를 가져올지를 제한하는 수입니다. 즉, select 문에서 "LIMIT start,end"에서 각각 start와 end에 들어갈 숫자라고 생각하시면 쉽습니다.

 

 

📂 Controller/artist.js

먼저 Controller에서는 req.query로 page와 pageSize를 받아옵니다. 값 처리는 service로 넘겨서 처리하겠습니다.

exports.artist = async (req, res) => {
  const pageInfo = req.query;
  const page = parseInt(pageInfo.page);
  const pageSize = parseInt(pageInfo.pageSize);
  const artistName = pageInfo.name;

  try {
    if (!pageInfo || !currentId || !pageSize) {
      res.status(sc.BAD_REQUEST).send(au.successFalse(rm.NULL_VALUE));
    }
    **const artist_list = await userService.cursorArtist(page, pageSize, artistName);**
    artist_list == false ? res.status(sc.BAD_REQUEST).send(au.successFalse(rm.DB_NOT_MATCHED_ERROR)) : res.status(sc.OK).send(au.successTrue(rm.DB_SUCCESS, artist_list));
  } catch (err) {
    res.status(sc.INTERNAL_SERVER_ERROR).send(au.successFalse(rm.INTERNAL_SERVER_ERROR));
    throw err;
  }
};

 

📂 Service/artist.js

먼저 page는 "어디서부터 시작할지"를 나타낼 수 있는 수라고 생각해봅시다. 다음 페이지를 갖고 오기 위해서는 이전 페이지가 끝난 위치를 알아야합니다. 그걸 계산하는 것이 페이징의 관건입니다. 여기서 간과하기 쉬운 부분은 DB에서 LIMIT으로 값을 불러올 때는 0부터 시작합니다. 즉, page =1이 들어오면 백엔드에서는 0부터 시작으로 생각해야한다는 거죠.

exports.getArtist = async (page, pageSize) => {
  try {
    let start = 0;

    if (page <= 0) {
      page = 1;
    } else {
      start = (page - 1) * pageSize;
    }

    const cnt = await user.Cnt(data);
    if (page > Math.round(cnt[0].total / pageSize)) {
      return null;
    }

    const artist_list = await user.pageAll(start, pageSize);
    return artist_list;
  } catch (err) {
    console.log('아티스트 정보 가져오기 실패.', err);
    throw err;
  }
};

page =1 , pageSize =5 일 때 LIMIT 0,5

page =2, pageSize =5 일 때 LIMIT 5,5

page =3, pageSIze = 5 일 때 LIMIT 10,5 ....이런 식으로 값이 들어가야합니다.

 let start = 0; 

    if (page <= 0) { // 0 이하의 페이지를 요청하면
      page = 1;  // 1페이지로 가도록 한다.
    } else {
      start = (page - 1) * pageSize;
    }

결국 다음 페이지의 시작점은 (page-1) * pageSize라는 결론이 나옵니다. pageSize는 얼마만큼 가져올지에 대한 문제이므로 그대로 넣어주시면 됩니다. 페이징을 계산하는 방법은 다양한데, 이번 경우는 pageSize도 같이 변수로 받기 때문에 pageSize는 따로 처리하지 않고 바로 sql문에 넣어주었습니다.

 

 

❗️이제 거의 다왔습니다.

페이지를 요청하다보면, 클라이언트는 데이터가 몇 개나 있는지 모르기 때문에 데이터보다 많은 숫자의 페이지를 호출할 수 도 있습니다. artist 테이블로 예를 들자면, 데이터는 20개고 1페이지 당 5개씩 요청한다면 총 4페이지가 전부일 것입니다.

하지만 이를 모르는 클라이언트가 5페이지를 요청한다면 에러가 날 수 있기 때문에 이를 방지하기 위해 다음 코드를 추가하였습니다.

const cnt = await user.Cnt(data);  // select한 전체 결과 수

if (page > Math.round(cnt[0].total / pageSize)) { 
    return null; 
}

클라이언트가 요청한 page의 값이 select 한 결과 값의 전체 수를 pageSize로 나누어 올림한 값보다 큰 경우는 null을 반환하여 클라이언트가 처리할 수 있도록 해줍니다.

 

📂 Service/artist.js

이제 Service에서 계산한 start와 end 값을 model에서 받아서 sql문을 실행하고 값을 반환하기만 하면 됩니다.

exports.pageAll = async (start, end) => {
  try {
   const sql = `SELECT * FROM ARTISTS_TB LIMIT ${start}, ${end}`;
   const result = await pool.queryParam(sql);
   if (result.length === 0) {
      return false;
    } else {
      return result;
    }
  } catch (err) {
    throw err;
  }
};

 

 

🏃‍♀️ 포스트맨으로 테스트해보기

GET으로 설정해주고 localhost:3000/artist?page=1&pageSize=5를 해줍니다. 현재 다른 코드로 개발 중이어서 사진 상 url이 다르지만 결과는 같으니 위 url로 진행해주세요.

page = 1 일 때 결과 

page = 2 일 때 결과

page = 3 일 때 결과

지금까지 node.js에서 offset 기반 페이징을 구현해보았습니다.

🤔 Offset 방식의 문제

offset 방식은 예를 들어 LIMIT 4000, 100이라고 한다면 offset 방식은 4000개의 데이터를 모두 읽은 다음 100개를 제한해서 가져옵니다. 결과를 다 가지고와서 그 안에서 limit을 걸어주기 때문에 전체 게시글 수를 알기에는 편합니다.

하지만 select 해온 결과 값이 많아지면 많아질 수록 순회하는 rows 수가 많아지기 때문에 성능 상에 문제가 생길 수 밖에 없습니다. 또한 무한 스크롤이나 '더보기' 같은 기능을 구현하기 위해서는 cursor 기반의 페이징으로 넘어가는 편이 훨씬 좋습니다.

다음 포스팅에서는 그래서 cursor 방식으로 넘어가는 것을 다뤄보도록 하겠습니다!

📚 참고

velog.io/@minsangk/%EC%BB%A4%EC%84%9C-%EA%B8%B0%EB%B0%98-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%84%A4%EC%9D%B4%EC%85%98-Cursor-based-Pagination-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0