Chunho’s DevLife

프로젝트 진행 중 S3 버킷에서 관리되는 서버 이미지는 CloudFront를 통해 요청, 응답받았다.만약 하나의 이미지 파일에만 문제가 생겼을 경우 전체 이미지 버전을 업데이트하고 무효화시키기에는 부담이 조금 있어, 테스트 해본 결과 무효화를  진행하지 않을경우 Etag, 마지막 수정시간이 변경되어도 계속해서 캐싱을 하고있는것을 확인했다. 이 부분을 해결하기 위해 CloudFront의 캐시 정책을 조사하고 다른 방안이 있을지 살펴보았다.  테스트 시나리오를 통한 기존 이미지 캐시 동작 확인이미지 네트워크 요청 시 응답 헤더 확인 -->캐시 관련 헤더를 확인해 본 결과etag: W/"26xxxxxxx"last-modified: Thu, 27 Feb 2025 06:26:56 GMTx-cache: Hit fr..

Next/Image에서는 Lazy Loading, 이미지 사이즈 최적화, placeholder, 캐싱 등의 이미지 최적화 기능을 제공한다. lazy loading 기본적으로 다른 속성을 주지 않으면 lazy loading이 적용되어 뷰포트에 이미지가 들어왔을 때 이미지를 로드한다. 만약, loading prop에 ''eager' 값을 주면 뷰포트에 상관 없이 모든 이미지가 동시에 로드된다. 이미지 사이즈 최적화 디바이스 크기에 맞게 이미지의 사이즈가 조절되며, 용량이 작은 webp 포맷으로 변경되는 작업이 Next 서버에서 이루어지게 된다. placeholder CLS(Cumulative Layout Shift), 레이아웃이 흔들리는 현상을 방지하기 위해 placeholder 기능을 제공한다. 이미지가 ..