1.이미지 업로드 방식
FileReader
- Async-await 와 for
Promise.all
3.이미지 불러오기
LazyLoad/preLoad
FileReader
기존의 이미지 업로드 방식은 Storage를 통해서
브라우저 => 백엔드 => Storage 로 업로드를 하며
Storage => 백엔드 => 브라우저 의 방식이였다.
이런 방식은 Storage와 서버에 부하를 주며
Storage를 한번 갔다 오기 때문에 브라우저에서 미리보기를 보여주는 시간이 추가로 발생하고,
사진 업로드후 등록은 안하거나 하는 경우에 의해
Storage에 이미지 찌꺼기들이 쌓이는 현상을 불러일으켜 서버비용을 낭비 시킨다.
미리보기 같은 경우에는 해결책으로
JS로 브라우저에서 js로 읽을 수 있는 image의 URL을 만들어 Storage에 보내지않고 바로 읽을 수 있게 만드는 방법이 있고,
이미지 찌꺼기가 쌓이는 경우엔 최종게시글을 등록할 떄 업로드 할 파일을 같이 묶어 DB에 보내는 방법으로 해결 할 수 있다.
이런 해결책들은 fileReader라는 기능을 통해서 URL을 변경 시켜 줄 수 있다.
Promise.all
Async-await이 선언된 함수에서 for문과 같은 반복문을 돌리게 되면
for문이 반복될 때마다 await하기때문에 3번의 await이 발생하고, 함수가 효율성이 떨어지게 된다.
그래서 나온것이 PromiseAll이다. 아래 예제는 총 6초가 걸리는 함수이다.
const onClickPromise = async () => {
const result1 = await new Promise((resolve, reject) => {
console.time("Promise 시작"); // 시간확인
// resolve 가 실행이 되면 함수가 끝난다.
setTimeout(() => {
resolve("https://dog1.jpg");
}, 3000);
});
console.log(result1);
const result2 = await new Promise((resolve, reject) => {
// resolve 가 실행이 되면 함수가 끝난다.
setTimeout(() => {
resolve("https://dog2.jpg");
}, 1000);
});
console.log(result2);
const result3 = await new Promise((resolve, reject) => {
// resolve 가 실행이 되면 함수가 끝난다.
setTimeout(() => {
resolve("https://dog3.jpg");
}, 2000);
});
console.log(result3);
console.timeEnd("Promise 시작"); // "Promise 시작"을 기준으로 time-timeEnd 사이의 시간을 재준다.
};순서를 보면
result1=>result2=>result3으로 각각 3초 1초 2초 로
총6초가 된다. 이 작업방식은 순차적으로 진행되며 result 3을 보며면 앞의 4초를 추가로 더 기다려야되는 셈이다.
그러면 위를 promiseALl을 통해 변형 해보자
console.time("Promise.all 시작"); // 시간확인
const result = await Promise.all([
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("https://dog1.jpg");
}, 3000);
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("https://dog2.jpg");
}, 1000);
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("https://dog3.jpg");
}, 2000);
}),
]);
console.log(result);
console.timeEnd("Promise.all 시작");위와 같은 promise.all은 함수가 실행됨가 동시에 3가지 Promise들이 동시에 실행되어 1초에는
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("https://dog2.jpg");
}, 1000);
}),부분이
2초에는
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("https://dog3.jpg");
}, 2000);
}),부분이
3초에는
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("https://dog1.jpg");
}, 3000);
}),부분이 실행되며
위와같은 결과를 보여주지만 시간은 3초로 줄게 된 것이다.
또한 위 코드는 만약 각각 promise들의 실행 대기 시간이 동일하다면 아래처럼 리펙토링을 할 수 있다.
console.time("Promise.all 시작"); // 시간확인
const result = await Promise.all(
["https://dog1.jpg", "https://dog2.jpg", "https://dog3.jpg"].map(
(el) =>
new Promise((resolve, reject) => {
setTimeout(() => {
resolve(el);
}, 3000);
})
)
);
console.timeEnd("Promise.all 시작");
};LazyLoad - PreLoad
LazyLoad는 사이트 사이트를 랜더 해 올 때 필요한 만큼(보이는/지정된범위) 만큼의 이미지만 다운받아오는 것을 말한다.
LazyLoad는 react-Lazy-Load 라이브러리가 주로 사용 된다.
preLoad는 파일의 크기가 큰 이미지가 존재할 때 다른 작업중에 미리 이미지를 받아놓고, 나중에 해당 이미지가 필요할 때 바로 보여주는 것을 말한다.
