페이징 쿼리

호밀빵 굽는 쿼카·2022년 3월 24일

NHN Cloud 인턴

목록 보기

40/48

실제로 사용하게 될 쿼리문을 작성하고 이를 피드백 받는 과정에서, 페이징 쿼리가 무엇인지 아시나요?라는 질문에 페이징 쿼리? 페이징은 들어봤는데,,라는 생각이 들었습니다. 어제 잠깐 페이징 쿼리에 대한 내용을 찾아보기는 했지만, 오늘 vue 페이징 구성을 찾아보면서 이에 대한 개념을 확실히 공부하는 것이 좋을 것 같다고 생각했고, 이를 정리합니다.

1. 프론트 부분에 구현되어 있는 v-pagination

회사 프로젝트의 프론트단은 vue로 개발 진행중입니다.
제가 마크업한 페이지들의 페이징 처리는 모두 vuetify(vue)에서 기본적으로 제공하는 v-pagination 을 통해 구성되어 있습니다.

확실하진 않지만, 코드를 보니, 저는 axios로 전체 데이터를 가져온 다음, 이를 잘라서 화면에 나누어 보여주는 형식인 것 같았습니다. 전체 데이터를 가져온다는 속도 부분에서 좋을 것이 없고 페이지를 나누어서 가져오는 것이 훨씬 효율적일 것이라고 생각했습니다. 이것이 바로 페이징 기법의 기초적인 개념입니다.

2. 페이징 기법

페이징 기법은 수많은 자료 데이터(행, 레코드)를 일정 크기로 나누어서, 나누어진 하나하나의 집단에 페이지 번호를 부여하는 방식입니다. 정해진 갯수와 원하는 영역의 게시판 데이터를 불러오고 출력한다면 '가독성'의 문제와 '자원 낭비' 문제점이 보완될 것입니다.

핵심은

사용자에게 필요한 최소한의 데이터를 전송하기 위해서 전체 데이터 중의 일부분만을 보여주는 방식

장점은

1) 사용자에게 필요한 만큼의 데이터를 전송해야 하고,
2) 서버에서 최대한 빠르게 결과를 만들어 내야 한다는 점

코드와 쿼리를 직접 짜보면 더 잘 와닿겠지만, 일단 개념으로 정리해보자면

1) 전체 게시물의 개수를 가져옴
2) 한 페이지에 몇개의 게시글을 보여줄지 정한다.(게시판이 몇개의 페이지를 가지는지 구한다.)
3) 페이지 이동 시 버튼을 클릭 해 페이지 번호 등을 파라미터로 백엔드로 전달
4) SQL에 적절한 데이터를 뽑아서 보여줌

주의할점은, 조회나 수정 작업등을 하고 다시 원래의 목록 페이지로 돌아갔을 때에 기존의 정보가 같이 유지돼야한다는 점

3. 페이징 쿼리

쿼리문을 통해 페이징 처리(MySQL)

LIMIT : 행을 얼마나 가져올지
OFFSET : 어디서 부터 가져올지
OFFSET은 INDEX를 타지 않으니 대용량 데이터를 조회할 땐

// 기존 페이징 처리 쿼리
SELECT * FROM 테이블명 LIMIT 숫자(A), 숫자(B)

// 인덱스를 태우는 페이징 처리 쿼리
SELECT * FROM 테이블명 WHERE 숫자(A) < key LIMIT 숫자(B)

하지만, MySQL에서 제공하는 LIMIT은 단점 존재

오프셋 만큼 레코드를 읽어온 후에 필요한 레코드 수를 제외한 "나머지는 버리는 방식"으로 동작한다. 예를 들어, 쿼리가 SELECT ... LIMIT 5000000, 10 처럼 LIMIT 오프셋의 값이 500만(큰 수)일 때, 500만 번 째까지 레코드를 전부 읽고 그 이후로 10개까지 레코드를 읽은 후, 앞에 필요 없는 500만 개의 레코드를 버리는 식으로 동작한다.
"레코드를 읽는다"라 함은 커버링 인덱스를 적용한 것이 아니라면 디스크 I/O가 발생한다고 볼 수 있다.
위의 예시에서는 500만이었지만 훨씬 더 큰 5,000만 건, 1억 건을 읽을 수도 있는 것이다.

따라서 LIMIT은 최적화해야 하는 대상

방법 1) 인덱스 이용
방법 2) 커버링 인덱스 이용
자세한 내용 링크

4. 필요한 것

백엔드 부분(sql쿼리작성)에서, 프론트 부분(페이지정보 뿌려주기)에서 구현되는 코드들이 각각 필요합니다. 참고할만한 링크

SQL : 쿼리는 작성하고 피드백을 받으면서 완성도를 높여갈 것
프론트(vue) : 현제는 v-pagination을 사용하면 페이징 처리를 할 수 없을 것이라고 판단하는데, 내가 방법을 찾지 못해서일수도 있다고 생각. 방법을 더 찾아보고 해결방안이 없을 시 vue.js 코드(페이지부분) 새로 작성
1> v-pagination을 사용하면서 페이징 쿼리를 적용할 수 있는 (페이징 처리를 할 수 있는) 방법
2> vue.js 코드로 페이징 처리 부분을 새롭게 작성하는 방법