Feature #32 트윗 리스트를 무한 스크롤 구현

[j2h30728]

Feature

• 메인페이지에서 렌더되는 트윗 리스트를 무한 스크롤로 구현한다.

Closes #32

Description

tweets API 에서 무한 스크롤링이 가능한 페이지단위로 반환

• prisma 의 skip과 take를 사용하여 데이터베이스에서 10개씩 데이터를 가져온다.
• https://www.prisma.io/docs/orm/prisma-client/queries/pagination

메인페이지에서 트윗리스트를 무한 스크롤로 렌더하는 것으로 변경

scroll event	Intersection observer API
스크롤 이벤트가 일어 나고 뷰포트 높이와 스크롤 높이(문서상단에서 현재 스크롤된 높이까지의 거리)의 합이 전체문서의 높이보다 클 경우 다음 페이지의 데이터값을 불러온다. 하지만, scrolltop(스크롤 높이)과 offsetHeight(전체문서 높이) 를 참조하는 방식은 리플로우를 다시 일으켜서 참조값을 업데이트 할 수 도있다. throttle을 사용하여 스크롤이 발생할 때, 일정 시간마다 스크롤 이벤트를 일으키는 것으로 최적화가 가능하다.	브라우저 뷰포트와 설정한 타겟의 교차점을 확인해서 타겟이 뷰포트에 포함될때 다음 페이지의 데이터 값을 불러온다.

• 스크롤 이벤트에서 쓰로틀링을 사용하여도 마지막에 디바운스까지 적용하는 점, 일정시간 간격으로만 동작하게 하는 쓰로틀링의 기법으로 인하여 이벤트리스너 동작이 지연될 수있는 잠재적인 점들으로 인하여 Intersection observer API 채택한다.
• Intersection Observer를 사용하여 마지막 타켓이 뷰포트에 포함되는지 감지하고 추가적인 데이터를 가져오는 무한 스크롤 방식으로 구현한다.

무한 스크롤로 렌더되는 tweet들의 좋아요 낙관적 업데이트를 적용

---

레퍼런스

• https://swr.vercel.app/ko/docs/pagination

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
dam-witter	✅ Ready (Inspect)	Visit Preview	Dec 24, 2023 2:42pm