이미지 미리보기 :: createObjectURL vs FileReader

임시 URL을 생성하는 두 가지 방법을 알아보자!

1. createObjectURL

• createObjectURL로 생성한 이미지는 가짜 URL이다.
  👉🏻 다른 브라우저에서는 접근이 불가능하다.

// 1. 임시 URL 생성 (가짜 URL - 내 브라우저에서만 접근 가능하다.)
const result = URL.createObjectURL(file);
console.log(result);

아래와 같은 형태의 url이 생성된다.

// 결과
blob:http://localhost:3000/f327a5c9-e636-4c7b-9f32-0322062b8a69

2. FileReader

• FileReader로 생성한 이미지 URL은 진짜 URL이다!
  👉🏻 다른 브라우저에서도 접근이 가능하다.

const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = (event) => {
  if (typeof event.target?.result === "string") {
    console.log(event.target?.result);
  }
};

// 결과
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbsAAAEuCAYAAAAXwrzuAAAK1mlDQ1BJQ0MgUHJvZmlsZQAASImVl...

둘 중에서 뭐 쓰지?

• 딱 봐도 createObjectURL이 더 간편하다.

• But! createObjectURL은 FileReader에 비해 비교적 최근에 나온 기능으로,
  브라우저에 따라서 지원되지 않는 경우가 있을 수 있다.

• 모든 브라우저/버전에서 지원해야 한다면 FileReader를 이용하자!

• createObjectURL을 사용하면 메모리 관리를 해줘야 한다.
  [참고 - 메모리 관련]