혜원의 개발노트

Intersection Observer를 사용해서 무한 스크롤 예시를 만들어보자! Using 1. CRA with typescript 2. react-query 3. randomstring 간단하게 만들어보겠다. 먼저 react-query 사용환경 설정해주기 최상단 컴포넌트에서 QueryClientProvider로 감싸줘야한다. 나는 App.tsx에서 적용해줌 import { QueryClient, QueryClientProvider } from "react-query"; import List from "./List"; const client = new QueryClient(); function App() { return ( ); } export default App; 그리고 데이터를 생성해줄 함수를 간..

회사 프로젝트를 진행하면서 무한스크롤 구현할때 Intersection oberver를 사용해서 구현했다. 그런데 무한스크롤을 구현하는 예시를 보고 참고한거라, 정확한 동작방식에 대한 이해없이 무작정 사용했었기때문에 한번 정리를 해보고자 한다. Intersection Observer 란? 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법이다. Intersection Observer는 그들이 감시하고자하는 요소(target)가 다른요소(root)에 들어가거나 나갈때 또는 요청한 부분만큼 두 요소의 교차부분이 변경될때마다 실행될 콜백함수를 등록할 수 있게 한다. 정확히 몇 픽셀이 겹쳐졌는지는 감지할 수 없고, 몇퍼센트정도..