# IntersectionObserver

46개의 포스트
post-thumbnail

[CSS, 자바스크립트] 스크롤을 내리면 흔들리는 버튼 만들기

지나가다 본 요소를 클론 코딩해보았다💡 스크롤을 내려서 화면에 보이면 흔들리는 버튼을 만들어보자.

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

웹뷰 최적화 만점을 위한 노력 -2-(IntersectionObserver, Token provider, Prefetch, font, Lcp, Lighthouse)

개선 후 개선 전 > 만점에 가까운 라이트 하우스 점수 쨖쨖 👏 어니언은 앱 서비스이지만, 웹의 장점이 필요한 페이지는 vue를 이용하여 웹으로 구성되어 있다. 그렇기에 앱에서 웹뷰 페이지를 로드할 경우 이질감 없이 로드하여 서비스를 제공하여야 하기 때문에

2022년 12월 9일
·
4개의 댓글
·

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

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

무한스크롤(2), URL 과 IntersectionObserver API [TOY / Simple-SNS]

현재 "Simple SNS" 프로젝트는 axios 라이브러리를 이용하여 클라이언트에서 서버로 데이터를 요청하여 받고 있다. 하지만 XMLHTTPrequest나 fetch를 사용할 때도 마찬가지로 서버에 요청을 하기 위해서는 우선 서버 URL이 필요하다.

2022년 11월 27일
·
0개의 댓글
·

📆 22.11.15 - IntersectionObserver, Modal 구현 시, Background Scroll 막기 및 stopPropagation으로 이벤트 버블링 막기

지금까지 scroll 이벤트로 재는 것을 IntersectionObserver 가 대신 해준다. 주로 스크롤과 관련있는 애니메이션을 넣는데 용이하다.추가로 intersectionRatio를 사용하면 감시하고 있는 요소가 어느정도에 도달했는지 알려준다고 한다. 이 기능을

2022년 11월 14일
·
0개의 댓글
·

[React] useIntersectionObserver(+once) custom hook

이 글은 설명글이 아닌 뷰포트 내에 Element의 교차점을 관찰하여 애니메이션 동작 여부를 결정할 때 사용하기 적합한 IntersectionObserver custom hook을 제공하는 글입니다.우리는 IntersectionObserver를 아래와 같은 상황에 자주

2022년 10월 19일
·
0개의 댓글
·

TOC ( Table Of Contents ) 구현

TOC 구현 방법에 대한 예시와 설명

2022년 10월 8일
·
0개의 댓글
·
post-thumbnail

React 무한 스크롤 두가지 방법으로 구현

JSONPlaceholder 의 api로 테스트https://jsonplaceholder.typicode.com/posts100개의 데이터가 있고 쿼리스트링으로 접근하면 start = 몇번부터 limit= 몇개 나눠서 데이터를 가져올 수 있다.useRef로 리

2022년 9월 21일
·
0개의 댓글
·
post-thumbnail

JavaScript - Intersection Observer API

IntersectionObserver > ## Intersection Observer의 사용법 root : 루트는 말 그대로 API가 교차(intersect)되는 여부를 확인할 때의 기준이 되는 요소로 기본적으로는 뷰포트로 설정되는데 여기서 굉장히 주의할 점이 사용자

2022년 8월 11일
·
0개의 댓글
·
post-thumbnail

화면에 들어왔을 때 애니메이션 동작하기 | react | IntersectionObserver

모 기업의 채용 과제에 사용했던 화면에 들어왔을 때 애니메이션 동작을 실행하도록 하는 기능을 포스팅하겠습니다기본적인 애니메이션 코드입니다새로고침하면 나타난것처럼 동작합니다여러 사이트에서 스크롤을 내려서 화면에 잡혔을 때 슝~ 하고 움직이는 애니메이션을 본적이 있으신가요

2022년 7월 9일
·
0개의 댓글
·
post-thumbnail

📑 목차 스크롤 ( TOC )

목차 스크롤 구현 방법 정리

2022년 6월 28일
·
0개의 댓글
·
post-thumbnail

[React] infinite scroll을 구현해보자

IntersectionObserver를 이용하여 React에서 Infinite Scroll 구현하기

2022년 6월 10일
·
2개의 댓글
·
post-thumbnail

IntersectionObserver로 무한 스크롤 만들기

무한 스크롤 만들기가 이렇게 편리하다고??

2022년 6월 8일
·
0개의 댓글
·
post-thumbnail

2022.05.13 TIL

setTimeout은 비동기 함수로 다른 함수 호출을 막지 않는다.setTimeout은 함수이기 때문에 기본적으로 함수 구조를 갖는다.setTimeout(() => {}) 하지만 여기에서 중요한 건 두 번째 인자로 count가 들어가는데, 그 카운트 이후에 함수를 실행

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

사용자에게 많은 데이터를 보여주는 방법 | 페이지 | 무한 스크롤

프로그래머스 데브코스 강의에서 무한스크롤에 대해서 공부했습니다.이후에 따로 찾아본 내용을 합쳐서 무한 스크롤은 무엇인지, 외에 다른 방법은 없는지, 어떻게 구현하는지를 정리하겠습니다.구글에 어떤 내용을 검색했을 때페이스북에서 어떤 내용을 검색했을 때네이버에서 초콜릿을

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

[카우치코딩] 5주차 진행 회고

검색 리스트를 받아오고, 무한스크롤을 통해 구현하였다.상세 페이지 레이아웃 및 데이터처리.카카오맵을 사용한 위치 지도를 구현하였다.프록시를 사용하여 실제 DB와의 데이터를 연동하였다.firebase의 oAuth를 수정하였다.

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

💻 무한 스크롤(Infinite Scroll)

이번 챕터는 무한 스크롤에 대해 다루었습니다. ⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다

2022년 4월 24일
·
0개의 댓글
·

[에러 일지] 'IntersectionObserver': rootMargin must be specified in pixels or percent...

IntersectionObserver을 사용해 스크롤 인터렉션을 구현하던 중 에러가 발생했다.IntersectionObserver 인스턴스에 options를 지정하면 발생했고, 지정하지 않으면 정상적으로 작동했다.🚫 Uncaught DOMException: Faile

2022년 3월 24일
·
0개의 댓글
·