React와 pdf-lib를 사용한 서버리스 PDF 병합 및 편집기 구축 (백엔드 없이!)

Source: Dev.to

Introduction

저는 일주일에 두 번 정도 PDF를 합칩니다. Adobe 구독료를 낼 정도는 아니지만, 온라인 도구 때문에 불편함을 겪고는 있습니다.

흔히 하는 일은 다음과 같습니다:

• “merge pdf free” 라고 구글 검색하기.
• 개인 은행 명세서를 무작위 서버에 업로드하기.
• 결과를 다운로드하려는 순간 “Daily Limit Reached” 팝업이 뜨기.

이게 지겨워졌습니다. 최신 브라우저와 WebAssembly는 클라이언트‑사이드에서 PDF 조작을 충분히 빠르게 처리할 수 있기 때문에 백엔드가 더 이상 필요하지 않습니다. 그래서 Simple VaultPDF를 만들었습니다.

The Tech Stack

• Framework: React (Vite)
• PDF Engine: pdf-lib (병합/분할용) & pdf.js (렌더링용)
• OCR: tesseract.js
• State Management: React 훅만 사용, 간단하게 유지

The Code (How it works)

import { PDFDocument } from 'pdf-lib';

const mergeFiles = async (files) => {
  const mergedPdf = await PDFDocument.create();

  for (const file of files) {
    const fileBuffer = await file.arrayBuffer();

    const pdf = await PDFDocument.load(fileBuffer);

    const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());

    copiedPages.forEach((page) => mergedPdf.addPage(page));
  }

  const pdfBytes = await mergedPdf.save();
  return pdfBytes;
};

Why Local‑First?

• Zero Server Costs: AWS나 클라우드 함수에서 처리하지 않음.
• Privacy: 데이터가 사용자 기기를 떠나지 않으므로 제3자 서버를 신뢰할 필요가 없음.
• Speed: 업로드·다운로드 지연을 없앰.

The Result

저는 방금 이 확장 프로그램을 Chrome 웹 스토어에 공개했습니다. 결제벽이 싫거나 pdf-lib가 실제 확장 프로그램에서 어떻게 동작하는지 보고 싶다면 한 번 사용해 보세요.

Simple VaultPDF on Chrome Web Store

버그를 발견하면 알려 주세요—대용량 파일에 대한 메모리 사용량을 아직 최적화하고 있습니다.

Happy coding!