# intersection observer
Intersection Observer API 를 이용한 impression 개선
회사 sdk를 통해 오퍼월에 유입되는 End-user에게 어떤 offer(단순하게 쇼핑몰 상품이라고 생각하면 된다)가 노출되어지고 있는지를 파악하기 위해 기존에는 간단히 아래와 같이 다루고 있었다.즉 request가 1번 이루어질 때마다 response로 내려준 오퍼들
Intersection Observer API
라이브러리를 사용하지 않고 무한 스크롤 등 특정 viewport에서의 이벤트나 함수 실행에 유용한 Intersection Observer API를 알아보자.
[ TIL ] 2022-05-12
React router 에서 path='favorite' 으로 명시하더라도, useLocation 으로 불러올 땐 '/favorite' 이라 적어줘야 한다 useSuspense 아주 간단하게 로딩창 구현! 공식 문서 Javascript 👍 Intersection
이미지 최적화, Lazy Load & Intersection Observer API
HTTP 아카이브 연구에 따르면 평균 웹사이트의 반 이상이 이미지로 이루어져 있으며, 이미지의 용량도 다른 콘텐츠에 비해 월등히 높다. 따라서 이미지의 사이즈를 적절히 줄이고, 렌더링 속도를 빠르게 하면, 웹 사이트의 렌더링 성능은 더욱더 빨라질 것이다.하지만 무작정
🔎Intersection Observer란?
🙋♂️무한 스크롤 관련해서 찾아보다가 intersection observer라는 것을 알게 되었습니다..!
(React) 무한 스크롤 기능 구현하기 : used by Intersection Observer - 2
Intersection Observer에 대한 몇 가지 개념에 대해서 이해를 하고 코드에 적용해보자.
Intersection Observer API로 lazy loading의 무한 스크롤 구현하기!
infinite scroll에서 scroll이 특정 포지션을 지나갈 때, 아이템을 추가로 로드하기 위해 필요한 Intersection Observer API.
[React] Intersection Observer를 사용한 무한 스크롤 구현
항상 이론으로만 보다가, 한번쯤 직접 구현해보고 싶어서 제일 쉬운 예제를 따라해보았다. (간단하게 기능만 구현하기위해 any type을 남발하였음...) > API 출처: https://unsplash.com/ 1. 상태 정의 photo: 불러온 데이터를 저장 p
[velog 클론 코딩 개발기 - 3 ] Intersection Observer로 무한 스크롤 기능 구현
Server 에 Parameter 전송하기 client 에서 요청 횟수 (lodePostCount) 라는 변수를 url 경로에 담아 Node.js 기반 Server에서 데이터 15개씩 가져오기 req.params API를 이용해 loadPostCount 라는 파라
React.js에서 무한스크롤 구현할때의 최적의 방법은 무엇일까
무한스크롤 어떤 방식이 가장 효율적일까? - intersection observer api,... 👀
리액트로 스크롤 애니메이션 구현하기
우리가 javascript로 스크롤 애니메이션을 구현할 경우 getBoundingClientRect() 메서드를 많이 사용하게된다.getBoundingClientRect() 메서드는 실제 element의 offset을 측정해주는데 이 메서드를 사용할 경우 메인스레드에서
실무에서 느낀 점을 곁들인 Intersection Observer API 정리
실무에서 Intersection Observer API를 사용해보고 느낀 생각정리
[TIL] Day-27
무한 스크롤 UI구현하기 1.scrollEvent window의 scroll이벤트를 통해 스크롤링이 일어날 때마다 화면 전체의 높이와 스크롤 위치를 통해 스크롤이 컨텐츠 끝 즘에 다다랐는지 체크해서 처리하는 방식 App컴포넌트 fetchPhotos()의 내부 과정
[TIL🔥] Day23(9/8)
오늘은 무한 스크롤 UI를 구현하는 방법에 대해 배웠다. 어려울 것 같다고 생각했는데 바닐라 JS를 반복해서 쓰니 훨씬 빠르고 쉽게 이해할 수 있었다...이게 다 3주간의 고생이 있었기 때문에 가능하다고 생각한다. 프로그래머스 KDT 최고 ><scroll even
교찰관찰자와 lazy loading
리액트로 웹앱 만드는중3가지 조건을 선택하면, 그 조건에 해당하는 이미지들이 화면에 나와야하는데어떤 조건의 조합의 경우, 이미지가 없는 경우도 있고이미지로딩 시간이 이미지마다 제각각이라서 화면이 좀...안예쁘다Intersection ObserverLazy-Loading
Interactive한 페이지를 나도 한번 만들어보자!
interactive한 페이지를 만들기 위해 스크롤에 연동되는 3가지 방법에 대해 구현을 해보고 어떤 방법이 가장 괜찮은지를 다룹니다.
Intersection Observer 란?
기존에 clientHeight, scrollTop, scrollHeight를 활용하여 무한 스크롤을 구현해봤었기 때문에 이번에는 Intersection Observer라는 것을 활용하여 접근해보려고 한다.무려 debounce나 throttle를 사용하지 않고도 브라우저
Intersection Observer (뷰포트 노출 감지) | APIs
Intersection Observer란 뷰포트의 영역과 타겟 요소 영역의 중첩을 감지(Detect)하는 웹 API 기술이다.쉽게 말해 사용자의 화면에 특정 요소가 보이는지의 여부와, 영역이 겹친 정도 등을 알려주는 비동기적 센서라고 할 수 있다.Intersectio