이미지나 영상을 처음에 모두 띄울 필요는 없습니다. 첫 로딩을 빠르게 하고, 그 이후에 뷰포트가 이미지가 필요한 곳으로 들어왔을 때 그 때 로딩하는 방법도 성능 향상에 좋은 요소가 됩니다. 스크롤 이벤트에 LazyLoading을 할당할 경우, 수많은 콜을 부를 것입니다. 따라서 Intersection Observer를 이용해서 특정 뷰포트에 들어올 때만 Lazy Loading을 트리거하게끔 합니다. import React, { useEffect, useRef } from "react"; function Card(props) { const imgRef = useRef(null); useEffect(() => { const options = {}; const callback = (entries, observ..
