FileReader / Promise All/ LazyLoad / PreLoad

오늘 배울 내용!

<비효율적인 부분 2가지>

효율적으로 변경

미리보기를 가짜 URL로 미리보기를 보여주고, 등록할땐 제출버튼을 누르면 그때 파일을 주고받고하면 찌꺼기가 남지 않고 미리보기도 훨씬 빨리 보여서 성능 최적화가 된다.

실습
두번쨰 진짜 URL에선 콘솔에 찍어보면 문자열로 data~~~나온다. 이건 문자열로 바꾼 사진이기 때문에 그걸 어떤 컴퓨터에서 주소창에 검색을 하든 그 이미지를 볼 수 있다.
--> 사진 자체이기 때문에 파일이 커서 이거 자체를 데이터베이스에 넣으면 비효율적.
그냥 미리보기에서만 써라!

이런 식으로 성능최적화가 되고, 이미지를 여러개 올릴 땐 For, forEach 등 올리는 방법은 여러가지지만 하나하나를 await로 기다려줘야하고 사진이 늘어날수록 시간이 오래걸리기 때문에 promise개념을 더 알아봐야 한다.

Promise All

promise로 startPromise라는 함수를 만들고 버튼을 클릭하면 각각 개별 await를 기다려주기 떄문에 총 6초가 걸린다.

promiseall을 쓰면 전체를 한번만 기다리고 뭐가 먼저 들어오든 상관없기 때문에 가장 긴 3초안에 함수가 끝날 수 있다.
3개 모두 끝날 때까지 배열 아래론 안내려간다.

Promise.all을 쓰고 리펙토링까지 한 코드!

페이지 성능 개선
1.Lazyload: 홈페이지에서 스크롤 아랫부분은 스크롤을 해야 다운받아지게 한다(불필요한 다운을 안하고 로딩시간도 빨라짐)

2.webp

3.page-speed-insight

4.preload

5.prefetch

import { gql, useApolloClient, useQuery } from "@apollo/client";
import { useRouter } from "next/router";
import { MouseEvent } from "react";
const FETCH_BOARD = gql`
  query fetchBoard($boardId: ID!) {
    fetchBoard(boardId: $boardId) {
      _id
      writer
      title
      contents
    }
  }
`;

const FETCH_BOARDS = gql`
  query fetchBoards($page: Int) {
    fetchBoards(page: $page) {
      _id
      writer
      title
      contents
    }
  }
`;
export default function staticRoutedPage() {
  const router = useRouter();
  const client = useApolloClient();
  const { data } = useQuery(FETCH_BOARDS);

  const onClickMove = (boardId: String) => () => {
    void router.push(`/32-08-data-prefetch-moved/${boardId}`);
  };

  const prefetchBoard = (boardId: string) => async () => {
    // useQuery
    // useLazyQuery
    // useApolloClient

    await client.query({
      query: FETCH_BOARD,
      variables: { boardId },
    });
  };

  return (
    <div>
      {data?.fetchBoards.map((el: any) => (
        <div key={el._id}>
          <span
            style={{ margin: "10px" }}
            onMouseover={prefetchBoard(el._id)}
            onClick={onClickMove(el._id)}
          >
            {el.title}
          </span>
          <span style={{ margin: "10px" }}>{el.contents}</span>
        </div>
      ))}
    </div>
  );
}

제목에 마우스 올림 -> 데이터 요청 -> 페이지 이동 시 캐시확인 후 있으면 그대로 들고옴(화면에 바로나옴- 부드러운 웹서비스를 만들 수 있음)
debouncing 을 이용해서 1초동안 올려두고 있으면 그것만 페칭하는 방식으로 하면된다.

원두쌤 추천 라이브러리
react-dropzone
react-avatar-editor
react-beautiful-dnd(drop and drop)
wappalyzer(크롬추가)