이미지 미리보기 두가지 url생성방법, createObjectURL vs FileReader

이미지 파일을 server로 보내기 전, 미리보기를 구현중
미리보기를 위한 임시 url을 생성하는 방법은 두가지

1. URL.createObjectURL
   -> 사용하기에 더 간편함
   -> revokeObjectURL 메소드로 url을 무효화 시키지 않으면 js 엔진에서 garbage collect를 시키지 않고 계속 변수가 남아 메모리 누수가 됨. 메모리관리 필수
   -> 이미지의 상대경로를 이용하기때문에 내 브라우저에서만 접근 가능
   -> 동기적으로 실행된다.(즉시 실행)
   -> hash 형태의 url을 반환

2. FileReader API
   -> File or Blob 객체를 사용하여 파일 내용을 읽기때문에 다른 브라우저에서도 접근 가능
   -> 1보다 더 오래 사용되어진 방법이라서 브라우저/버전 지원에 유리하다.
   -> 비동기적으로 실행된다.(시간이 조금 지체된 후 실행)
   -> base64로 인코딩된 값을 반환
   -> 사용하지 않으면 가비지 컬렉터가 회수한다 (메모리관리 필수 아님)

• 결론 : createObjectURL을 사용하는 게 효율적이고 빠르지만, 사용하지 않을 때 일일이 revokeObjectURL로 release시켜주어야 하는 번거로움이 있다. 나는 웬만하면 fileReader 쓰고있는 중