Infinite Scroll 2

역방향 무한스크롤 스크롤에러

위에서 아래로 흘러가는 정방향의 무한스크롤에서와 달리, 역방향의 무한스크롤을 구현할때는 조건에 맞춰 스크롤을 직접적으로 이동시켜줘야한다는 차이가 있었다. 구현중 겪었던 버그를 설명해볼까 합니다. 에러발생 채팅방에 접속했을때, api요청을 통해 데이터를 제공받을때 스크롤의 움직임을 전포스팅을 통해 설명했습니다. 채팅방입장시 스크롤이 제일 하단에 위치해야하지만, 간헐적 작동을 안하거나, 중간에 멈추는 현상이 발생했습니다. 에러발생의 원인 가상화를 위해 Tanstack Virtual라이브러리의 useVirtualizer를 사용해. parent박스의 높이는 useVirtualizer의 getTotalSize함수를 통해 지정합니다. 실행결과를 본다면, totalSize가 계속 변화하는것을 볼수있습니다. dataF..

Infinite Scroll 2024.04.13

채팅방 Infinite Scroll

무한스크롤을 구현할때 빼놓을 수 없는것이 가상화 라고 생각합니다. 아이템의 높이가 다르기때문에 해당 과정에서 어려움이 있었습니다. 해당 과정을 매끄럽게 만들기위해 TanStack Virtual 라이브러리를 사용했습니다. 일반적인 무한 스크롤은 최신 데이터가 위쪽에 위치하고, 스크롤이 하단에 도달하면 데이터를 불러와 보여주는 방식입니다. 하지만 채팅방 같은 경우는 반대방향입니다. 채팅방의 무한 스크롤 구현에 어려움을 겪은 부분을 적어보겠습니다. 채팅방에 입장할 때 스크롤을 맨 아래 부터 시작해야하며, 스크롤이 맨위에 도달하며 데이터를 불러왔을때, 스크롤은 현재아이템에서 유지되어야합니다. 스크롤이 제일 아래, 즉 최신 데이터를 보고 있을땐 채팅이온다면 스크롤을 맨 아래로 유지시켜주고, 이전 데이터를 보고 있..

Infinite Scroll 2024.04.11