개념

URL.createObjectURL(file)은 브라우저 메모리에 파일 데이터를 참조하는 임시 URL을 생성합니다. 이 URL은 실제 파일 내용을 브라우저 메모리에 저장하고 있어 상당한 메모리를 소비합니다.

메모리 누수 문제

  1. 메모리 점유: 생성된 URL은 명시적으로 해제하기 전까지 브라우저 메모리에 계속 남아있습니다.
  2. 자동 해제 안됨: 일반 변수와 달리 가비지 컬렉터가 자동으로 회수하지 않습니다.
  3. 누적 문제: 여러 PDF를 처리할 경우 해제하지 않은 URL 객체들이 누적되어 메모리 부족 현상을 일으킵니다.

해결 방법: URL.revokeObjectURL

// 메모리에 URL 객체 생성
const pdfUrl = URL.createObjectURL(file);

try {
  // URL 사용
  const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
  // 필요한 작업 수행
} finally {
  // 작업 완료 후 URL 객체 해제
  URL.revokeObjectURL(pdfUrl);
}

동작 원리

  1. 참조 해제: URL.revokeObjectURL()는 브라우저에게 "이 URL이 가리키는 데이터를 더 이상 유지할 필요가 없다"고 알립니다.
  2. 메모리 회수: 호출 즉시 브라우저는 해당 URL과 연결된 메모리 자원을 해제합니다.
  3. finally 블록 사용: 오류 발생 여부와 상관없이 항상 실행되어 메모리 누수를 방지합니다.

성능 개선 효과

  1. 메모리 사용량 감소: 대용량 PDF 파일을 처리할 때 특히 중요합니다.
  2. 장기 실행 안정성: 사용자가 여러 PDF를 계속 처리해도 메모리 누수가 발생하지 않습니다.
  3. 브라우저 성능 유지: 메모리 사용량이 제한되어 브라우저 전체 성능이 유지됩니다.

이런 메모리 관리는 특히 대용량 파일을 다루거나 여러 파일을 연속해서 처리하는 웹 애플리케이션에서 매우 중요합니다.