[TECH-QA] 이미지 Preloading, 아마지 caching

화면에 모든 리소스들이 마운트 되었을때 자바스크립트의 new Image()를 사용하여 이미지를 미리 로드하여 캐싱하여 준다.

useEffect(()=> {
  const img = new Image();
  img.src = '이미지주소';
},[])

처음 이미지를 한번 new Image()로 로딩하고 이미지의 cache-control 상태에 따라 다음번 이미지를 불러올때는 이미지가 캐싱되어 로딩하는 깜빡임 없이 바로 화면에 뜨는 것을 확인 할 수 있다.

출처 https://www.inflearn.com/course/lecture?courseSlug=%EC%9B%B9-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-%EB%A6%AC%EC%95%A1%ED%8A%B8-1&unitId=48067&tab=curriculum