내일배움캠프[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은 임시적인 것