[웹개발] 이미지 업로드 후 새로고침해야만 적용되는 현상 해결하기

728x90

 

개요

뷰에서 컴퍼넌트를 사용해서 이미지파일을 수정하고 돌아왔을 때 이미지가 바로 적용되지 않는 문제에 마주쳤다.

db에서 url을 임의로 변경하고 파일서버에 디렉토리가 없을 때 수정하여 테스트했을 때, 파일서버에 디렉토리가 정상적으로 만들어지고 화면에서도 제대로 출력되는 것을 확인했다.

---

이 상황을 미루어봤을 때, 코드의 문제는 아닌 것 같았다.

브라우저 쪽을 찾아보고 공부해보니,

1. 브라우저가 최초로 화면을 랜더링한다.
2. 이미지 src의 경우 최초에 받아온 값과 다르지 않으면 캐시에 있는 값을 가져다 쓴다.

로 정리할 수 있었다(해당 내용이 정확한 지는 차후에 레퍼런스를 더 찾아보고 출처로 남기겠다.).

 

해결책

따라서 해결방법으로,

1. 컴퍼넌트에서 수정 후 리스트 페이지로 돌아왔을 때, 새로고침을 한다.
2. 파일서버에 파일명을 다르게 업로드하여 해결한다.

를 떠올렸다.

 

두번째 해결책

두번째 해결책의 경우에는

파일명을 동일하게 올려서 덮어쓰는 방식으로 파일서버에 업로드 하자는 요구사항에 위배된다.

요구사항에서 이렇게 한 이유는 파일명을 다르게 해서 기존 파일을 갖고 있어야 하면 모르겠지만 현재 프로젝트 상황에서는 그럴 필요가 없었고 구현을 편하게 하고자 파일명을 다르게 해서 계속 리소스를 사용하면 비용문제가 발생하기 때문이었다.

따라서 첫번째 해결책으로 해결하려했지만 Vue2와 typescript 개발환경으로 레퍼런스가 부족했다.

지난번 조직도 만들 때 사용했던 방식인 @Watch와 @Prop, emit을 사용(이때도 레퍼런스가 없어서 '이렇게 하면 될까?'라는 짐작으로 거의 무에서 유를 창조한 기분으로 해결했었다 ㅠ_ㅠ,,)하려고 했지만 이것도 먹히지 않았다,,

---

그러던 중 구글링해서 찾은 글이 눈에 들어왔다.

img태그의 src 뒤에 가변적인 값을 붙여서 처리하는 방식이었다.

출처: https://yangyag.tistory.com/314

이 글을 읽고 내 코드에서도 리스트를 불러올 때 updateDt를 뒤에 붙여서 가져와서 처리했다.

 

 <img :src = "`${item.thumbnailUrl}?time=${item.updateDt}`" class="thumbnail"/>

 

리스트에서는 해결이 됐지만 어떻게 짠 구조인지 상세페이지(수정을 위한 컴퍼넌트)에서 썸네일 미리보기에는 반영이 되지 않았다,,

해당 컴퍼넌트에서 api를 호출해서 값을 가져오고 있는데 해당 api에는 updateDt가 따로 없었다,,

그래서 new Date()를 통해 가변적인 값을 임의로 붙여주어 해결했다.

 

let time = new Date().getTime();
this.thumbnailImage = res.data.thumbnail_url + "?time=" + time

 

 

남이 짠 코드에서 잘못된(이미지 업로드방식) 코드를 수정하고 해당 문제점을 해결하기 위해 구조를 파악하느라 꽤 시간을 쓴 것 같다,,

그래도 브라우저 특징과 이미지 업로드 관련해서 스킬이 는 것 같아서 좋았다!

추가

홈페이지는 https인데 img 태그의 src는 http일 때, (failed)net::ERR_CERT_AUTHORITY_INVALID 라며 이미지가 깨진다.

이를 혼합콘텐츠라고 하고 이게 문제였다.

결론적으로 파일서버에도 인증서를 적용시켜주면 쉽게 해결된다.

아래 링크를 보면 설명이 잘 되어있으니 참고해보자.

 

참고: https://foxydog.tistory.com/42

브라우저 이미지 엑박 문제 - 혼합 콘텐츠(Mixed Content) 정책