# IntersectionObserver

32개의 포스트
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

💻 TIL 19 | 무한 스크롤(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개의 댓글

[javascript]IntersectionObserver를 활용한 스크롤 lazy loading

프로젝트를 진행하면서 API 콜을 통해 데이터들을 받아오는데 받아온 데이터를 화면에 보여주고 싶다. 그런데 한 번에 모든 데이터를 다 보여주는 것은 성능에 무리가 있다.(10000개를 한 번에? 렉 걸리겠죠) 그래서 있는 개념이 레이지 로딩이다.레이지 로딩(lazy l

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

[리액트] 무한스크롤 - IntersectionObserver

스크롤이벤트를 attachment하여 현재 스크롤위치를 계산해서맨 끝에 스크롤되었을 때 다음 데이터를 fetch하는 방법을 사용한다.스크롤마다 한번의 이벤트가 발생하므로(거의 픽셀단위) 성능이슈를 예방하기 위해 쓰로틀링 적용을 고려해야한다.스크롤방식처럼 1픽셀 1이벤트

2022년 2월 27일
·
0개의 댓글
post-thumbnail

[성능최적화] Intersection Observer을 사용해 스크롤 이벤트 최적화만들기

여러이미지나 다중이미지 또는 영상을 사용할경우, 스크롤에 따라 감지하는 방법은 너무나도 원초적인 방법이라 오히려 최적화된 화면구현에 방해가 될 수 있다.이럴때 사용하는 것이 바로IntersectionObserver라는 기능이다.IntersectionObserver는 뷰

2022년 2월 15일
·
0개의 댓글

Scroll Event vs IntersectionObserver

DOM의 스크롤 이벤트로 ‘현재 스크롤 한 길이’와 ‘전체 페이지 길이’를 비교해서 추가적인 요소를 불러오는 방법타겟 요소를 정해서 그 요소가 화면에 보이게 되면 추가적인 요소를 불러오는 방법Scroll Event는 전체적인 스크롤에 반응한다. 이는 성능적으로 비효율적

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

[JS] IntersectionObserver API 사용과 보완

예전에는 스크롤 이벤트를 구현하기 위해 scroll, Element.getBoundingClientRect() 등의 메서드를 사용해 하나하나 계산해서 값을 얻어야 했다. 그러던 와중에 2016년 구글 개발자 페이지를 통해 IntersectionObserver가 소개됐다

2021년 12월 24일
·
0개의 댓글
post-thumbnail

[React] Infinite Scroll 구현 (IntersectionObserver)

Infinite Scroll 은 말그대로 무한한 스크롤을 의미한다. 스마트폰이 대중화 되면서, 모바일웹이나 앱에서 페이지네이션을 통한 데이터 더 불러오기 방식은 사용자에게 큰 불편함을 불러일으킨다. 인피니티 스크롤은 이러한 관점에서 작은 스크린에서 단순 스크롤로 데이터

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

스크롤 할 때마다 네비게이션 버튼 선택하기

navbar 의 메뉴버튼과 각 섹션들이 연결되어야 한다. 스크롤하면서 화면에 들어오는 섹션에 해당하는 메뉴 버튼이 선택되어야 한다. section별 id 배열 만들기 HTML : section 아래와 같이 각 섹션 별로 id가 지정되어 있다. section id a

2021년 10월 25일
·
0개의 댓글
post-thumbnail

내가 Intersection Observer 사용하는 방법

본 게시물은 제 개인 블로그에서도 확인하실 수 있습니다infinite scroll, lazy loading 등 특정 요소가 보이는지 감지하는 것은 다양한 이유로써 사용된다.이를 위해 단순 scroll을 감지하여 사용할 수도 있지만, 성능적인 문제로 Intersectio

2021년 10월 5일
·
1개의 댓글
post-thumbnail

What is Intersection Observer?

Understanding of Intersection Observer and proper way of use case

2021년 10월 1일
·
1개의 댓글
post-thumbnail

Day.28 무한스크롤UI(2021.09.08)

화면에 표시되는지에 대한 감시자 역할을 하는 객체이다.isIntersecting을 이용해서 화면에 보일경우 컨텐츠를 더 불러오는 식으로 할 경우 스크롤 이벤트보다 퍼포먼스가 향상된다.Throttle의 경우 이벤트가 반복적으로 발생할경우 처음 이벤트를 실행시키는 것이고

2021년 9월 8일
·
0개의 댓글
post-thumbnail

[모던JS: 브라우저] Observers

본 포스팅은 여기에 올라온 게시글을 바탕으로 작성되었습니다.파트와 카테고리 동일한 순서로 모든 내용을 소개하는 것이 아닌, 몰랐거나 새로운 내용 위주로 다시 정리하여 개인공부 목적으로 작성합니다.중간중간 개인 판단 하에 필요하다고 생각될 시, 기존 내용에 추가로 보충되

2021년 6월 24일
·
0개의 댓글

React - IntersectionObserver , github API

이번 시간에는 GitHub에서 제공해주는 API를 어떻게 사용하는지 (사실 다는 모름) 또는 IntersectionObserver를 사용한 인피니트 스크롤링은 어떻게 하는지에 대해 경험적으로다가 정리를 한다. GitHub API >GitHub은 작성한 코드를 저장하고

2021년 6월 14일
·
0개의 댓글
post-thumbnail

Infinite Scroll

Intersection Observer API는 타겟의 부모엘리먼트 혹은 viewport와 타겟엘리먼트의 교차에서의 변화를 비동기적으로 감지하는 방법을 제공한다.root:<element || veiwport> : 타겟의 가장 가까운 스크롤 가능한 상위엘리먼트 혹은

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

react 스크롤시 네비게이션 변환

진행하고 있는 빵덕 프로젝트의 테마상세 페이지에서 스크롤시 네비게이션바의 색이 변환하는 디자인이 나왔다. 스크롤 위치를 어떻게확인할까 고민을 하다가 IntersectionObserver를 사용하기로 하였다.1.eEffect안에 IntersectionObserver로 r

2021년 5월 17일
·
0개의 댓글