무한스크롤

이전 글에서 useInfinityQuery를 사용하여 무한 스크롤 피드를 구현해보았다. 하지만 두가지 문제가 존재했다. 새롭게 글을 작성/수정/삭제 하는경우 피드데이터는 어떻게 최신화 되어야 하는가? 세부 글보기에서 좋아요/댓글을 추가/삭제하는 경우 피드데이터는 어떻게 최신화 되어야 하는가? 이번에는 이 두 가지 문제를 해결해보자. 이 문제 중 두번째 문제가 당근마켓 그룹플랫폼 인턴직무의 사전 질문이었다...! 이걸 직접 해결해 볼 수 있는 기회가 이렇게나 빨리 오게 될 줄이야.... https://0422.tistory.com/331 당근마켓 윈터테크 인턴십 그룹플랫폼 직무면접 불합격 회고 그룹 플랫폼 팀에 지원 이번 윈터테크 인턴십은 프론트엔드가 코어, 광고, 그룹플랫폼 3가지 형태로 구성되어있었다...

이전글에서 무한스크롤에 필요한 두가지 조건을 정리했다. 사용자가 페이지 하단에 도달했을때 콘텐츠가 계속 로드 첫번째 조건은 이전글에서 완료했으니, 2번째 미션을 해결할 차례다. 어떻게 콘텐츠가 계속 로드되게 만들 수 있을까? 데이터를 페이지네이션 형태로 제공하는 방법은 크게 cursor 기반과 offset 기반, 두가지 방법이 존재한다. 하지만 그것은 백엔드 개발자의 일이구요... 라고 하면 큰일나니 간단하게 알아보자. offset 기반 페이지단위로 구분해서 구현이 간단하나 데이터 중복문제(중간에 글이 써지는경우)가 발생한다. offset값이 커지면 앞의 데이터를 모두 읽어야해서 DB상 성능문제가 발생할 수 있다. cursor 기반 cursor라는 사용자에게 마지막으로 응답해준 마지막 데이터 식별자 값을..

배경 커뮤니티 서비스를 만들고 있는데, 피드를 만들어야 했다. 이전에 당근마켓 인턴십의 사전 질문이기도 했던 세부 글보기 에서 좋아요/댓글이 추가/삭제된 경우 어떻게 피드에 반영할 것인가?라는 질문에 직접 구현해보며 답할 수 있는 좋은 기회라고 생각해서 구현하게 됐다. 무한스크롤에 필요한 것들을 하나씩 확인해보면서 구현할 것이다. 필요한 것 알아내기 무한 스크롤은 사용자가 페이지 하단에 도달했을때 콘텐츠가 계속 로드되는 사용자 경험 방식이다. 그럼 구현에 필요한 두가지 필수 조건을 알 수 있다. 사용자가 페이지 하단에 도달했을때 콘텐츠가 계속 로드 이 두 가지 미션을 해결하면 무한스크롤이 되는 것이다. 이 게시글에서는 1번 항목에 대해 어떻게 구현할 것인지를 고민해보았다. 사용자가 페이지 하단에 도달했음..