# intersection observer

31개의 포스트
post-thumbnail

옵저버 패턴

데이터 종속적인 인터페이스가 데이터의 변화를 감시하는 구조

7일 전
·
0개의 댓글
post-thumbnail

Intersection Observer API 를 이용한 impression 개선

회사 sdk를 통해 오퍼월에 유입되는 End-user에게 어떤 offer(단순하게 쇼핑몰 상품이라고 생각하면 된다)가 노출되어지고 있는지를 파악하기 위해 기존에는 간단히 아래와 같이 다루고 있었다.즉 request가 1번 이루어질 때마다 response로 내려준 오퍼들

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

Intersection Observer API

라이브러리를 사용하지 않고 무한 스크롤 등 특정 viewport에서의 이벤트나 함수 실행에 유용한 Intersection Observer API를 알아보자.

2022년 6월 20일
·
0개의 댓글

POB_TIL 0513 : Intersection observer

목표: 무한스크롤. 사용: Intersection observer.

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

[ TIL ] 2022-05-12

React router 에서 path='favorite' 으로 명시하더라도, useLocation 으로 불러올 땐 '/favorite' 이라 적어줘야 한다 useSuspense 아주 간단하게 로딩창 구현! 공식 문서 Javascript 👍 Intersection

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

이미지 최적화, Lazy Load & Intersection Observer API

HTTP 아카이브 연구에 따르면 평균 웹사이트의 반 이상이 이미지로 이루어져 있으며, 이미지의 용량도 다른 콘텐츠에 비해 월등히 높다. 따라서 이미지의 사이즈를 적절히 줄이고, 렌더링 속도를 빠르게 하면, 웹 사이트의 렌더링 성능은 더욱더 빨라질 것이다.하지만 무작정

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

🔎Intersection Observer란?

🙋‍♂️무한 스크롤 관련해서 찾아보다가 intersection observer라는 것을 알게 되었습니다..!

2022년 3월 20일
·
0개의 댓글
post-thumbnail

(React) 무한 스크롤 기능 구현하기 : used by Intersection Observer - 2

Intersection Observer에 대한 몇 가지 개념에 대해서 이해를 하고 코드에 적용해보자.

2022년 3월 7일
·
4개의 댓글
post-thumbnail

Intersection Observer API로 lazy loading의 무한 스크롤 구현하기!

infinite scroll에서 scroll이 특정 포지션을 지나갈 때, 아이템을 추가로 로드하기 위해 필요한 Intersection Observer API.

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

[React] Intersection Observer를 사용한 무한 스크롤 구현

항상 이론으로만 보다가, 한번쯤 직접 구현해보고 싶어서 제일 쉬운 예제를 따라해보았다. (간단하게 기능만 구현하기위해 any type을 남발하였음...) > API 출처: https://unsplash.com/ 1. 상태 정의 photo: 불러온 데이터를 저장 p

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

[velog 클론 코딩 개발기 - 3 ] Intersection Observer로 무한 스크롤 기능 구현

Server 에 Parameter 전송하기 client 에서 요청 횟수 (lodePostCount) 라는 변수를 url 경로에 담아 Node.js 기반 Server에서 데이터 15개씩 가져오기 req.params API를 이용해 loadPostCount 라는 파라

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

React.js에서 무한스크롤 구현할때의 최적의 방법은 무엇일까

무한스크롤 어떤 방식이 가장 효율적일까? - intersection observer api,... 👀

2021년 11월 23일
·
2개의 댓글

리액트로 스크롤 애니메이션 구현하기

우리가 javascript로 스크롤 애니메이션을 구현할 경우 getBoundingClientRect() 메서드를 많이 사용하게된다.getBoundingClientRect() 메서드는 실제 element의 offset을 측정해주는데 이 메서드를 사용할 경우 메인스레드에서

2021년 11월 19일
·
0개의 댓글
post-thumbnail

실무에서 느낀 점을 곁들인 Intersection Observer API 정리

실무에서 Intersection Observer API를 사용해보고 느낀 생각정리

2021년 9월 30일
·
7개의 댓글

[TIL] Day-27

무한 스크롤 UI구현하기 1.scrollEvent window의 scroll이벤트를 통해 스크롤링이 일어날 때마다 화면 전체의 높이와 스크롤 위치를 통해 스크롤이 컨텐츠 끝 즘에 다다랐는지 체크해서 처리하는 방식 App컴포넌트 fetchPhotos()의 내부 과정

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

[TIL🔥] Day23(9/8)

오늘은 무한 스크롤 UI를 구현하는 방법에 대해 배웠다. 어려울 것 같다고 생각했는데 바닐라 JS를 반복해서 쓰니 훨씬 빠르고 쉽게 이해할 수 있었다...이게 다 3주간의 고생이 있었기 때문에 가능하다고 생각한다. 프로그래머스 KDT 최고 ><scroll even

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

교찰관찰자와 lazy loading

리액트로 웹앱 만드는중3가지 조건을 선택하면, 그 조건에 해당하는 이미지들이 화면에 나와야하는데어떤 조건의 조합의 경우, 이미지가 없는 경우도 있고이미지로딩 시간이 이미지마다 제각각이라서 화면이 좀...안예쁘다Intersection ObserverLazy-Loading

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

Interactive한 페이지를 나도 한번 만들어보자!

interactive한 페이지를 만들기 위해 스크롤에 연동되는 3가지 방법에 대해 구현을 해보고 어떤 방법이 가장 괜찮은지를 다룹니다.

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

Intersection Observer 란?

기존에 clientHeight, scrollTop, scrollHeight를 활용하여 무한 스크롤을 구현해봤었기 때문에 이번에는 Intersection Observer라는 것을 활용하여 접근해보려고 한다.무려 debounce나 throttle를 사용하지 않고도 브라우저

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

Intersection Observer (뷰포트 노출 감지) | APIs

Intersection Observer란 뷰포트의 영역과 타겟 요소 영역의 중첩을 감지(Detect)하는 웹 API 기술이다.쉽게 말해 사용자의 화면에 특정 요소가 보이는지의 여부와, 영역이 겹친 정도 등을 알려주는 비동기적 센서라고 할 수 있다.Intersectio

2021년 8월 7일
·
0개의 댓글