React 무한 스크롤(Offset-based) 안녕하세요 TriplexLab 입니다. 오늘은 Intersection Observer API를 활용해서 React 무한 스크롤(Offset-based)에 관해서 이야기를 하겠습니다. (다음 내용은 프론트 입장에서 무한 스크롤기능을 구현하는데 초점을 둔 내용입니다.) 코드를 보기 앞서 무한 스크롤에는 크게 2가지 방법이 있습니다. Offset-based, Cursor-based 입니다. 👉🏻 Offset-based 📌 장점 offset, limit 을 사용한 쿼리 이용 (MySQL 기준) 페이지 단위로 구분 직관적이고 구현도 간단합니다. 📌 단점 데이터 중복 문제(사용자가 동시에 컨텐츠를 생성 또는 삭제을 할경우에 중복) 성능 저하 문제 성능 저하 문제는 둘..
React 무한 스크롤(Offset-based)
React 무한 스크롤(Offset-based) 안녕하세요 TriplexLab 입니다. 오늘은 Intersection Observer API를 활용해서 React 무한 스크롤(Offset-based)에 관해서 이야기를 하겠습니다. (다음 내용은 프론트 입장에서 무한 스크롤기능을 구현하는데 초점을 둔 내용입니다.) 코드를 보기 앞서 무한 스크롤에는 크게 2가지 방법이 있습니다. Offset-based, Cursor-based 입니다. 👉🏻 Offset-based 📌 장점 offset, limit 을 사용한 쿼리 이용 (MySQL 기준) 페이지 단위로 구분 직관적이고 구현도 간단합니다. 📌 단점 데이터 중복 문제(사용자가 동시에 컨텐츠를 생성 또는 삭제을 할경우에 중복) 성능 저하 문제 성능 저하 문제는 둘..
2023.12.29