# infinite scroll

72개의 포스트
post-thumbnail

Intersection Observer를 이용하여 무한 스크롤 구현하기

Intersection Observer 로 무한 스크롤 구현하기

2023년 11월 29일
·
0개의 댓글
·
post-thumbnail

새로고침시 ref참조 값 null이 되는 에러현상

react-query로 infinite scroll을 구현하는 도중 새로고침 시 useEffect동작과 관련하여 ref 참조 element가 null이 되는 에러현상

2023년 11월 25일
·
0개의 댓글
·
post-thumbnail

[React] 무한 스크롤 (Infinite scroll)

사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험 (UX) 방식입니다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼 수 있습니다

2023년 11월 12일
·
0개의 댓글
·

infinite Scroll 구현하기

무한스크롤을 구현 하고 로딩중 스피너를 띄어보자

2023년 10월 18일
·
0개의 댓글
·
post-thumbnail

AJAX용 무한 스크롤 모듈 구현하기

트위터의 무한 스크롤 기능, 모듈 형식으로 구현하기

2023년 10월 11일
·
0개의 댓글
·
post-thumbnail

[Infinite Scroll] Slice와 Page 차이점 분석하여 무한 스크롤 적용하기

이전에 검색 기능을 QueryDSL로 변경하면서, 검색 기능이 무한 스크롤을 적용하고 있어서 반환값을 Slice로 반환해줘야 했습니다. 하지만 Slice와 Page를 혼동하여 코드를 작성하여서 이에 대한 차이점을 분석하여 무한 스크롤을 구현하려고 합니다.

2023년 9월 29일
·
0개의 댓글
·
post-thumbnail

useInfiniteQuery 로 무한스크롤 구현하기-(1)

관리자 페이지에서 정보 수정요청과 새 장소 신청 요청 각각 무한스크롤로 정보를 받아와야 했다. react-query로 비동기 관리를 했기 때문에 useInfiniteQuery를 이용하기로 했다. 무한스크롤 필요한 용어 IntersectionObserver로 바닥

2023년 9월 25일
·
0개의 댓글
·
post-thumbnail

[React Native] Infinite Scroll with FlatList

많은 데이터 리스트를 렌더링 시켜야 할때 Pagination을 해야할지 Infinite Scroll을 할지 고민에 빠지곤 한다. UX적인 측면도 고려하면서 화면UI 구성도 고려해야하기 때문인데 React Native를 사용하는 앱 개발자라면 사용성, 화면구성에 용이한

2023년 9월 19일
·
0개의 댓글
·

[React] 무한스크롤 구현하기

Intersection Observer API를 이용한 무한스크롤

2023년 9월 13일
·
0개의 댓글
·
post-thumbnail

[모여라레이서] 프로젝트를 진행하면서 했던 고민들과 트러블 슈팅

초기에 게시글 이미지 등록 기능을 구현할 때 이미지 파일 데이터를 저장하는 상태와 이미지 미리보기를 위한 상태 2가지를 사용하여 상태를 따로 관리하였다. (이후 데이터 관리 형식을 바꾸어서 현재는 하나의 상태만을 이용한 코드로 구현되어 있다) 이미지 등록 api 요청

2023년 7월 13일
·
0개의 댓글
·
post-thumbnail

무한 스크롤 구현하기

컨텐츠를 페이징 하는 기법 중 하나로,아래로 스크롤 하다가 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식이다.Facebook, Twitter, Instagram 등 SNS에서 주로 사용된다.구현 방식은 크게 두 가지가 있다.Window의 scrol

2023년 7월 10일
·
0개의 댓글
·
post-thumbnail

Firebase 무한스크롤을 직접 구현해보자..

우선 스크롤로 바닥을 찍었을 때를 알기 위해 라이브러리를 설치해서 import했다.import후 다음과 같이 callback을 전달해주면 된다.callback의 내용으로는, 최초의 불러온 데이터 이후의 데이터를 불러오는 로직을 짜주었다..

2023년 4월 24일
·
0개의 댓글
·
post-thumbnail

Pagination vs Infinite Scroll

✅ Pagination Pagination : 검색 결과를 가져올 때 데이터를 쪼개 번호를 매겨 일부만 가져오는 기법 사용자가 게시판, 상품 목록 등을 요청할 때 결과 값을 전부 가져오면 느려지며 사용자는 불편을 느끼게 된다. 그래서 데이터를 조금씩 나눠서 가져오

2023년 4월 4일
·
0개의 댓글
·
post-thumbnail

[TIL 0331] 무한스크롤

▼ 링크 react infinite scroller react infinite scroll component ✅ 무한스크롤 방식 마직막으로 받아올 댓글이 없다면 리패치할것이 없다면 기존거ㅅ만 리턴해달라 typescript

2023년 4월 2일
·
0개의 댓글
·
post-thumbnail

Pagination / Infinite Scroll

페이지네이션은 사용자가 과도한 스크롤 발생으로 인해 생기는 불편함을 방지하기 위해 콘텐츠를 여러 페이지로 나누어 이전 페이지와 다음 페이지 또는 특정 페이지로 이동할 수 있는 요소이다.가장 흔히 쓰이는 곳은 게시판같은 테이블 형태의 페이지등이 있다.한 페이지에 보여주고

2023년 2월 4일
·
0개의 댓글
·
post-thumbnail

Pagination or Infinite scroll

이 두가지에 대해 알아보자.우선 페이지네이션이란 우리가 게시글 목록에서 흔히 볼 수 있는 UI이다.위처럼 구글에서도 보이듯이 거의 모든 사이트에서 확인할 수 있다고 해도 과언이 아니다.이는 게시글 등의 목록을 띄울 때 몇 개를 띄울지 정하고 그 이상의 게시글(?)이 있

2023년 1월 30일
·
0개의 댓글
·
post-thumbnail

[Next.js] react-query 이용한 무한스크롤 구현

유저가 데이터의 바닥에 닿으면 방해없이 스크롤을 계속하게 하기 위해 새로운 데이터를 fetch 할 것데이터를 한번에 불러오는 방법보다 효율적인 방법. react-query의 useInfiniteQuery를 사용한다.

2023년 1월 19일
·
0개의 댓글
·
post-thumbnail

📆 23.01.15 - Mixed Content

netlify CI / CD 자동화 과정에서 오류 127번이라는 친구를 만나서 어려움을 겪던 찰나에 npm run build 하여 만든 빌드 폴더를 직접 배포하여 서비스를 배포하는데 성공을 하였다.그러나 axios 요청을 하는데 response 값이 호출이 잘되지 않는

2023년 1월 15일
·
0개의 댓글
·

FlatList와 React Query로 Infinite Scroll 구현하기

FlatList는 ScrollView와는 다르게 몇 가지 특수한 기능들을 제공하는데, 그 중 하나가 인피니트 스크롤의 손쉬운 구현이다. 이 글에서는 React Query와 연동하여 빠르게 인피니트 스크롤이 가능한 뷰를 만드는 방법을 소개하고자 한다.onEndReache

2023년 1월 2일
·
0개의 댓글
·
post-thumbnail

Pagination vs Infinite Scroll

1.일반적인 방식 (Pagination)2.무한스크롤 방식 (Infinite Scroll)페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법입니다.게시판 형태의 페이지에서 가장 일반적으로 사용되는 방식입니다.a. page 인자를 사용해서 게시글 목록 불러오기b.

2022년 12월 22일
·
0개의 댓글
·