TIL(Today I Learned)/스파르타 내배캠
[TIL] 24/01/01 React: supabase 아바타 관리. 지옥.
개발자먼지
2024. 1. 2. 02:43
반응형
새해맞이 글쓰기.. 새해가 2시간 지나긴 했다.
TIL
avatar 지옥 supabase 제공 예제코드
이게 있는건 왜 남의 블로그를 보고 지금알았지? 공식 사이트를 제대로 탐방 못했나보다.
다 고민하고나서 이걸 보니 .. 오.. 한다.
로딩도 처리해줘야겠다.
깔끔하긴하네. 좋은코드를 많이 보고 적용하는 것도 역시 좋은 공부이다!!!
문제점은 아직 해결 방법을 못찾았다.
문제 ) 예제 코드를 보면 avatar.png 로 적용을 해주길래 아바타 이미지를 이름을 하나로만 관리해도 되겠구나 싶었다? upsert를 true로 해주기 때문에 같은 이름이 있으면 덮어쓰기를 한다. 서버에 가보면 이미지가 바뀌어 있다. 그런데 화면에서 이미지가 업데이트가 안된다. 브라우저 어딘가 캐싱 되어있나보다. 심지어 브라우저를 껐다 켜봐도 그대로다. ^0^ 캐시 삭제를 해야하나보다.
그럼 코딩으로 어떻게 관리를 하쥐?
const avatarFile = event.target.files[0]
const { data, error } = await supabase
.storage
.from('avatars')
.upload('public/avatar1.png', avatarFile, {
cacheControl: '3600',
upsert: false
})위에적힌 캐시컨트롤은, 올릴때 이야기 인것같다.
캐시 공부도 했다. 음~ 어느 짱짱맨이 쓴 좋은 글~
'Cache-Control'이 필요한 이유
앱의 성능을 향상시키는 방법 중 하나인 캐시. 클라이언트에서 캐쉬를 하고, 서버에서 컨트롤이 가능한 Cache-Control에 대해서 알아봅니다.
www.blog-dreamus.com
엇 처음에 봤던 이 코드를 다시 뜯어보니 파일명을 랜덤숫자를 주고있다. 이녀석들...
애초에 왜 위와같은 예제 코드를 준 것일까...는 그냥 예제고 이름하나일뿐..
그래서 avatar.png가 아닌 avatar1.png 라고 준건가보다....
그런데 이렇게하면 db에 계속 쌓일텐데 그건 어떻게 관리하라는 건가.. 아까운 db 용량..
반응형