기존 이미지 업로드 문재점
- 미리보기가 너무 느림: 클라우드 서비스에 저장한후 다운로드 url을 받고 그걸 띄우다 보니 느림
- 이미지 찌꺼기가 남음: 이미지를 클라우드서비스에 저장후 게시글 등록 안하고 그냥 나가버리면 해당 클라우드에는 계속 다운로드 url이 남아있음
해결방법
이미지를 올리면 브라우저에 임시url을 만들어서 미리보기에 띄우기
브라우저에 임시로 해둔거기 때문에 찌꺼기도 등록안하면 자동으로 사라짐
const onChangeFile = (event) => {
const file = event.target.files?.[0]
// 1번
const result = URL.createObjectURL(file);
// 2번
const fileReader = new FileReader()
fileReader.readAsDataURL(file)
fileReader.onload = (event) => {
const result = event.target?.result
}위와 같이 2가지 방법이 존재한다
createObjectURL방식은 최근에 나온 방식으로 내 브라우저에서는 URL에 접근이 가능하지만 다른 브라우저에서는 접근이 불가능하다
FileReader 방식은 진짜 URL을 생성 다른 브라우저에서도 접근이 가능하다
Promise.all
api요청을 연속으로 진행해야 할때가 있다
그럴때 하나 하나 하면 시간이 너무 오래걸리기 때문에
한번에 전부 요청하여 모든 결과가 올때까지 기다린후 다음 코드를 진행한다
LazyLoad
페이지를 읽을때 필요하지 않은 리소스를 다운 받지 않고 스크롤이 내려가면서 리소스가 필요한 시점에 해당 리소스를 다운받는 방법
PreLoad
페이지를 읽을때 미리 리소스를 다운 받아 두는것
이를 활용하면 다음페이지에서 쓸껄 미리 받아둘수도 있다
