내일배움캠프[4기_Reac트랙]/TIL
내일배움캠프 React트랙 18일차 회고 (2022.11.23)
ecoEarth
2022. 11. 24. 07:41
JS 자체 API인 FileReader라는 클래스로 reader라는 객체를 생성
readAsDataURL이라는 reader의 method를 통해 the file을 인자로 넣으면 file객체가 DataUrl로 변환
-> onloadend event. 데이터 변환이 끝났을 때 이 이벤트가 실행이 됨
localStorage 프로필 변경을 누르기 전까지는 프로필 사진이 바뀌지 않게 imgDataUrl을 임시 보관
-> downloadrul을 얻는 중간 과정이라고 생각
disabled = true 버튼 비활성화
-> 프로필 변경 버튼을 여러번 누르게 되면 불필요하게 서버에 요청하게 됨
프로필 이미지가 폴더(authService.currentuser.uid)에
파일(uuidv4)로 저장
- uuid:
-> 전세계 어느 아이디와도 중복되지 않아 다른 DB와 합칠 때 오류가 나지 않는다.
③ uploadString이라는 firestorage의 api를 통해 response를 받는다.
-> imgRef : 이미지가 저장되는 위치
-> getDownloadURL을 통해 response의 ref가 downloadUrl에 담긴다 = '이미지 링크'(영구적)
-> 화면에 이미지를 뿌릴 때 이 downloadUrl을 이용
-> imgDataUrl은 임시적인 것