무한 스크롤 관련 질문 드립니다.
안녕하세요. 재남님
토이 프로젝트 강의를 보고 무한 스크롤을 구현을 했는데 스크롤 내릴 때 처음 데이터 15개만 불러와지고 스크롤 내릴 때에는 그 다음 데이터들이 불러오지 않습니다.
깃허브에 올려주신 코드를 복사 붙여놓기 해도 동일하게 데이터가 불러오지 않습니다.
스크롤 내릴 시 그 다음 데이터를 불러오는 것을 서버에서 확인을 해야 할 지 클라이언트에서 확인을 해야 할지 감이 잡히지 않습니다.
답변 2
1
db상의 id는 '숫자형'인 반면, client로부터 넘어온 cursor값은 '문자열'이라서,=== 비교시 동일한 값을 찾아내지 못해 계속 초기 페이지만 반환되고 있습니다.
0
두군데에서 다 확인해야겠죠.
클라이언트에서 '다음 데이터'를 제대로 요청하고 있는지를 네트워크탭에서 확인해 보세요.
정상적으로 요청하고 있다면, 서버에서 해당 값을 받아서 정확히 원하는 값을 반환하고 있는지를 확인해 봐야겠죠.
둘다 정상이라면, 다시 클라이언트에서 useInfiniteQuery쪽에서 데이터를 제대로 처리하고 있는지를 확인해야 할 것입니다.
확인해보시고 정 안되면, 깃헙에 올려서 링크 공유해 주세요. 저도 확인해 볼게요 :)
0
문제
React를 실행하면 첫화면에 50개의 데이터 중 15개 데이터가 보여야 합니다. 그리고 나서 스크롤 내릴 때 그 다음의 15개의 데이터가 보여져야 하는데 위에 보여졌던 화면이 그대로 보여집니다.
예시
yarn run clinet와 yarn run server를 동시에 실행하고 Google Chrome 창에
http://localhost:3000 을 입력하면 화면이 나옵니다.
다음 화면으로 스크롤을 내리면 다음 화면에 35번 ~ 1번 데이터가 출력이 되어 하는데 다시 50번 부터 36까지 번호가 반복해서 출력이 됩니다.
우선 Server에 화면에 데이터를 출력 하는 곳을 console.log로 확인 해봤습니다.
console.log(db.messages) 출력 화면에서는 50 ~ 1번 데이터가 모두 출력이 됩니다.
console.log(cursor) 로그에서는 36이 출력이 됩니다.
Google Chrome 개발창에서 Network 탭에서 데이터를 확인 해봤습니다.
커서 내릴 때 동일한 데이터가 출력이 됩니다.
클라이언트와 서버를 확인 해봤을 때는 데이터가 출력이 되는데 커서를 내릴때마다 동일한 값으로 출력이 됩니다. 커서의 기능이 정상적으로 작동이 되지 않아서 동일한 값으로 출력이 되는 걸로 예상이 됩니다.
소스에서 어떤 부분이 잘 못 됐는지 찾지 못해서 소스코드 한번 참조해주시면 감사하겠습니다~~!
참고
질문있습니다 !
0
132
2
sass 오류
0
171
1
does not match
0
162
2
프로젝트 배포
0
297
1
코드 똑같이 쳤는데 scss 적용이 안돼요 ㅠㅠ
0
743
1
scss 스타일 적용
0
478
2
yarn run client시 에러는 안 나는데 호스트가 열리질 않습니다 ㅠㅠ
0
430
1
props 를 넘겨줄 때 함수를 그대로 넘겨줄 때와 화살표 함수로 감싸서 넘겨줄 때의 차이가 궁금합니다 :)
0
454
1
getInitialProps 과 getServerSideProps에 대해서 질문드립니다!
0
1143
1
node-sass를 했을 때 에러가 발생합니다.
0
376
1
[소스 다운로드 안됩니다]
0
323
1
rendered HTML error 관련
2
2187
2
닉네임 부분이 잘못되어 있는 것 같습니다.
0
446
2
Typescript 질문드려요!
0
331
1
error 관련하여
1
289
1
질문이 있습니다!.
0
278
1
질문이 있습니다!
0
484
1
수정된 내용까지 확인했는데 에러가 납니다 ㅠ
1
302
2
React Hydration Error 가 나는 이유가 무엇일까요 ?;;
0
630
1
useRef를 선호하시는 이유가 궁금합니다!
1
792
1
react-query 4.0.0 버전에선 에러가 납니다
0
667
1
gql 백틱 안에 색깔 입혀지는 확장프로그램이 어떤건지 알 수 있을까요?
2
682
1
typeScript에 대한 질문을 어디다가 올려야할지 몰라서 여기다가 남깁니다!
0
300
1
mutation에서 unshift 관련 에러가 나는데 어떤 문제일까요?
0
440
1