✍🏻 [Code Camp_TIL] 33일차: 이미지 성능 개선(임시 URL, Promise.all(), LazyLoad vs PreLoad, Prefetch, Webp)

이미지 성능 높이기

기존 이미지 업로드에서의 문제점

1. 다른 사람 컴퓨터에 해당 이미지가 없을 경우 오류 발생
2. 업로드하다가 중단 시에 이미지 데이터가 지워지지 않고 남음

위와 같은 문제점은 이미지 주소를 서버에서 가져오는 것이 아니라, 미리보기 용으로 만든 임시 주소를 만들어서 해결할 수 있다. 여기서 임시 주소는 브라우저에서 접속 가능한 임시 URL이다.

임시 URL 받아오기

임시 URL을 만드는 방법은 2가지가 있다.

1. 가짜 URL 생성하기(내 브라우저에서만 이미지에 접근 가능)
2. 진짜 URL 생성하기(다른 브라우저에서도 이미지에 접근 가능)

첫 번째 방법: 가짜 URL 생성(내 브라우저에서만 이미지에 접근 가능)

export default function ImageUploadPreviewPage() {
	const [imageUrl, setImageUrl] = useState("")

	const onChangeFile=(event: ChangeEvent<HTMLInputElement>)=> {
		const file = event.target.files?.[0]
		console.log(file);
			// 파일이 없으면 함수를 종료
			if (!file) {
				alert("파일이 없습니다.");
				return
			}
		
	// 1. 임시 URL 생성 -> 가짜 URL생성, 내 브라우저에서만 접근 가능
	const result = URL.createObjectURL(file)
	console.log(result)
	setImageUrl(result)
		
}
	return (
		<>
			<div>
				<input type="file" onChange={onChangeFile} />
				<img src={imageUrl}/>
			</div>
		</>
	);
}

두 번째 방법: 진짜 URL 생성(다른 브라우저에서도 이미지 접근 가능)

new FileReader() 기능은 파일 객체를 이용해 내용을 읽고 사용자 컴퓨터에 저장하는 것을 가능하게 해주는 브라우저에서 지원해주는 기능이다. new FileReader() 를 사용하면 new FileReader()에 있는 기능들을 이용할 수 있다.

// 아래 코드를 제외하고 첫 번째 방법과 코드 동일

// 2. 임시 URL생성 -> 진짜 URL생성, 다른 브라우저에서도 접근 가능	
		const fileReader = new FileReader()
        // readAsDataURL(): Data URL을 얻을 수 있음.
		fileReader.readAsDataURL(file);
 // 파일 읽기에 성공하면 onload 실행. 
// onload에서는 파일을 읽고 생성된 Data URL이 target.result에 담기게 됨.
		fileReader.onload = (data) => {
			// fileReader의 결과값이 string이 아닐 수도 있으니 string일때만 실행되도록 함.
			if(typeof data.target?.result === "string"){
				console.log(data.target?.result);
				setImageUrl(data.target?.result)
			}	
		}
        
   // return 값 첫 번째 방법과 동일

임시 URL로 API 요청하기

임시 URL을 받아오는 방법 중 두 번째 방법(진짜 URL 받아오기)을 사용해서 API를 요청했다.

여기서 임시 URL은 미리보기 파일이기 때문에 올바른 형태의 file 타입이 아니다. 따라서 다음과 같이 코드를 작성해야 한다.

// import 부분 생략

const CREATE_BOARD = gql`
  mutation createBoard($createBoardInput: CreateBoardInput!) {
    createBoard(createBoardInput: $createBoardInput) {
      _id
    }
  }
`;

const UPLOAD_FILE = gql`
  mutation uploadFile($file: Upload!) {
    uploadFile(file: $file) {
      url
    }
  }
`;

