프로젝트 내에서 이미지 등록이 2군데 있는데, 2군데 모두 이미지 미리보기를 사용한다.
기존 프로젝트에선,URL.createObjectURL()를 사용하였지만 , 다른 메소드를 사용해 보고자 결정한 것이 시작이였다.
URL.createObjectURL vs FileReader
실행 시간
URL.createObjectURL는 동기 실행이다.FileReader는 비동기 실행이다.
장, 단점이라 하면
비동기실행으로 메인 스레드를 차단하지 않지만, 데이터를 읽어들이는데 시간이 URL.createObjectURL보다 더 걸린다.
메모리 사용
토이 프로젝트에서는 메모리 사용과 관련하여 신경을 기능 구현보다 '덜' 썼겠지만, 앞으로 실제 비즈니스 프로젝트를 하려 하니 메모리 사용 관련 내용도 다른, 여러 메소드 사용 할 때마다 메모리에 관해 '신경' 쓰게 되었다.
URL.createObjectURL브라우저가 닫히는 이벤트가 트리거 되기 전까지 메모리에 객체를 저장한다.FileReader: FileReader의 메소드로readAsDataURL을 사용하여 base64로 인코딩된 값을 반환 한다고 할 경우, URL.createObjectURL에 비해 메모리를 많이 잡아 먹지만, 사용하지 않으면 자동으로 메모리에서 제거 된다.
URL.createObjectURL을 통한 객체는 메모리에 계속해서 남게 되는데 사용하지 않을 시에는 반드시 URL.revokeObjectURL로 메모리에서 삭제 시켜줘야 한다.
호환성
비즈니스 프로젝트를 하려고 하면 반드시 먼저 생각나는 것이, "이것이 호환이 되는가?"이다. 따라서
- URL.createObjectURL : IE10 & 모든 모던 브라우저 ( 상대적 최신 트렌드 )
- FileReader.readAsDataURL : IE10 & 모든 모던 브라우저 ( 오랜 전통 )
이미지를 다운로드하거나, 서버 또는 다른 브라우저 탭에서 무언가를 하고 싶으면
FileReader를 사용하고 사용자가 보이는 화면(=인터페이스)에서 빠르게 이미지를 보여주려면createObjectURL을 사용하는 것이 현명 한 선택인 것같다.
그러나 현재 프로젝트에서는 새로움과 다양한 것을 배우기 위한 나의 프로젝트 수행의 목표성에 맞게FileReader를 사용해 보기로 결정하였다.
물론 나중가서 다시 FileReader관련 글을 작성 하겠지만, 요번 프로젝트에서 FileReader를 미리보기용으로만 사용하지는 않는다.
getBase64
FileReader를 사용하여 미리보기를 시행할수 있는 url(인코딩URLData)을 받으려면, 3가지로 나누어서 로직을 짜야한다.
그리고 나만 사용하는 것이 아닌 다른 곳에서도 사용 할 수 있도록 src/util에 작성하자
// src/util
function getBase64(file: File) {
return new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(<string>reader.result);
reader.onerror = error => reject(error);
});
}reader.readAsDataURL(file): FileReader로 File을 무슨 데이터 형태로 바꿀지이다.reader.onload: file을 변환 한 이후, 어떻게 해줄지 이다. 나의 경우는 getBase64 함수는 promise 객체를 반환 하므로 resolve함수 안에 결과물을 반환 하게 해주었다.reader.onerror: error가 발생하면 error 처리를 해줘야 하지만, reject안에 에러를 넣어 주었다.
이렇게 미리보기,(이미지 파일 전송) 함수를 만들어 보았다.
이제는 미리보기 기능을 제공하는 컴포넌트를 만들어보자
