# 무한스크롤
개념/ IntersectionObserver
스크롤을 하는 방법 IntersectionObserver없이height를 적당히 잡고 scroll event를 받아서 scroll될때마다 heigth조건을 계속검사해주면서 페이지를 내린다 단점 : 계속 검사해야함 , 브라우저마다 오차발생 new IntersectionO
2023년 5월 4주차 기능구현 - 1
배운것에 비해 구현 속도가 많이 더딘 것 같아 취업 준비하는 기간 동안 스킬업과 구현 속도를 증가시키고자 부트캠프를 함께 했던 사람들과 스터디를 만들었습니다. 스터디 진행 방식 스터디 진행 방식은 다음과 같습니다. 주제선정 매주 하나의 프로젝트 주제를 선정합니다.

Intersection Observer API를 통한 무한 스크롤 구현 ( feat. React + typescript )
Intersection Observer API는 타겟 요소와 상위 요소또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 관한하는 방법입니다...

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

React Query를 활용한 무한 스크롤 구현하기
무한 스크롤을 구현하면 웹 사이트 소유자와 사용자 모두에게 여러 가지 이점이 있습니다.웹 사이트 소유자의 경우 무한 스크롤은 원활한 브라우징 경험을 제공하여 사용자 참여 및 유지를 향상시킬 수 있습니다. 전통적인 페이지 매김을 사용하면 사용자는 처음 몇 페이지 이후 페

[React] 무한스크롤 (IntersectionObserver)
응애 개발자 국룰코스 영화 및 책 검색 사이트를 만드는 중 무한 스크롤 기능을 구현해보았다.업로드중..여러가지 방법이 있었지만 intersectionObsercer라는 api를 사용하는 방법을 택했다(사실 handleScroll이벤트와 throttle로직을 이용해 구현

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

[TIL] 객체 / 배열 복사
15-1 객체 / 배열 복사15-2 댓글 수정하기15-3 무한스크롤javascript에서 데이터를 복사할 때, 두 가지 개념이 존재합니다.얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)다.📂 데이터 복사복사본의 값을 변경해서 재할당📂 객체 복사복

Learn Pagination & Infinite Scroll
\-INTRO\-PAGINATION?\-INFINITE-SCROLL?\-Commonalities&Differences Between PAGI&INFIN Pagination과 infinite Scroll은 모두 웹 페이지에서 컨텐츠를 보여주는 방식이다.페이지 처리 방법의

빅데이터 Java 개발자 교육 - 40일차 [jQuery/JS 연동 및 Bootstrap] (실습)
jQuery/JS 연동 입력양식 Focus 앞자리칸의 길이가 6을 초과할 경우 다음 칸으로 포커스가 넘어가게 되고, 반대로 뒷자리칸의 길이가 0이 될 경우 다시 앞자리칸으로 포커스가 넘어오게 된다. 애니메이션 (setInterval) 문서 객체 생성,추가하기 (j

[NestJS] Cursor-Based-Pagination에 다가가기 #1 (feat. 커서 기반 페이징의 특징과 Nest에서 구현해보기)
시작하기에 앞서 지난번에 "Typeorm을 통해 nest에서 페이지네이션을 어떻게 구현하는가"에 관해 글을 작성해보았다. (해당 글 아래 링크 참조) Pagination with offset-based (벨로그 포스팅) 위 글에서 소개한 페이지네이션은 엄밀히 말하

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

[Flutter] 무한 스크롤 만들기(3) - PageView
무한 스크롤 만들기(1) - Vertical무한 스크롤 만들기(2) - Hotizontal

무한스크롤과 intersection observer API
무한스크롤 이미지최근 진행한 프로젝트에 있는 버튼을 이용한 무한 스크롤 기능을 스크롤 이벤트로 되도록 구현해봤다. 버튼을 이용하면 버튼 클릭시 다음 페이지에 해당하는 만큼의 데이터를 서버로부터 받아와서 표시하게 된다. 실제 우리가 사용하는 무한 스크롤기능이지만 버튼을

useInView와 스크롤 이슈
useInView는 Intersection Observer API 에서 제공되는 hook이다.(react-intersection-observer 모듈)인스타그램이나, 쇼핑 앱의 홈화면 등 모바일 화면에서 무한스크롤 적용을 위해 많이 사용하는 듯 하다.무한스크롤의 의미를

Next Js를 활용한 Netflix Clone 프로젝트
신촌 연합 동아리 CEOS의 프론트엔드 스터디 마지막 과제로 next js를 활용한 넷플릭스 클론 코딩 프로젝트를 진행했다. (11월 20일에 마무리했었는데, 이제서야 관련 글을 쓴다,,,)해당 프로젝트에서는 메인 페이지, searchPage만 구현했다.배포링크폴더 구