13. 이미지가 새로 생성됐는데도 바뀌지 않는 문제 해결

 

유저가 같은 문장에 대해 이미지 재생성을 원할 경우 재생성을 할 수 있는 기능을 추가하였다.

재생성 버튼을 누르면 같은 문장에 대해 새로운 이미지를 생성해주고 S3에 저장된 이미지를 새로운 이미지로 바꿔준다. 그렇지만 같은 URL을 사용해서 그런지 화면에서는 새로운 이미지가 아닌 이전 이미지만 계속 나오는 현상이 있었다. 원인을 생각해본 결과 아마 이미지가 캐싱돼서 그런 것으로 추측하고 이미지가 캐시되지 않도록 해주었다.

 

img className 옵션에 NO-CACHE 를 추가해주고 이미지 src 뒤에도 Date.now() 함수를 넣어 파라미터를 넣어주었다.

<img className="d-block w-100 NO-CACHE" src={i.url+"?"+Date.now()} alt={idx} />

 

+)

이때는 시간이 없어서 그냥 이렇게 한다고만 하면 되고 대충 넘어갔는데 프로젝트를 정리하며 찾아보니 S3에서 파일의 메타데이터 설정을 통해서 캐시를 제어할 수 있었다. 

 

대략 살펴보자면 원하는 파일의 메타데이터의 키에 Cache-Control을 추가하고 조정을 원하는 설정값들을 넣어주면 된다. Cache-Control 헤더 필드에서 조정할 수 있는 값에는 응답에 캐시할 수 있는 사용자(public, private), 캐시 기간(max-age)가 있다.

• 응답에 캐시할 수 있는 사용자
  • public : 모든 사람과 중간 서버가 캐시를 저장할 수 있음.
  • private : 가장 끝의 사용자 브라우저만 캐시를 저장할 수 있음. 
• 캐시 기간
  • max-age=XXX.
    예를 들어, max-age=60을 해주면 60초 동안 캐싱을 한다는 의미.

내가 했던 것처럼 NO-CACHE로 만들어주려면 max-age를 0으로 설정해줬다면 될 것이다.

 

 

[참고]

웹 서비스 캐시 똑똑하게 다루기

AWS S3 캐시 제어

[AWS]Cloudfront에서 이미지 캐싱하기