🖋️ 이미지 캐싱하는 방법

📢 이미지 캐싱은 성능을 크게 향상 가능

• 브라우저 캐싱

  • 이미지가 로드되면 브라우저는 이러한 이미지를 로컬로 캐시 가능
    
    
  • Cache-Control 헤더 사용
    • 서버에서 이미지를 제공할 때 적절한 HTTP 헤더 설정
    • 브라우저에 이미지를 캐시해야 하는 기간 지시
    • 정적 이미지의 경우 max-age 를 길게 설정 가능
      
      
  • ETag
    • 캐시된 리소스의 유효성 검사하는데 사용 가능
    • 브라우저에서 콘텐츠가 변경되었는지 확인하고 필요한 경우만 이미지 다운 가능

• 고급 캐싱을 위한 서비스 워커

  • 사이트의 하나 혹은 그 이상의 페이지를 제어하는 스크립트
    
    
  • 네트워크 요청을 가로채고 캐시된 콘텐츠를 제공 가능
  • 오프라인 우선 응용 프로그램을 만드는데 특히 강력
    
    
  • 이미지 캐싱
    • 서비스 워커를 사용하여 이미지 처음 다운로드 후 캐시
    • 후속 이미지 요청은 네트워크를 우회하여 캐시 처리 가능
      
      
  • 캐시 전략
    • 애플리케이션의 요구 사항에 따라 캐시 우선
    • 네트워크 우선 또는 재검증 중 부실과 같은 전략 구현

• CDN 사용 (콘텐츠 전송 네트워크)

  • 지리적으로 사용자에게 더 가까운 이미지를 캐시 하여 로드시간 감소
    
    
  • 엣지 캐싱
    • 이미지 사본을 전 세계 여러 위치(엣지 서버)에 저장
    • 기본 서버의 전송 속도를 빨라지고 부하 줄임
      
      
  • 자동 최적화
    • 즉석 이미지 최적화, 크기 조정 및 형식 변환 제공

• 이미지 최적화

  • 이미지를 제공하기 전 이미지를 최적화하면 품질 손실 없이 이미지 크기 감소 가능
    
    
  • 압축
    • 도구를 사용하여 이미지 압축
    • WebP 와 같은 형식은 더 작은 크기로 고품질 이미지 제공
      
      
  • 반응형 이미지
    • 다양한 화면 크기와 해상도에 대해 다양한 이미지 크기 제공
    • tags 의 속성을 사용하여 브라우저가 가장 적절한 이미지 크기 선택

• React 전용 라이브러리

  • 이미지 캐싱에 도움 되는 라이브러리
    
    

  • react-image

    import Img from 'react-image'
    
    const MyImageComponent = () => (
      <Img
         src="path_to_your_image.jpg"
         loader={<Spinner />} // Component to show during loading
         unloader={<Error />} // Component to show on error
      />
    );

  • Lazy-Loading

    • 라이브러리와 같은 이미지를 뷰포트에 들어갈 때만 이미지 로드로 사용 가능
    • 초기 페이지 로드 시간 단축
      
      

  • React-Query

    import { useQuery } from 'react-query';
    
    function MyImageComponent({ imageUrl }) {
        const { data: image, isLoading } = useQuery(['image', imageUrl], () =>
           fetch(imageUrl).then(res => res.blob())
        );
    
        if (isLoading) return <div>Loading image...</div>;
    
        return <img src={URL.createObjectURL(image)} alt="Fetched" />;
    }

@ URL.createObjectURL

- Blob 데이터에 대한 URL 만들기

  API에서 이미지를 가져올 때 데이터는 Blob 형식으로 제공 가능 
  브라우저는 Blob 데이터를 이미지 원본으로 직접 표시 불가능  
  이 Blob 데이터를 나타내는 URL을 만드는 데 사용되며, 
  이 URL은 이미지의 특성에 사용 가능

- 대용량 파일의 효율적인 처리

  이미지나 비디오와 같은 대용량 파일을 처리하는 데 효율적
  Blob 데이터를 base64 문자열로 변환하여 (파일 크기를 늘리고 성능 문제를 일으킬 수 있음) 
  브라우저에서 직접 사용할 수 있는 Blob 데이터에 대한 참조를 생성

- 임시 URL

  생성된 URL은 일시적이며 브라우저 메모리의 데이터를 가리킴 
  이렇게 하면 속도가 빨라지고 추가 네트워크 요청이 필요
  
- URL 해지
 
  URL은 메모리를 확보하는 데 더 이상 필요하지 않을 때 
  해제해야 하고 이 작업을 수행하는 데 사용
  
  이러한 URL 이 많이 생성되는 애플리케이션(예: 파일 업로드 기능)에서 특히 중요