inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Slack 클론 코딩[실시간 채팅 with React]

리버스 인피니트 스크롤링(useSWRInfinite)

인피니티 스크롤 시 데이터 일부를 가져오지 못하는 문제

355

쏘뇽

작성한 질문수 1

0

채팅방에서 새로운 데이터를 입력한 후, 스크롤을 위로 올려 다음 페이지를 로드하면 다음 페이지 값의 일부가 사라져서 출력되는 것 같습니다.

사진에서 5를 새로 입력했습니다. 그리고 나서 위에 닿을 때까지 천천히 스크롤하여 새로운 페이지를 불러오면

8 다음에 있어야 할 9를 불러오지 못했습니다.

테스트는 강좌 깃헙의 front 폴더와 back 폴더에 있는 코드로 진행 했습니다. 

버그인 것인지, 페이지를 불러오는 과정에서 문제가 생긴건지 궁금합니다ㅠㅠ.. 

typescript babel react Socket.io 웹팩 클론코딩

답변 1

2

제로초(조현영)

네 버그라기보다는 skip, limit 방식(페이지 단위 fetch)의 한계입니다. 이를 해결하기 위해서는 커서(lastId) 방식으로 백엔드 코드를 다시 짜야합니다.

게시글이 1~50개까지 있을 때 처음 1~10번을 가져왔는데 새로운 게시글이 추가되어서 11~20번을 가져오는 게 아니라 12~21번을 가져오는 문제입니다.

0

쏘뇽

감사합니다. lastId 방식 찾아보도록 하겠습니다!

1

제로초(조현영)

간단히 설명드리자면 지금 방식은 10개 건너뛴다음에 10개씩 가져와 이런 방식이라면 커서 방식은 이 아이디 게시글 뒤엣거 10개 가져와 이런 방식입니다.

기본 셋팅과 관련하여

0

92

1

초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법

0

96

2

focus 시에만 화면 업데이트 되는 이유 + 해결방법

0

150

2

useEffect 개수 관리

0

110

2

라이브러리 서치 방법

0

104

2

함수 정의 패턴

0

77

1

npm run dev 에러

0

152

3

npx webpack 후 에러

0

178

2

'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)

0

144

2

사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')

1

178

2

초기세팅중 packge.json 에러떠요

0

156

2

CORS - Access-Control-Allow-Origin 누락 문제

0

431

3

로그인 페이지 무한 새로고침 현상

0

598

2

Module not found: Error: Can't resolve './App' 에러

0

959

1

배포 방법

0

297

2

npm run dev 시 빌드가 매우 느려졌습니다

0

990

2

alias 경로 설정 오류

0

451

2

fetcher 함수의 data 값이 두번 찍히는 이유

0

277

1

제네릭 질문

0

218

2

ts-node 대신 tsx 사용여부

0

373

1

배포 관련 질문

0

247

1

[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.

0

385

2

[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.

0

336

1

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

0

247

2