20220225_TIL : 이미지 업로드

기존에 스토리지 저장 방식에서는 게시물을 등록하지 않아도 이미지를 로드할때 스토리지에 저장하고 그 url을 받아와서 등록하는 방식이었다.

JS 기능 FileReader()를 사용해서 아직 파일을 업로드(uploadFile)하지는 않은 상태로 임시 주소를 만들어서 이미지를 보여줄 수 있다. .readAsDataURL()을 사용하면 그 컴퓨터에서만 사용 가능한 이미지 URL을 만들어 낼 수 있다.

const fileReader = new FileReader();
    fileReader.readAsDataURL(file);

    fileReader.onload = (data) => {
      if (typeof data.target?.result === "string") {
        console.log(data.target?.result);
        setImageUrl(data.target?.result);
       	//여기서 받아온 URL을 <img src={}/> 사용
      }
    };

파일 업로드를 클릭하고 이미지 업로드 API를 요청하는데 여러 파일을 올리기 위해서는 API에 업로드 요청, 대기를 반복해야한다. 같은 요청이라면 코드를 반복해서 쓰기보다 Promise.all로 동시에 요청을 넣을 수 있다.

const classmates = ["철수", "영희", "훈이"];
    const results = await Promise.all(
      classmates.map(
        (el) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve(el);
            }, 3000);
          })
      )
    );
    console.log(results);

이미지 로드 관련,

preload - 한 페이지를 보여줄 때 모든 이미지를 다 다운받아와서 보여주는 방식.

const divRef = useRef<HTMLDivElement>(null)

    useEffect(()=>{
        //로드되면서 자동으로 이미지 읽어오도록
        const img = new Image()
        img.src = ""
        img.onload = () => {
            setImgTag(img)
            //태그 컨트롤하기 위해 ref 이용
        }
    },[])

    const onClickImagePreLoad = () => {
        if(imgTag) divRef.current?.appendChild(imgTag)
    };

return(
<div ref={divRef}></div>
   <button onClick={onClickImagePreLoad}>이미지 프리 로드</button>
);

Lazyload - 스크롤로 화면이 표출되면 해당하는 이미지를 다운받아와서 보여주는 방식. 라이브러리 이용해서 Lazyload로 보여주고싶은 구간을 적용시킬 수 있다.