# intersection observer
Intersection Observer (Refactoring)
리팩토링 하는 과정에서 scroll event에 관련된 아주 유용한 api가 있다고 하여 찾아보고 적용해 보았습니다.브라우저의 뷰포트(상위 요소)와 설정한 요소(대상요소)의 교차점을 비동기적으로 관찰하여 요소가 뷰포트에 포함되는지 안되는지 구별하는 기능을 제공합니다.e
Intersection Observer API로 무한 스크롤 만들기
프로젝트를 하던 도중 생각지 못한 기능을 마주하게 되었으니 그것은 바로 무한스크롤이었습니다. 카드형식의 리스트를 나열해야 하는데 아무래도 무한 스크롤 형태가 예쁘고 보기도 좋으니까요. 결국 해당 기능을 구현해야 한다는 뜻이죠... 인터넷을 뒤져보니 Interse
[Typescript]Intersection Observer를 사용하여 스크롤 애니메이션 구현하기
Money Mindset이라는 웹 서비스를 구현한 뒤, Main 페이지를 꾸미기 위해 요즘 유행하는 스크롤 애니메이션을 구현하고자 한다. Intersection Observer API를 사용한다.
Intersection Observer API
포트폴리오 웹 사이트를 만들던 도중 타겟 요소가 뷰포트 내에 들어왔는지를 알기 위해서는 Intersection Observer API를 이용해야 한다는 것을 알았습니다. Intersection Observer API는 다른 블로그 및 사이트에서 아주 자세하게 설명되어
[React] Intersection Observer API를 사용하여 무한 스크롤 기능 구현하기
원티드 프리온보딩 과제를 진행하던 중 무한 스크롤 기능을 구현해야 했다. 평소에는 React-Query의 useInfiniteQuery를 이용해 무한 스크롤을 구현하였으나, 이번 과제를 진행하는 동안에는 해당 라이브러리를 사용할 수 없어서 직접 만들 수 밖에 없었다
Intersection Observer API
scroll 이벤트는 성능에 악영향을 줄 수 있다. 스크롤시 짧은 시간 내에 수 백, 수천의 이벤트가 동기적으로 실행될 수 있기 때문에, 그리고 페이지 내에 각 요소가 각기의 목적(광고, 레이지 로딩, 무한 스크롤 등)의 이유로 scroll 이벤트를 리스닝하기 때문에
무한 스크롤 구현하기
컨텐츠를 페이징 하는 기법 중 하나로,아래로 스크롤 하다가 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식이다.Facebook, Twitter, Instagram 등 SNS에서 주로 사용된다.구현 방식은 크게 두 가지가 있다.Window의 scrol
Intersection Observer를 활용한 모달 애니메이션 구현하기
결제하기 페이지를 만드는 중, 결제 버튼이 브라우저 최하단에 갔을 때 div가 보이는 형태로 구현하고 싶었다.이전 무한스크롤을 구현할 때 사용했던 Intersection Observer가 그 기능을 충실히 해줄거라고 생각했고, 시도했다.인터섹션 옵저버이 gif 처럼,
Intersection Observer API에서 무한 스크롤에 필요한 부분만 이해하기
⚠️ Disclamer ⚠️해당 요소는 제가 Intersection Observer API를 학습하며, 이해한 내용을 바탕으로 작성한 글입니다. 따라서 잘못된 이해로 인해 실제와 차이가 있을 수 있습니다.잘못된 내용이 있다면 댓글로 알려주시면 감사하겠습니다. 🙏Int
[WEB] Intersection Observer API
특정 요소가 Viewport 안에 들어오는 순간이나, 나가는 순간을 감시예를 들면어떤 요소의 위치가 화면(Viweport)에 들어오면 image 로딩,마지막 요소 또는 뒤쪽의 요소가 화면에 들어오면 데이터 패칭해서 보여주기,어떤 요소의 위치가 화면에 들어오면, 애니메이
[Next.js] React Query, Prisma와 함께하는 무한 스크롤 (Infinite Scroll)
`react query`의 `useInfiniteQuery`와 `prisma`의 `Cursor-based pagination`을 사용하여 무한 스크롤에 필요한 모든 것을 구현해 보겠습니다! 이번 구현에 사용한 데이터는 아래 첨부한 이미지와 같으며, 전체 코드는 http
Intersection Observer로 문서 뷰어의 Page Navigation 기능 구현하기
회사 서비스에서 환자의 재활 운동 리포트를 문서 뷰어처럼 볼 수 있는 컴포넌트를 개발하게 되었다. 전체 페이지와 현재 페이지 번호를 보여주고, 전후 페이지로 이동할 수 있는 버튼이 있는 형태였다.
[React] custom hooks 를 이용하여 scroll event 만들기
React Custom Hooks로 scroll animation 구현하기
