- 현상
위와 같이, cloud storage에 이미지를 업로드 직후 이미지 not found 현상.
그러나 일정시간 후 혹은 일정 횟수 강제로 refresh하면 이미지가 보이는 현상.
- 원인
처음에는 업로드 링크(getDownloadURL())가 반환이 제대로 되지 않았나 추측하여 확인해보니,링크는 문제가 없었다.
자세히 살펴보니, 이미지의 크기가 큰 경우 업로드가 완료되었더라도, 심지어 해당 이미지 링크가 정확히 firestore에 의하여 반환(getDownloadURL())이 되었더라도, 해당 링크가 유효하기까지는 시간이 걸린다는 것을 확인하였다.
- 추측
추측 근거1 : 무식한 방법으로 확인을 해보았는데, 큰 크기의 이미지 파일(400MB)를 업로드 후 반환된 이미지 링크를 그대로 복사하여 브라우저에 직접 접근해보니, 이 역시 404가 발생되다가, 일정 시간 후 정상 표출되는 점.
추측 근거2 : 에러가 발생한 시점의 링크 주소와 정상적으로 표출될때의 링크주소는 같으므로, 링크는 문제가 없다는 점.
추측 근거3 : 정상적으로 표출될때까지의 시간이 이미지 크기에 비례하여 소요된다는 점.
- 처리
이미지를 업로드 후 내부적으로 해당 이미지링크가 정상처리될때까지 progress bar를 표출하는 방법이 있겠고,
해당 이미지가 정상적으로 보여질때까지 재시도를 하는 방법이 있겠다.
여기서 필자는, 재시도하는 방법을 택했으며, 브라우저를 refresh(F5)하는 방법보다는,
해당 이미지에 error를 캐치하여 재시도하는 로직을 넣었다.
ember.js 프로젝트의 경우
react 프로젝트의 경우
와 같이 error핸들을 catch하여 retry로직을 타도록 처리하였다.
(재시도 3번 후 정상 표출됨을 확인)
그외 방안
1. 애초에 이미지 등록 시 크기 제한하는 방안.
2. 위의 재시도 방법
3. progress bar 처리
그러나 수정/등록 시 불필요하게 progress bar를 통하여 사용성을 저해하기 보다는
정상처리 될때까지 재시도 처리함(2번).
---------------------------------------------------------------------------------------------------------------
번외,
2022.01.14 이와 관련하여 chatGPT에 문의해보니 답변이 바로 나왔다. 어떻게... 가능한거지...
When you upload an image to Firebase Storage, it is first stored in a temporary cache before it is fully uploaded to the server. This is done to ensure that the upload process is as fast and efficient as possible, even if the user's internet connection is not very stable.
Once the image is fully uploaded to the server, it is then made available for retrieval. However, depending on the network conditions, there may be a delay between the time the image is uploaded and the time it is fully available for retrieval.
This delay can be caused by several factors such as network congestion, high traffic to the server, or slow upload speeds. Additionally, Firebase Storage is built on top of Google Cloud Storage, which is a highly-scalable object storage service that enables users to store and access data in near real-time.
If you want to ensure that the image is immediately available for retrieval after upload, you can use the put method provided by the Firebase Storage SDK, along with the .on method that allows you to register a listener that triggers once the image is uploaded.
You can use the put method to upload the image and the .on method to register a listener that will listen for the state_changed event, which is triggered when the upload state changes. Once the state_changed event is triggered, you can check if the upload is complete and if so, you can retrieve the URL of the uploaded image and use it to display the image on the page.
In summary, the delay in the image appearing on the page is likely due to the image being temporarily stored in a cache before it is fully uploaded to the server, and it can be caused by network conditions, high traffic, or slow upload speeds. However, you can use the put method with the .on method to ensure that the image is immediately available for retrieval after upload.
개인적인 생각으로는 지구 상 어디에서든지 위 현상은 겪었을테지만, 문제는 그 현상에 대한 글을 어떻게 효율적으로 검색하냐.. 가 문제다.
위 답변에 대한 글, 지식, 질/답 글을 검색할 수가 없어서 삽질(?)아닌 삽질을 하게 되었는데. chatGPT는 도대체 어떻게 ...
사실 개발이라는 것은 원하는 정보를 찾아서 응용하는것이 대부분이라고 생각된다. 그리고 트러블슈팅. 트러블슈팅의 연속,
하나의 작은 문제를 해결하고 다음 문제를 해결하다보면 기능이 완성되어지고 그 기능들이 모여져서 프로그램이 완성된다.
그러나 모든 것을 다 해본적도 없고 사람의 암기력은 한계가 있으므로 아는 것이라도 다시 문서를 뒤적거려야 하고 본문글처럼 자기가 가진 수준의 지식으로 여러가지 실험과 시도를 통해 해결하면서 프로그램을 만드는데, "정확한 질문"만으로 확실하진 않지만 저런 수준의 답변은 개발자들에게 꽤나 생산성을 높여줄것같다.
GPT4는 더 높은 성능을 보여줄것이라고 하고, 유료라더라도 충분히 지불할 의향이 있다!!
"opencv를 이용하여 간단한 자동차 번호 인식 코드를 달라"라고 하니 쌩뚱 맞은 코드를 내놓는것을 보면 완벽하진 않아보인다. 그러나 함수단위로 input과 output을 명시한다면 원하는 코드를 짜주는 것 같다. 조금 더 적극적으로 사용해봐야겠음.