Endo Report

리포트 편집 화면에서 검사 이미지를 한 번에 모두 로딩하여 초기 로딩 시간이 길어지고 메모리 사용량이 과도하게 증가. 수백 장의 의료 이미지를 한 번에 렌더링하면서 브라우저 성능 저하 발생.

TanStack Query의 useInfiniteQuery hook을 활용한 페이지네이션 기반 무한 스크롤 구현. Intersection Observer API 기반 센티넬 요소를 통한 자동 다음 페이지 로딩. 역순 정렬 시 현재까지 스크롤된 이미지 개수만큼 역순으로 refetch하여 중복 fetching 방지.

advantages

초기 로딩 속도 개선, 메모리 사용량 감소, 네트워크 대역폭 효율적 사용

disadvantages

페이지네이션 로직 추가로 코드 복잡도 증가, 역순 정렬 시 추가 refetch 필요

rationale

의료 이미지의 특성상 고해상도 이미지를 다수 다루므로, 성능 최적화가 사용성에 더 중요하다고 판단

페이지네이션으로 인한 초기 로딩 데이터량 약 90% 감소 (전체 이미지 → 첫 10개).

TanStack Query의 useInfiniteQuery를 활용한 페이지네이션 패턴 이해. Intersection Observer API를 통한 효율적인 스크롤 이벤트 처리 방법 습득. 대용량 데이터 렌더링 시 가상화(Virtualization)와 페이지네이션의 트레이드오프 이해.

vue3-html2pdf 라이브러리를 사용한 PDF 변환 시 한글 단어가 중간에서 줄바꿈되어 텍스트 가독성 저하. HTML에서는 정상이던 띄어쓰기가 PDF에서 어색하게 표시. SVG의 linear gradient가 PDF에서 렌더링되지 않고 빈 공간으로 표시.

- CSS word-break: keep-all 속성을 소견 텍스트에 적용하여 단어 단위 줄바꿈 보장. - CSS white-space: pre 속성으로 모든 공백과 줄바꿈을 원본 그대로 보존. - PDF 변환용 solid color SVG 아이콘을 별도로 생성하여 조건부 렌더링.

advantages

텍스트 정확성 보장으로 의료 문서로서의 신뢰성 확보, 추가 라이브러리 없이 CSS 속성만으로 해결하여 번들 크기 유지

disadvantages

word-break: keep-all로 인해 긴 단어가 있을 경우 레이아웃이 넓어질 수 있음, PDF 전용 아이콘 추가로 아이콘 관리 포인트 증가

PDF 변환 시 텍스트 깨짐 이슈 0건으로 감소.

HTML to Canvas 변환 시 CSS 렌더링 차이에 대한 이해. 브라우저 렌더링과 Canvas 기반 렌더링의 차이점 학습. SVG gradient가 canvas에서 지원되지 않는 한계 인식 및 우회 전략 수립.