👨💻 사건
prisma client 로 접근하여 내가 원하는 데이터를 패칭해오고 있다.
이때, 무한스크롤 구현을 위해 cursor 속성을 사용하였다.
구현방식
- 조건에 맞는 11개의 데이터를 가져온다고 가정한다.
- 이때 마지막 데이터의 id 값 ( 나의 경우는 UID ) 를 prisma client 에 넘겨준다.
- cursor 속성에 id 값을 설정해두어, 그 id 부터 다시 11개의 데이터를 패칭한다.
여기서 다음 데이터 패칭이 일어날 경우, 해당 id 값도 포함하는 데이터를 불러와 중복된 데이터가 생기기 때문에 가장 처음의 값은 skip 한다.
구현 코드
해당 방법을 토대로, 사용된 코드는 아래와 같다.
const users = await client.playerInfo.findMany({
// 정렬
orderBy: {[column]: order},
// 필터링
where: whereConditions,
// 포함
include: {
status: true,
},
// 패칭할 데이터 수
take: 11,
// uid 가 있으면, 스킵
skip: uid ? 1 : 0,
...(uid && {
// uid 가 있으면, cursor 속성 사용해서 위치 지정
cursor: {
UID: Number(uid),
},
}),
});처음에는 정상적으로 동작이 되는줄 알았다.
그런데, take 를 바꾸거나, skip을 바꾸면 자꾸 선수 리스트의 순서가 미묘하게 바뀌거나 가끔은 패칭이 안되는 선수도 보였다.
✅ 해결
선수의 패칭되는 순서에 집중
하루정도의 시간을 가지고 계속 고민하고, 코드를 수정해보면서 변화를 주려고 하였다.
skip을 안주고 데이터 패칭을 하면, 이전 리스트의 마지막 선수가 다음 리스트의 첫 선수가 되면서 데이터 중복은 일어나지만 제대로 모든 선수가 패칭되는것을 알수있었다.
그렇다면 skip 의 문제가 의심된다.
그래서 생각해 보았다.
다음 페이지 네이션을 하는 과정에서 cursor 를 통해, 위치를 지정한다면 그 id 를 기준으로 해당 조건에 맞는 선수를 11명 다시 패칭하는 것이다.
skip 을 통해, 해당 id 는 건너뛰고 다음 id 를 탐색해야한다.
이때 정렬 기준을 통해, 다음 id 를 탐색하는거다.
여기서 이제 문제점이 보이기 시작했다.
정답은 정렬기준
현재 기본적인 정렬기준은 선수의 총 능력치 내림차순이다.
그렇다면 과연 같은 능력치의 선수가 여러명 있다면, 다음에 해당하는 id 값은 어떻게 찾는 것일까?
그렇다. 이것이 문제였다...
그래서 결과적으로 정렬기준을 추가했다.
같은값이 나오면, UID 가 낮은 순으로 cursor 가 방향을 명확히 잡도록 유도하였다.
const users = await client.playerInfo.findMany({
orderBy: [{ [column]: order }, { UID: 'asc' }],
...
});💭 개선
- 메인페이지 리팩토링 작업이 7~80% 정도 마무리되었다.
- 내일은 소셜로그인 설정을 해줄생각이다.
