Files
tech-log-frontend/public/media/fetch-strategy-boundary.svg
T

58 lines
3.2 KiB
XML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="420" viewBox="0 0 1080 420">
<title>Fetch Join과 Batch Fetch의 페이징 경계</title>
<desc>Fetch Join은 전체 조인 결과를 읽은 뒤 메모리에서 20개를 고른다. Batch Fetch는 부모 20개를 먼저 고른 뒤 해당 ID의 컬렉션만 조회한다.</desc>
<rect width="1080" height="420" rx="18" fill="#FCFCFB"/>
<style>
.label { font: 600 18px Pretendard, sans-serif; fill: #17181B; }
.text { font: 500 15px Pretendard, sans-serif; fill: #3F4249; }
.muted { font: 500 13px Pretendard, sans-serif; fill: #686B72; }
.box { fill: #F7F7F5; stroke: #D9DBDE; stroke-width: 1.5; }
.bad { fill: #FFF4E8; stroke: #D99A4E; stroke-width: 1.5; }
.good { fill: #ECF6F2; stroke: #4F927F; stroke-width: 1.5; }
.arrow { stroke: #A5A8AE; stroke-width: 2; fill: none; marker-end: url(#arrow); }
</style>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
<path d="M0 0 L8 4 L0 8 Z" fill="#A5A8AE"/>
</marker>
</defs>
<text class="label" x="40" y="54">Collection Fetch Join</text>
<rect class="box" x="40" y="80" width="190" height="76" rx="10"/>
<text class="text" x="66" y="112">목록 + 컬렉션 JOIN</text>
<text class="muted" x="66" y="136">부모 × 자식 행</text>
<path class="arrow" d="M230 118 H286"/>
<rect class="bad" x="286" y="80" width="230" height="76" rx="10"/>
<text class="text" x="312" y="112">전체 Join 결과 로드</text>
<text class="muted" x="312" y="136">DB LIMIT 없음 · 1,961행</text>
<path class="arrow" d="M516 118 H572"/>
<rect class="box" x="572" y="80" width="220" height="76" rx="10"/>
<text class="text" x="598" y="112">부모 엔티티 복원</text>
<text class="muted" x="598" y="136">중복 부모 정리</text>
<path class="arrow" d="M792 118 H848"/>
<rect class="bad" x="848" y="80" width="192" height="76" rx="10"/>
<text class="text" x="874" y="112">메모리에서 20개</text>
<text class="muted" x="874" y="136">페이지 경계가 뒤에 있음</text>
<line x1="40" y1="210" x2="1040" y2="210" stroke="#E2E3E1"/>
<text class="label" x="40" y="258">Parent Paging + Batch Fetch</text>
<rect class="good" x="40" y="284" width="230" height="76" rx="10"/>
<text class="text" x="66" y="316">부모 목록 LIMIT 20</text>
<text class="muted" x="66" y="340">정렬과 페이지 경계 확정</text>
<path class="arrow" d="M270 322 H342"/>
<rect class="box" x="342" y="284" width="210" height="76" rx="10"/>
<text class="text" x="368" y="316">부모 ID 20개</text>
<text class="muted" x="368" y="340">현재 페이지 집합</text>
<path class="arrow" d="M552 322 H624"/>
<rect class="good" x="624" y="284" width="220" height="76" rx="10"/>
<text class="text" x="650" y="316">컬렉션 IN 조회</text>
<text class="muted" x="650" y="340">현재 부모만 로드</text>
<path class="arrow" d="M844 322 H900"/>
<rect class="box" x="900" y="284" width="140" height="76" rx="10"/>
<text class="text" x="926" y="316">화면 조립</text>
<text class="muted" x="926" y="340">비용 상한 설명 가능</text>
<text class="muted" x="40" y="396">관찰: 페이징이 적용되는 지점이 부모 조회 앞으로 이동한다.</text>
</svg>