intersection observer

문제 원인렌더링 데이터의 마지막 인덱스 위치에 IO(Intersection Observer) 관찰 요소를 표시하는 방식은 무한 렌더링 문제가 발생할 수 있다. 데이터가 1~2개 밖에 없어서 관찰 요소가 항상 화면에 들어온다면 ➊fetchNextPage 실행(React Query 훅이 반환하는 함수) → ➋기존 데이터 반환 → ➌렌더 → ➍IO 화면에 들어옴 → ➊fetchNextPage 실행 → 반복… 위 과정을 계속 반복하면서 무한 렌더링하는 문제가 발생한다. Query Key가 바뀌지 않아서 데이터 fetch 없이 캐싱한 데이터를 사용하지만 무한 렌더링 때문에 어플리케이션이 정상적으로 작동하지 않는다. 데이터가 아예 없다면 IO 관찰 대상 요소도 렌더링 하지 않으므로 문제가 없는것처럼 보이기 때문에 ..

웹페이지에서 성능에 영향을 가장 많이 주는 부분이 이미지 / 비디오 같은 미디어 요소다. 특히 이미지는 배너, 제품 사진, 로고 등 페이지 구석구석에서 사용한다. HTTP Archive Data에 따르면 전체 웹페이지 용량의 45%를 이미지가 차지한다고 한다. 이미지를 사용하지 않는건 불가능하지만, 화면에 노출될 때만 이미지를 불러오는 방식으로 페이지 로딩 시간을 단축시킬 수 있다. 이런 방식을 Lazy Loading이라고 한다. Lazy Loading 구현 방법💡 Lazy Loading이 적용된 이미지가 뷰포트에 근접해서 이미지를 로드하면 콘텐츠가 밀려나는 현상이 발생한다. 이를 방지하려면 이미지를 감싸는 컨테이너 요소에 높이 / 너비를 지정하면 된다. Lazy Loading은 크게 Chrome Na..

1) 스크롤 이벤트를 사용한 방법무한 스크롤은 현재 페이지에서 스크롤바가 마지막 콘텐츠 지점에 있을 때 다음 콘텐츠를 자동으로 불러오는 구현 방식을 말한다. ➊스크롤해서 가려진 영역의 높이와 ➋현재 화면(뷰포트)의 높이를 더한 값이 ➌전체 문서의 높이와 같다면 현재 스크롤이 가장 하단 끝에 도달했다는 걸 알 수 있다. 알아야 할 기하 프로퍼티 ❶ 스크롤해서 가려진 콘텐츠 영역의 높이 : document.documentElement.scrollTop ❷ 현재 화면(뷰포트)의 높이window.innerHeight : 스크롤바 포함document.documentElement.clientHeight : 스크롤바 제외 ❸ 전체 문서의 높이// 문서의 정확한 전체 높이를 구하기 위한 코드const scrollHei..