feat: 문서 구조 변경 및 tech-visual 스킬 추가

2026-09-04 18:20:00 +09:00
parent 43901f0abf
commit 2efb7ee1f2
683 changed files with 61180 additions and 10479 deletions
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="250" viewBox="0 0 700 250" role="img" aria-labelledby="diagram-title diagram-description">
+<title id="diagram-title">컬렉션 fetch join은 부모 행을 자식 수만큼 늘린다</title>
+<desc id="diagram-description">왼쪽 부모 테이블에서 출발한 조인이 가운데를 지나면서 부모 한 행을 자식 수만큼 반복한 행 묶음으로 만든다. 그 묶음이 오른쪽 전송 단계로 그대로 나간다. 아래쪽에서 Hibernate 6 이상이 루트 엔티티를 중복 제거해 결과 리스트를 부모 수로 되돌리지만, 늘어난 행은 SQL과 전송 단계에 남아 있다. 그래서 리스트 크기로는 이 증가가 보이지 않고 조인 카디널리티나 실행계획의 실제 행수로 확인해야 한다.</desc>
+<defs>
+  <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+    <path d="M 0 0 L 10 5 L 0 10 z" />
+  </marker>
+  <pattern id="hatch" width="7" height="7" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
+    <line x1="0" y1="0" x2="0" y2="7" stroke="#9ca3af" stroke-width="3" />
+  </pattern>
+  <style>
+    :root { color-scheme: light; }
+    text { font-family: Inter, Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; fill: #111827; }
+    .canvas { fill: #ffffff; }
+    .group-box { fill: #ffffff; stroke: #9ca3af; stroke-width: 1.4; stroke-dasharray: 7 5; }
+    .group-label-bg { fill: #ffffff; }
+    .group-label { font-size: 13px; font-weight: 650; fill: #374151; }
+    .edge { fill: none; stroke: #374151; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; marker-end: url(#arrow); }
+    .edge.dashed { stroke-dasharray: 7 5; }
+    .edge.primary { stroke: #2563eb; stroke-width: 2.2; }
+    .edge.muted { stroke: #9ca3af; }
+    .node { fill: #ffffff; stroke: #4b5563; stroke-width: 1.7; }
+    .node.primary { stroke: #2563eb; stroke-width: 2.4; }
+    .node.muted { stroke: #9ca3af; fill: #f9fafb; }
+    .node.marked { stroke: #4b5563; stroke-width: 2.4; stroke-dasharray: 5 4; }
+    .label { font-size: 14px; font-weight: 650; text-anchor: middle; }
+    .fill-kept { fill: #2563eb; stroke: none; }
+    .fill-drop { fill: url(#hatch); stroke: #9ca3af; stroke-width: 1; }
+    .fill-none { fill: #ffffff; stroke: #d1d5db; stroke-width: 1; }
+  </style>
+</defs>
+<rect class="canvas" width="700" height="250" />
+<rect class="node " x="40" y="70" width="150" height="80" rx="7" />
+<text class="label" x="115.0" y="115.0">부모 테이블</text>
+<rect class="node primary" x="255" y="60" width="170" height="100" rx="7" />
+<text class="label" x="340.0" y="115.0">조인</text>
+<rect class="node " x="490" y="70" width="170" height="80" rx="7" />
+<text class="label" x="575.0" y="115.0">전송 행</text>
+<rect class="node muted" x="490" y="175" width="170" height="60" rx="7" />
+<text class="label" x="575.0" y="210.0">결과 리스트</text>
+<polyline class="edge " points="190,110 255,110" />
+<polyline class="edge primary" points="425,110 490,110" />
+<polyline class="edge dashed muted" points="575,150 575,175" />
+</svg>