리소스 최적화를 위한 이미지 타입 변경

문제 상황

• 기존에는 이미지를 전송할 때 FileReader를 이용해 Base64로 인코딩하였습니다.

• 이 방식은 텍스트 기반의 아스키 코드로 변환하는 과정에서

  원본 데이터보다 약 33% 더 많은 메모리를 소모하며, 브라우저의 JS Heap 메모리 부하를 일으켰습니다

해결 방안

• 데이터 타입 변환

  파일 데이터를 Base64 문자열 대신 이진 데이터인 Blob(Binary Large Object) 형태로 관리

• 객체 URL 참조

  createObjectURL을 활용해 브라우저 메모리에 있는 데이터에 직접 접근할 수 있는 단기 URL을 생성하여 불필요한 인코딩/디코딩 과정을 제거

• 메모리 관리

  이미지 사용이 끝난 후 revokeObjectURL을 호출하여 명시적으로 메모리 누수(Memory Leak) 방지

개선 사항

• 브라우저 메모리(JS Heap) 25%이상 개선

Snapshot2 - 개선 전 메모리 사용량 (13), Snapshot3 - 개선 후 메모리 사용량 (9)