프로필 이미지를 수정했는데 그대로에요!
이미지 업데이트 오류
발견오류
진행중인 프로젝트에서 프로필 이미지 변경 시 PUT요청이 정상적으로 보내졌음에도 변경이 되지 않는 문제 발견 즉시 새로고침을 하면 바뀌지 않다가 캐시지우기 새로고침을 해주면 정상적으로 바뀐것을 확인할 수 있었음.
업로드 로직
- 백엔드측의 요청으로 사용자의 프로필이미지는 고정경로에 위치함
- 이미지는 Progressive 이미지 컴포넌트로 구성되어있음
- PUT요청 이후 SUCCESS 상태가 반환되면 프로필경로로 Navigate
당연하겠지만 수정 로직자체가 그렇게 어려운 로직이 들어가지 않았다. 단순히 변경 반영까지 시간이 좀 걸리는 것으로 의심했으나, 혹시 S3의 이미지가 수정되지 않아서 생기는 문제일까 싶어서 해당 이미지 경로로 접근해 본 결과 정상적으로 수정된 것을 확인. 추가로 앞선 오류 발견 파트에서 ‘캐시지우기 새로고침’을 하는 경우 교체된 이미지로 바뀌는 것을 알 수 있었으므로 캐싱 관련된 문제로 추측.
오류 해결방법
예상한대로, 브라우저 캐싱에 의한 문제가 맞았다. 백엔드 사정상 이미지의 S3 저장 파일명을 고정파일명으로 사용하고 있었는데, 브라우저측에서는 URI 자체가 변경되지 않았으므로 캐싱되어있는 데이터를 그대로 활용한 것. 이를 회피하기 위해선 대략 세 가지 정도의 해결책이 가능했다.
- 백엔드 로직에서 타임스탬프 찍어주기.
이미지의 뒤에 타임스탬프나 다른 변경되는 id값을 적어주는 방식인데, 백엔드 측에서 고정경로로 설정하고 사용하는데에서 무언가 이유가 있었다면 해당 옵션은 고려대상이 아닐 것 같다. - 백엔드에서 반환 시 HTTP 헤더 설정
백엔드 측에서 해당 반환값에서만Cache-control헤더를 설정해서 해당 이미지 리소스만 캐싱하지 않도록 지정할 수 있다. - 프론트에서 쿼리스트링 추가
프론트 측에서 해당 이미지의 뒤에 의미없는 쿼리스트링을 추가해주면 브라우저측에서는 URI 가 변경되었으므로 새로운 리소스를 사용하도록 강제할 수 있다.~/profile.jpg?cskim=999
프론트에서 쿼리스트링 추가
내가 선택한 방법은 쿼리스트링을 추가하는 방법이다. 해당 이미지에선 캐싱의 장점을 포기하겠다는 의미이기도 하다.
하지만 유저가 해당 페이지로 진입하는 경우가 매우 많지는 않을것이라고 추측하여 헤더설정 대신 쿼리스트링 방법을 선택했다.
추가로 해당 페이지 진입 시 useEffect훅을 통해 해당 프로필 편집권한 여부를 체크하는 로직이 존재하여 그 로직을 활용해서 만약 편집권한이 있을때만 이미지 경로 뒤에 쿼리스트링을 추가했다.
이를 통해 편집권한자인 경우엔 캐싱이 비활성화되고, 일반적으로 방문하는 다른 사용자의 프로필이라면 캐싱이 활성화되도록 구성했다.