(not planned) feat: 썸네일 이미지 로딩 개선_240510

[dusunax]

• 이전 작업 - #8

Todo

• [ ] 스토리지에 PDF 슬라이드 썸네일 이미지 보관 // 이미지 리사이징
  • PDF 썸네일의 경우 > 리소스 다운로드 자체에 시간이 걸리기 때문에, 썸네일 이미지를 생성해서 외부에 저장하는 과정이 필요할 것으로 보입니다.
• [ ] 버그픽스 #9
• [ ] 페이지네이션 => 추후 작업

---

이미지 리사이징_240510

기존 PDFThumbnail 개선하기

• [x] 첫 페이지를 썸네일로 출력하던 react-pdf 제거
• [ ] 각 pdf 파일의 1페이지를 리사이징하여 저장
• [ ] pdf명, 썸네일, 페이지 수를 저장할 db 추가
• [ ] 리스트 썸네일 교체 후 퍼포먼스 개선 확인

기존 썸네일 컴포넌트 문제점

(퍼포먼스 악화) pdf파일 전체를 읽은 후 리스트 컴포넌트 로딩

• 문제2-a. 리스트 아이템 출력을 위해 각 pdf파일의 다운로드가 필요합니다 (불필요한 리소스 다운로드)
• 문제2-b. 썸네일 이미지의 로딩이 지연됩니다
• 문제2-c. 썸네일 태그 박스의 페이지 수 numPages를 출력하기 까지의 시간이 지연됩니다.
• pdf 타입의 파일이 많아질 수록 전체 리스트의 출력이 느려집니다.

작업

PDFThumbnail 컴포넌트 as is

"use client";
import { useState } from "react";
import { Document, Page, pdfjs } from "react-pdf"; // 🚫 deprecated 라이브러리

import { FileType } from "@/app/gallery/page";
import ThumbnailTagBox from "./ThumbnailTagBox";

// 🚫 cdn 리소스를 다운로드
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; 

export default function PDFThumbnail({ file }: { file: FileType }) {
  const [numPages, setNumPages] = useState<number>(0);

  function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
    setNumPages(numPages); // 🚫 pdf파일이 로딩된 후 연산된 page 수를 출력
  }

  return (
    <div
      className="flex-1 rounded-t-md overflow-hidden h-[230px] p-0 flex justify-center relative"
      style={{ fontSize: 0 }}
    >
      <Document file={file.filePath} onLoadSuccess={onDocumentLoadSuccess}> 
        <Page height={240} pageNumber={1} /> // 🚫 pdf파일이 로딩된 후 첫 페이지를 출력
      </Document>
      <ThumbnailTagBox file={file} numPages={numPages} />
    </div>
  );
}

Item 만들기~

{
  id: string; // uuid
  kind: string; // "pdf" | "image"
  name: string;
  info: {
    pageCount: number;
  };
  thumbnail: {
    base64: string;
    image240: string;
    image420: string; // default
    image640: string;
  };
};

썸네일 구하기

• FileReader를 사용하여 구현하려 했으나 PDF를 처리하는 것이 복잡합니다.
  • PDF 파일의 내용을 해석하고 페이지를 구분하기 위해서는 react-pdf를 다시 설치했습니다.
  • https://www.npmjs.com/package/react-pdf

[dusunax]

react-pdf

https://www.npmjs.com/package/react-pdf

React

• To use the latest version of React-PDF, your project needs to use React 16.8 or later.

React version	Newest compatible React-PDF version
≥16.8	latest
≥16.3	5.x
≥15.5	4.x

Next.js

If you use Next.js, you may need to add the following to your next.config.js:

module.exports = {
+ webpack: (config) => {
+   config.resolve.alias.canvas = false;

+   return config;
+ },
}

• [ ] PDF 파일의 첫 페이지 다운로드하기
• [ ] PDF 파일의 첫 페이지 리사이징 해서 다운로드하기
• [ ] PDF 파일의 첫 페이지 리사이징 해서 스토리지에 저장하기

[dusunax]

6월 일정으로 인해, 5월말까지 1차적으로 작업을 끝내야 합니다!

• PDF 이미지 최적화를 후순위로 미루고, 유튜브와 블로그 embed 작업을 먼저 진행할 것
• 예상 작업 가능 시간: 25일 오후, 26일 오후