[TIL] Day32

6월 21일 학습 목표

이미지 최적화하기

기존에 배웠었던 이미지 프로세스의 문제점
1. 게시글을 작성하다가 뒤로가기 등을 했을 때, 사용하지도 않을 이미지가 Storage에 저장되게 된다 => storage 비용 증가
2. 이미지 미리보기 시간이 오래걸림

파일을 변형 해서 바로 브라우저에 보여주게 만들어보자
해당 파일을 볼 수 있는 url을 만들것 -> 파일이 실제 storage에 저장된 것은 아님
파일을 state에 저장해두었다가...
등록버튼을 클릭했을 때 create api가 요청하려고 할 때 => 동시에 uploadfile api 요청 => storage에 주소 받아오고 => 주소를 포함하여 create api 요청

미리보기 만들기 => 백엔드에는 저장하지 말것!

파일을 가지고 변경한 이미지 주소 용량 큼
스토리지에 저장된 이미지 주소가 용량 절약!

내 컴퓨터에서만 보이는, 가짜주소라 보내면 안됨
진짜주소는 용량이 매우 크기 때문에 보내면 안됨
storage로부터 받은 url을 백엔드로 전송해야 함

promise

// Promise
// Promise에서 resolve가 실행이 되면 종료, reject가 실행되면 오류

	const onClickPromise = async () => {
    console.time("시작!!!");
    const result1 = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("https://dog1.jpg");
      }, 3000);
    });
    // console.log(result1);
    // .then((res) => console.log(res));

    const result2 = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("https://dog2.jpg");
      }, 2000);
    });

    const result3 = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("https://dog3.jpg");
      }, 1000);
    });
    console.timeEnd("시작!!!");
  };

동시에 요청하고 싶다면 - Promise.all()

// Promise.all()

	const onClickPromiseAll = async () => {
    console.time("시작!!!");
    const result = await Promise.all([
      // 세개를 동시에 실행하고, 모두 끝날때까지 기다리게 된다
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("https://dog1.jpg");
        }, 3000);
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("https://dog2.jpg");
        }, 2000);
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("https://dog3.jpg");
        }, 1000);
      }),
    ]); // 프로미스들의 배열

    console.timeEnd("시작!!!");
    console.log(result);
  };

LazyLoad vs PreLoad

LazyLoad: 페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 나중에 하는 기술. 맨 위의 화면에 보이는 이미지만 로드를 한 후에, 스크롤을 내리면서 이미지가 보여져야 할 때마다 이미지를 로드한다면, 데이터의 낭비 방지

PreLoad : 페이지를 읽어들일 때 미리 리소스를 받아놓는 기술. 모든 데이터들을 미리 로드해놓고 대기하는 방식

오늘공부를돌아보며

리액트 훅 폼으로 이미지 넣는 것이 알고 시펑ㅜ