# IntersectionObserver
[CSS, 자바스크립트] 스크롤을 내리면 흔들리는 버튼 만들기
지나가다 본 요소를 클론 코딩해보았다💡 스크롤을 내려서 화면에 보이면 흔들리는 버튼을 만들어보자.
웹뷰 최적화 만점을 위한 노력 -2-(IntersectionObserver, Token provider, Prefetch, font, Lcp, Lighthouse)
개선 후 개선 전 > 만점에 가까운 라이트 하우스 점수 쨖쨖 👏 어니언은 앱 서비스이지만, 웹의 장점이 필요한 페이지는 vue를 이용하여 웹으로 구성되어 있다. 그렇기에 앱에서 웹뷰 페이지를 로드할 경우 이질감 없이 로드하여 서비스를 제공하여야 하기 때문에
Intersection Observer API
https://heropy.blog/2019/10/27/intersection-observer/https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC
무한스크롤(2), URL 과 IntersectionObserver API [TOY / Simple-SNS]
현재 "Simple SNS" 프로젝트는 axios 라이브러리를 이용하여 클라이언트에서 서버로 데이터를 요청하여 받고 있다. 하지만 XMLHTTPrequest나 fetch를 사용할 때도 마찬가지로 서버에 요청을 하기 위해서는 우선 서버 URL이 필요하다.
📆 22.11.15 - IntersectionObserver, Modal 구현 시, Background Scroll 막기 및 stopPropagation으로 이벤트 버블링 막기
지금까지 scroll 이벤트로 재는 것을 IntersectionObserver 가 대신 해준다. 주로 스크롤과 관련있는 애니메이션을 넣는데 용이하다.추가로 intersectionRatio를 사용하면 감시하고 있는 요소가 어느정도에 도달했는지 알려준다고 한다. 이 기능을
[React] useIntersectionObserver(+once) custom hook
이 글은 설명글이 아닌 뷰포트 내에 Element의 교차점을 관찰하여 애니메이션 동작 여부를 결정할 때 사용하기 적합한 IntersectionObserver custom hook을 제공하는 글입니다.우리는 IntersectionObserver를 아래와 같은 상황에 자주
React 무한 스크롤 두가지 방법으로 구현
JSONPlaceholder 의 api로 테스트https://jsonplaceholder.typicode.com/posts100개의 데이터가 있고 쿼리스트링으로 접근하면 start = 몇번부터 limit= 몇개 나눠서 데이터를 가져올 수 있다.useRef로 리
Intersection Observer와 useSWRInfinite를 이용해 무한스크롤 구현해보기 (feat. Rsuite Picker)
Picker Menu로 무한 스크롤? 🤨
JavaScript - Intersection Observer API
IntersectionObserver > ## Intersection Observer의 사용법 root : 루트는 말 그대로 API가 교차(intersect)되는 여부를 확인할 때의 기준이 되는 요소로 기본적으로는 뷰포트로 설정되는데 여기서 굉장히 주의할 점이 사용자
화면에 들어왔을 때 애니메이션 동작하기 | react | IntersectionObserver
모 기업의 채용 과제에 사용했던 화면에 들어왔을 때 애니메이션 동작을 실행하도록 하는 기능을 포스팅하겠습니다기본적인 애니메이션 코드입니다새로고침하면 나타난것처럼 동작합니다여러 사이트에서 스크롤을 내려서 화면에 잡혔을 때 슝~ 하고 움직이는 애니메이션을 본적이 있으신가요
[React] infinite scroll을 구현해보자
IntersectionObserver를 이용하여 React에서 Infinite Scroll 구현하기
2022.05.13 TIL
setTimeout은 비동기 함수로 다른 함수 호출을 막지 않는다.setTimeout은 함수이기 때문에 기본적으로 함수 구조를 갖는다.setTimeout(() => {}) 하지만 여기에서 중요한 건 두 번째 인자로 count가 들어가는데, 그 카운트 이후에 함수를 실행
사용자에게 많은 데이터를 보여주는 방법 | 페이지 | 무한 스크롤
프로그래머스 데브코스 강의에서 무한스크롤에 대해서 공부했습니다.이후에 따로 찾아본 내용을 합쳐서 무한 스크롤은 무엇인지, 외에 다른 방법은 없는지, 어떻게 구현하는지를 정리하겠습니다.구글에 어떤 내용을 검색했을 때페이스북에서 어떤 내용을 검색했을 때네이버에서 초콜릿을
[카우치코딩] 5주차 진행 회고
검색 리스트를 받아오고, 무한스크롤을 통해 구현하였다.상세 페이지 레이아웃 및 데이터처리.카카오맵을 사용한 위치 지도를 구현하였다.프록시를 사용하여 실제 DB와의 데이터를 연동하였다.firebase의 oAuth를 수정하였다.
💻 무한 스크롤(Infinite Scroll)
이번 챕터는 무한 스크롤에 대해 다루었습니다. ⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다
[에러 일지] 'IntersectionObserver': rootMargin must be specified in pixels or percent...
IntersectionObserver을 사용해 스크롤 인터렉션을 구현하던 중 에러가 발생했다.IntersectionObserver 인스턴스에 options를 지정하면 발생했고, 지정하지 않으면 정상적으로 작동했다.🚫 Uncaught DOMException: Faile