Firebase를 통해서 업로드 퍼센테이지 진행바 만들기

상황 input type='file' 태그를 통해서 이미지를 업로드한다. 업로드 하는 위치는 firebase의 storage이고 업로드 진행상황을 progress-bar를 통해 표현하고자 한다. 소스코드 firebase의 uploadBytesResumable 메서드를 통해서 storage에 업로드 된 bytes를 받아올 수 있다. 해당 bytes를 파일의 전체 크기로 나눈 후 100을 곱해주면 진행 퍼센테이지를 알 수 있고, 그 퍼센테이지를 리액트 상태로 관리하면 값이 바뀔 때마다 ui에도 적용되는 것을 볼 수 있다. css를 통해서 부모인 progress와 자식인 progress-bar 의 배경색을 다르게 하고 progress-bar의 width 값을 uploadProgress 상태값을 받아 오면 실시..