export default function ImageUploadPage() {
	// imageUrl은 미리보기를 위한 주소이므로 해당 URL을 스토리지나, DB에 넣어서는 안됨.
  const [imageUrl, setImageUrl] = useState("");
	// DB에 넣기 위한 URL주소
  const [file, setFile] = useState<File>();

  const [ uploadFile ] = useMutation<Pick<IMutation, "uploadFile">,IMutationUploadFileArgs>(UPLOAD_FILE);
	const [ 나의함수 ] = useMutation(CREATE_BOARD);

	// 받아온 주소로 api 요청
  const onClickSubmit = async () => {
		// 스토리지에 업로드 
    const resultFile = await uploadFile({ variables: { file } });
    const url = resultFile.data?.uploadFile.url;
		
		// 게시글에 이미지 등록
    const result = await 나의함수({
      variables: {
        createBoardInput: {
          writer: "철수",
          password: "1234",
          title: "안녕하세요",
          contents: "반갑습니다",
          images: [url],
        },
      },
    });
    console.log(result);
  };

  const onChangeFile = async (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]; 
    // <input type="file" multiple /> 에서 multiple 속성으로 여러 개 드래그 가능
    if (!file) return;
    console.log(file);

    // 2. 임시URL 생성 => (진짜URL - 다른 브라우저에서도 접근 가능)
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onload = (event) => {
      if (typeof event.target?.result === "string") {
        console.log(event.target?.result); 
        // 미리보기용
		setImageUrl(event.target?.result);
		// DB에 넣어주기용
        setFile(file);
  };

  return (
    <>
      <input type="file" onChange={onChangeFile} />
      <img src={imageUrl} />
      {/* <img src={`https://storage.googleapis.com/${imageUrl}`} /> */}

      <button onClick={onClickSubmit}>게시글 등록하기</button>
    </>
  );
}

createObjectURL?
createObjectURL과 fileReader 모두 이미지 업로드 시 이미지를 불러와서 미리보기를 할 수 있다. createObjectURL을 사용하면 소스코드가 짧아져서 작성하기 쉽지만, fileReader와 달리 blob 객체로 이미지를 생성하기 때문에 해당 데이터를 서버와 통신할 때 사용할 수 없다! 또한, fileReader가 브라우저 호환성도 더 좋기 때문에 fileReader를 사용하자.

Promise & Promise.all()

Promise

아래 코드를 실행시키면 result1부터 2, 3까지 차례로 실행되고 총 6초의 시간이 걸린다.

const startPromise = async () => {
  // console.time: 시간 측정
        console.time("=== 개별 Promise 각각 ===");
        const result1 = await new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve("성공");
          }, 2000);
        });
        const result2 = await new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve("성공");
          }, 3000);
        });
        const result3 = await new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve("성공");
          }, 1000);
        });
        console.timeEnd("=== 개별 Promise 각각 ===");
      };

Promise.all()

반면, Promise.all()을 사용하면 Promise.all()에 포함된 함수들을 동시에 실행하기 때문에 약 3초의 시간이 걸린다.

	const startPromiseAll = async () => {
        // await Promise.all([promise, promise, promise])

        console.time("=== 한방 Promise.all ===");
        const result = await Promise.all([
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve("성공");
            }, 2000);
          }),
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve("성공");
            }, 3000);
          }),
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve("성공");
            }, 1000);
          }),
        ]);
        console.log(result);
        console.timeEnd("=== 한방 Promise.all ===");
      };

Promise.all()의 결과값은 Promise와 마찬가지로 배열에 '성공' 3개가 나란히 들어온다. Promise와 같은 기능을 하지만, 시간은 훨씬 단축시켜준다!

Promise.all()을 사용한 다중 이미지 업로드

여러 이미지를 한번에 올리기 위해 promise.all()과 map을 함께 사용했다.

// import 부분 생략

// CREATE_BOARD API gql 코드 생략
// UPLOAD_FILE API gql 코드 생략

