# intersection observer

42개의 포스트
post-thumbnail

[Next.js] React Query, Prisma와 함께하는 무한 스크롤 (Infinite Scroll)

`react query`의 `useInfiniteQuery`와 `prisma`의 `Cursor-based pagination`을 사용하여 무한 스크롤에 필요한 모든 것을 구현해 보겠습니다! 이번 구현에 사용한 데이터는 아래 첨부한 이미지와 같으며, 전체 코드는 http

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

Intersection Observer로 문서 뷰어의 Page Navigation 기능 구현하기

회사 서비스에서 환자의 재활 운동 리포트를 문서 뷰어처럼 볼 수 있는 컴포넌트를 개발하게 되었다. 전체 페이지와 현재 페이지 번호를 보여주고, 전후 페이지로 이동할 수 있는 버튼이 있는 형태였다.

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

[React] custom hooks 를 이용하여 scroll event 만들기

React Custom Hooks로 scroll animation 구현하기

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

[React] Intersection Observer API 활용해서 무한스크롤 기능 구현하기

무한스크롤을 구현하는 방법으로는 scroll이벤트인 onScroll을 사용하는 방법이 있고, Intersection Observer API를 활용하는 방법이 있다.하지만 onScroll을 사용하면 scroll이 일어날때마다 이벤트가 실행돼서 성능 저하의 문제가 생기기

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

[React] 무한 스크롤 적용하기

Next, TS 프로젝트에 무한 스크롤을 적용한 이야기

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

Intersection Observer API

Intersection Observer APi 사용 방법 및 예시

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

intersection observer란? (feat: 무한 스크롤 만들기)

무한 스크롤을 구현하거나 특정 요소를 관찰하고 싶을 때는 Intersection observer API를 사용하자!

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

Intersection Observer API

사용방법, Callback, Options, Methods, Entries, IE지원(polyfill)

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

[UX Engineering] Intersection Observer API

scroll 이벤트를 만들다가 발견한 것

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

Intersection Observer를 알아보자

Intersection Observer란? 한국말로 직역하면 교차지점 관찰자이다.

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

옵저버 패턴

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

2022년 6월 26일
·
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개의 댓글
·

Intersection Observer API

Intersection Observer API는 타켓 요소와 상위 요소 또는 최상위 document의 viewport(현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역)

2022년 4월 21일
·
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개의 댓글
·