Using Image Reader

[wavescats]

구현했던 방법 ⚡

Base64

• 사용자가 선택한 이미지 파일을 텍스트 형태인 base64 로 인코딩 👉 readAsDataURL 메서드 호출

const handleLoadImage = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files?.length) {
      return;
    }
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);

    reader.onloadend = () => {
      const base64 = reader.result;
      if (base64) {
        setProfileImage(base64?.toString());
      }
    };
  };

훅 분리

• useFileReader.tsx

export const useFileReader = () => {
  const readFile = (file: File): Promise<string | null> => {
    return new Promise(resolve => {
      const reader = new FileReader();
      reader.readAsDataURL(file);

      reader.onloadend = () => {
        const base64 = reader.result as string;
        resolve(base64);
      };

      reader.onerror = () => {
        resolve(null);
      };
    });
  };

  return { readFile };
};

훅 적용

• MyProfile.tsx

const handleLoadImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files?.length) {
      return;
    }
    const file = e.target.files[0];
    const base64 = await readFile(file);

    if (base64) {
      setProfileImage(base64);
    }
  };

구현 할 방법 🔥

Blob

기존의 base64 방식의 이미지 인코딩 방식에서 리펙토링 기술로 Blob 형식을 채택 한 이유로는,

단순히 최적화 에 포커싱을 두고, 이미지의 크기를 줄인다 라는 점에 채택하게되었습니다.

데이터를 텍스트 형태로 표시하는 base64 방식과,

이진 형태를 띄는 Blob URL 은 원시 형태의 데이터로 저장하기때문에

클라우드에 저장되는 공간을 비교적 효율적 으로 사용하여 리소스 관리에 용이하다는 장점이 있습니다.

const handleLoadImage = (e: React.ChangeEvent<HTMLInputElement>) => {
  if (!e.target.files?.length) {
    return;
  }

  const file = e.target.files[0];
  const blobUrl = URL.createObjectURL(file);

  setProfileImage(blobUrl);
};

현재는 기능 구현을 최우선 으로 두어 base64 방식의 인코딩 방식을 채택하였지만,

추후 Blob URL 혹은 SVG 형태의 기술을 사용하여

보다 효율적인 메모리 관리를 위해 리펙토링의 계획을 갖고 있습니다.

👇 (Reference)

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-Base64-Blob-ArrayBuffer-File-%EB%8B%A4%EB%A3%A8%EA%B8%B0-%EC%A0%95%EB%A7%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%84%A4%EB%AA%85