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

Pagination.js 커스터마이징 안녕하세요. TriplexLab입니다. 즐거운 주말 보내고 있으신가요?ㅎ 오늘은 jQuery 플러그인중에 Pagination.js 커스텀 마이징을 간단하게 해보왔습니다. 모두 개시판 만들 때 기본적으로 pagination을 많이 쓰실 겁니다. 이것을 응용해서 more(더 보기) 기능으로 튜닝해 봤습니다. @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1;} } @-moz-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity:..