export default function ImageUploadPage() {
  const [imageUrls, setImageUrls] = useState(["", "", ""]);
  // 이미지 url 3개가 들어갈 배열 만들기
  const [files, setFiles] = useState<File[]>([]);

  const [uploadFile] = useMutation<
    Pick<IMutation, "uploadFile">,
    IMutationUploadFileArgs
  >(UPLOAD_FILE);

  const [나의함수] = useMutation(CREATE_BOARD);

  const onClickSubmit = async () => {
    // Promise.all 사용!
     const results = await Promise.all([
       uploadFile({ variables: { file: files[0] } }),
       uploadFile({ variables: { file: files[1] } }),
       uploadFile({ variables: { file: files[2] } }),
     ]);
     console.log(results); // [resultFile0, resultFile1, resultFile2]
    
    // map 사용!
     const resultUrls = results.map((el) => (el ? el.data?.uploadFile.url : "")); // [dog1.jpg, dog2.jpg, dog3.jpg]

    const result = await 나의함수({
      variables: {
        createBoardInput: {
          writer: "철수",
          password: "1234",
          title: "안녕하세요",
          contents: "반갑습니다",
          images: resultUrls, // [url0, url1, url2]
        },
      },
    });
    console.log(result);
  };

  const onChangeFile =
    (index: number) => async (event: ChangeEvent<HTMLInputElement>) => {
      const file = event.target.files?.[0]; // <input type="file" multiple /> 에서 multiple 속성으로 여러 개 드래그 가능
      if (!file) return;
      console.log(file);

      // 2. 임시URL 생성 => (진짜URL - 다른 브라우저에서도 접근 가능)
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = (event) => {
        if (typeof event.target?.result === "string") {
          console.log(event.target?.result); 

          const tempUrls = [...imageUrls];
          tempUrls[index] = event.target?.result;
          setImageUrls(tempUrls);

          const tempFiles = [...files];
          tempFiles[index] = file;
          setFiles(tempFiles);
    };

  return (
    <>
      <input type="file" onChange={onChangeFile(0)} />
      <input type="file" onChange={onChangeFile(1)} />
      <input type="file" onChange={onChangeFile(2)} />
      <img src={imageUrls[0]} />
      <img src={imageUrls[1]} />
      <img src={imageUrls[2]} />

      <button onClick={onClickSubmit}>게시글 등록하기</button>
    </>
  );
}

여기서 반복되는 부분의 소스코드를 반복문을 통해 간결하게 바꿔보았다.

const onClickSubmit = async () => {
    // 1. Promise.all 썼을 때
    // const results = await Promise.all([
    //   uploadFile({ variables: { file: files[0] } }),
    //   uploadFile({ variables: { file: files[1] } }),
    //   uploadFile({ variables: { file: files[2] } }),
    // ]);
    // console.log(results); // [resultFile0, resultFile1, resultFile2]
    // const resultUrls = results.map((el) => (el ? el.data?.uploadFile.url : "")); // [dog1.jpg, dog2.jpg, dog3.jpg]

    // 2. Promise.all 썼을 때 - 리팩토링 
    // files - [File0, File1, File2]
    // files.map(el => uploadFile({ variables: { file: el } })) // [uploadFile({ ...: File0 }), uploadFile({ ...: File1 }), uploadFile({ ...: File2 })]
    const results = await Promise.all(
      files.map((el) => el && uploadFile({ variables: { file: el } }))
    );
    console.log(results); // [resultFile0, resultFile1, resultFile2]
    const resultUrls = results.map((el) => (el ? el.data?.uploadFile.url : "")); // [dog1.jpg, dog2.jpg, dog3.jpg]

LazyLoad vs PreLoad

LazyLoad

페이지 렌더링 시 중요하지 않은 리소스의 로딩을 나중으로 미루는 기술이다.

예를 들어 이미지가 10장이 넘는 페이지가 있다고 하면, 한번에 10장 모두 다 로드될 때까지 기다리면, 페이지의 로딩이 길어질 것이다.

하지만, 맨 위의 화면에 보이는 이미지만 로드한 후에 스크롤을 내리면서 이미지가 보여져야 할 때 이미지를 로드한다면, 데이터 낭비를 막을 수 있다!

PreLoad

PreLoad는 페이지를 읽을 때 미리 리소스를 받아놓는 기술이다. LazyLoad에서의 예시와 같이 이미지가 10장이 넘는 페이지가 있다고 해보자. PreLoad의 경우 모든 데이터들을 미리 로드해놓고 대기하는 방식이라고 보면 된다.

다음은 다른 페이지로 이동하기 전에 이미지를 미리 받아오는 기능을 구현한 소스코드다.

import { useRouter } from "next/router";
import { useEffect } from "react";

const qqq = [];

export default function ImagePreloadPage(): JSX.Element {
  const router = useRouter();

  useEffect(() => {
    // 이미지 태그 생성
    const img = new Image();
    // img.src = "용량큰배너이미지.jpg";
    img.src = "/IMG_9822.PNG";
    // img 태그가 onload 되었을 때 
    // 이미지들을 qqq 배열에 넣어줌
    img.onload = () => {
      qqq.push(img);
    };
  });

  const onClickMove = (): void => {
    void router.push("/section31/31-09-image-preload-moved");
  };

  return <button onClick={onClickMove}>페이지 이동하기</button>;
}

Prefetch

게시글 목록을 불러오고, 목록 중 하나에 마우스를 가져다 놨을 때 미리 게시글 데이터를 불러오는 기능을 구현해보았다.

// import 부분 생략

const FETCH_BOARDS = gql`
  query fetchBoards($page: Int) {
    fetchBoards(page: $page) {
      _id
      writer
      title
      contents
    }
  }
`;

const FETCH_BOARD = gql`
  query fetchBoard($boardId: ID!) {
    fetchBoard(boardId: $boardId) {
      _id
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutedPage() {
  const router = useRouter();
  const client = useApolloClient();
  const { data, refetch } = useQuery<
    Pick<IQuery, "fetchBoards">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS);

  console.log(data?.fetchBoards);

 // cache에 해당 데이터 저장되고, 페이지 이동하면 백엔드에 가지 않고, cache에 있는 것을 가지고 옴.
  const prefetchBoard = (boardId: string) => async () => {
    await client.query({
      query: FETCH_BOARD,
      variables: { boardId },
    });
  };

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

  return (
    <>
      {data?.fetchBoards.map((el) => (
        <div key={el._id}>
          <span style={{ margin: "10px" }}>{el.writer}</span>
				{/* 마우스를 올렸을 때 data를 받아오도록 */}
          <span
            style={{ margin: "10px" }}
            onMouseOver={prefetchBoard(el._id)}
            onClick={onClickMove(el._id)}
          >
            {el.title}
          </span>
        </div>
      ))}
    </>
  );
}

미리 게시글 데이터를 불러놓으면, 게시글을 클릭해서 상세 페이지로 들어갔을 때 더 빠르게 게시글 데이터를 불러올 수 있게 된다!

이미지 성능 관련 유용한 사이트

Google PageSpeed Insights

실제 배포를 진행하고 나서, 내가 배포한 페이지의 개선할 점을 찾을때 유용한 사이트다.

이미지 Webp 확장자

png, jpeg와 같은 이미지 확장자다. 이미지 서버의 부담을 줄이고, 서버비를 아끼기 위해 구글에서 만들었다.

Webp의 장점

Webp는 GIF, PNG, JPEG 확장자 모두 대체 가능한 확장자이고, 이미지를 파일을 압축했을 때 기존 PNG, JPEG보다 약 30%정도 용량을 줄일 수 있다!

Webp 확장자 변환하기

Webp 확장자 변환 사이트

사용방법!
Select File 클릭 > 어떤 파일로 변환할지 선택(Webp 선택) > convert 클릭

이미지 라이브러리

1. React-lazy-load: 스크롤이 내려가면서 해당 이미지가 들어가 있는 컴포넌트가 등장할 때 이미지 다운로드
2. React-dropzone: 드래그 앤 드랍
3. React-avator-editor
4. ant-design
5. React-beautiful-dnd

참고! 그 외의 유용한 사이트!
wappalyzer(크롬 확장 프로그램): 특정 페이지에서 사용하는 기술 알 수 있다.
코드너리: 기업별 쓰는 기술

---