[250701] TIL

Today I Learned (2025-07-01)

Preload 타이밍

1. 버튼 위에 마우스를 올려 놨을 때
2. 최초 페이지 로드가 되고, 모든 컴포넌트의 마운트가 끝났을 때

function lazyWithPreload(importFunction) {
  const Component = React.lazy(importFunction);
  Component.preload = importFunction; // 객체에 속성 추가 문법
  return Component;
}

이미지 프리로딩

Image 객체 사용하기 useEffect나 마우스가 버튼 위에 올릴때 등

const img = new Image();
img.src = "~~";

참고로 이미지 객체는 모듈과 다르게 필요할때마다 그때 그때 요청을 보냄
때문에 미리 로드하는 의미가 없어질 수 있으니 미리 불러오고 잘 캐시하는지 확인해야함

이미지 레이지 로딩

1. 스크롤 이벤트를 통해서 이미지가 왔는지 판단을 해서 로드하고 보이지 않는다면 띄우지 않는 방법
   • 단점, 스크롤마다 많은 이벤트 발생
   • Intersection Observer 을 통해 이벤트 호출
   • 브라우저 자체에서 지원해주기 때문에 이벤트를 매번 호출하는 것보다 성능이 좋음

useEffect(() => {
const options = {};
const callback = (entries, observer) => {
	entries.forEach(entry => {
		if(entry.isInteresting){
			console.log('is intersecting);
			entry.target.src = entry.target.dataset.src;
		}
	})
}
const observer = new IntersectionObserver(callback, options);
observer.observe(imgRef.current);
},[])

동영상 최적화

동영상을 더 작은 사이즈로 압축하는 작업 동영상이 메인 컨텐츠가 아닌 경우, 사이즈를 줄이고 메인 컨텐츠면 좋은 화질 추천

동영상은 WEBM 이 효율이 좋다고 함 사진과 마찬가지로 지원하지 않는 브라우저가 있을 수도 있음

그럼 아래와 같이 video 태그를 사용하면 됨

<video controls width="250">
  <source src="/shared-assets/videos/flower.webm" type="video/webm" />

  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />

  Download the
  <a href="/shared-assets/videos/flower.webm">WEBM</a>
  or
  <a href="/shared-assets/videos/flower.mp4">MP4</a>
  video.
</video>

동영상을 줄이는 방법은 사용자에게 불편함을 줄 수도 있음 동영상 길이를 짧게 해서 반복적으로 하거나 동영상 위에 패턴을 덮어씌우는 방법이 있음 , 블러를 처리하거나 동영상의 중요도에 따라서 선택 할 수 있다.