8월 8일 TIL

supabase를 이용해 회원가입을 구현하던 중
회원가입 시 바로 사용자의 프로필 이미지를 등록할 수 있도록 하고 미리보기로 보여지도록 하는 기능을 구현하였다.
그래서 알아보던 중 FileReader API를 알게 되었다.
FileReader API는 웹 브라우저에서 파일을 비동기적으로 읽을 수 있는JavaScript API이다.
이를 통해 사용자의 로컬 파일을 읽거나 처리할 수 있고 업로드한 이미지를 미리보고 싶은 경우 사용한다고 한다.

FileReader API를 적용한 부분의 코드 ↓

  const imageRef = useRef<HTMLInputElement | null>(null);
  const changhProfileImageFile = () => {
    const file =  imageRef.current?.files?.[0];
    if(file){
      const reader = new FileReader();
      reader.onloadend = () => {
        setNewProfileImg(reader.result)
      }
      reader.readAsDataURL(file);
    }
  }

▶ JSX에서 input type='file'인 요소를 클릭하여 이미지 변경시 현재 지정된 파일을 file 변수에 지정하고 그 값이 지정되었다면 그 값을 newProfileImg에 지정해준다. 그리고 readAsDataURL을 통해서 이 파일을 url로 만들수 있고 이를 통해 파일 정보를 마치 주소처럼 사용할 수 있게 된다! 그리고 이렇게 코드를 작성하고 바로 newProfileImg를 database에 넣어주면 storage에 따로 이미지를 저장하지 않아도 다른 컴포넌트 등에서 database의 프로필 이미지를 불러와서 화면에 보여줄 수 있다. 아마도 url로 저장되기 때문인 것 같다!
storage에 이미지를 저장하고 불러오는 로직 없이도 이미지를 사용할 수 있기 때문에 유용하게 사용할 수 있는 방법인 것 같다!