donghyeon.kang/document-haness
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 가상화 문서들 추가

Browse Source
This commit is contained in:
DongHyeonka
2026-09-10 08:54:05 +09:00
parent e9f6a93327
commit 43e1aadef0
695 changed files with 153404 additions and 12754 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/n+1liner/final/assets/diagrams/strategy-journey/strategy-journey.alt.md
+25
View File
@@ -0,0 +1,25 @@
# 두 형제 문제는 Fetch Join에서 합류한 뒤 단계별 해법으로 최종 구조가 된다
## Alternative text
요구사항과 모델에서 기준선으로 진행한 뒤 N1과 N2로 분기하고 Fetch Join에서 합류해, 실패와 다섯 개선 단계를 거쳐 최종 피드 조회 구조에 이르는 흐름도.
## Long description
왼쪽에서 과제 요구사항, 도메인·데이터 모델, 최초 피드 조회 기준선 순으로 시작한다. 기준선에서 컬렉션 N+1(N1)과 User·Page 연관의 숨은 쿼리(N2)가 서로 앞뒤가 아닌 형제 문제로 동시에 갈라지고, 두 경로는 Fetch Join 시도에서 합류한다. 이 시도는 다중 컬렉션·페이징 실패로 이어진다. 마지막 노드는 Batch Fetch, DTO Projection, 아이템별 Top-3, Keyset Pagination, 가시성 조건 인덱싱을 거쳐 최종 피드 조회 구조에 도달하는 순서를 담는다.
## Elements and evidence
- **요구사항·모델·기준선** (journey-stage): 전체 여정은 과제 요구사항에서 도메인·데이터 모델을 거쳐 최초 피드 조회 기준선으로 시작한다. Evidence: L23–L26, L42–L42.
- **컬렉션 N+1 (N1)** (problem): 기준선에서 N2와 동시에 나타나는 컬렉션 조회 문제다. Evidence: L32–L34.
- **User·Page 숨은 쿼리 (N2)** (problem): 기준선에서 N1과 동시에 나타나는 User·Page 연관의 숨은 쿼리 문제다. Evidence: L32–L34.
- **Fetch Join → 실패** (query-strategy): N1과 N2가 Fetch Join 시도에서 합류한 뒤 다중 컬렉션·페이징 실패로 이어진다. Evidence: L34–L35.
- **후속 개선 → 최종 구조** (query-strategy): 실패 뒤 다섯 조회 전략 단계가 명시된 순서로 발전해 최종 피드 조회 구조를 만든다. Evidence: L32–L32, L35–L36.
## Relationships
- **요구사항·모델·기준선 → 컬렉션 N+1 (N1):** 동시 분기. Evidence: L32–L33.
- **요구사항·모델·기준선 → User·Page 숨은 쿼리 (N2):** 동시 분기. Evidence: L32–L33.
- **Fetch Join → 실패 → 후속 개선 → 최종 구조:** 실패 뒤 단계별 개선. Evidence: L34–L36.
- **컬렉션 N+1 (N1) → Fetch Join → 실패:** 합류. Evidence: L34–L34.
- **User·Page 숨은 쿼리 (N2) → Fetch Join → 실패:** 합류. Evidence: L34–L34.
docs/n+1liner/final/assets/diagrams/strategy-journey/strategy-journey.d2
+23
View File
@@ -0,0 +1,23 @@
# 두 형제 문제는 Fetch Join에서 합류한 뒤 단계별 해법으로 최종 구조가 된다
# Question: 과제 요구사항에서 시작해 기준선의 N1·N2 분기와 실패·개선을 거쳐 최종 피드 조회 구조는 어떻게 발전하는가?
direction: right
n0: "요구사항·모델·기준선" {
shape: rectangle
}
n1: "컬렉션 N+1 (N1)" {
shape: rectangle
}
n2: "User·Page 숨은 쿼리 (N2)" {
shape: rectangle
}
n3: "Fetch Join → 실패" {
shape: rectangle
}
n4: "후속 개선 → 최종 구조" {
shape: rectangle
}
n0 -> n1: "동시 분기"
n0 -> n2: "동시 분기"
n1 -> n3: "합류"
n2 -> n3: "합류"
n3 -> n4: "실패 뒤 단계별 개선"
docs/n+1liner/final/assets/diagrams/strategy-journey/strategy-journey.dot
+15
View File
@@ -0,0 +1,15 @@
digraph techviz {
graph [rankdir=LR, splines=ortho, nodesep=0.55, ranksep=0.85];
node [fontname=Helvetica, fontsize=11, margin="0.18,0.12", style="rounded,filled", fillcolor=white, color="#2d4357", penwidth=1.5];
edge [fontname=Helvetica, fontsize=10, color="#364b5f", penwidth=1.4, arrowsize=0.75];
n0 [label="요구사항·모델·기준선", shape=box, style="rounded,filled"];
n1 [label="컬렉션 N+1 (N1)", shape=box, style="rounded,filled"];
n2 [label="User·Page 숨은 쿼리 (N2)", shape=box, style="rounded,filled"];
n3 [label="Fetch Join → 실패", shape=box, style="rounded,filled"];
n4 [label="후속 개선 → 최종 구조", shape=box, style="rounded,filled"];
n0 -> n1 [label="동시 분기", style=solid];
n0 -> n2 [label="동시 분기", style=solid];
n1 -> n3 [label="합류", style=solid];
n2 -> n3 [label="합류", style=solid];
n3 -> n4 [label="실패 뒤 단계별 개선", style=solid];
}
docs/n+1liner/final/assets/diagrams/strategy-journey/strategy-journey.drawio
+12 -12
View File
@@ -5,27 +5,27 @@
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="n_requirements-model-baseline" value="요구사항·모델·기준선&lt;br/&gt;1 과제 요구사항&lt;br/&gt;2 도메인·데이터 모델&lt;br/&gt;3 최초 피드 조회" tooltip="전체 여정은 과제 요구사항에서 도메인·데이터 모델을 거쳐 최초 피드 조회 기준선으로 시작한다. | Evidence: L25-L25" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;" vertex="1" parent="1">
<mxCell id="n_requirements-model-baseline" value="요구사항·모델·기준선&lt;br/&gt;1 과제 요구사항&lt;br/&gt;2 도메인·데이터 모델&lt;br/&gt;3 최초 피드 조회" tooltip="전체 여정은 과제 요구사항에서 도메인·데이터 모델을 거쳐 최초 피드 조회 기준선으로 시작한다. | Evidence: L23-L26, L42-L42" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;" vertex="1" parent="1">
<mxGeometry x="70.0" y="165.5" width="150.0" height="105.0" as="geometry"/>
</mxCell>
<mxCell id="n_collection-n-plus-one" value="컬렉션 N+1 (N1)&lt;br/&gt;유형: 컬렉션 N+1&lt;br/&gt;발생: 기준선과 동시에&lt;br/&gt;관계: N2와 형제 문제&lt;br/&gt;진행: Fetch Join으로 합류" tooltip="기준선에서 N2와 동시에 나타나는 컬렉션 조회 문제다. | Evidence: L25-L25" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;" vertex="1" parent="1">
<mxGeometry x="383.5" y="60.0" width="167.0" height="122.0" as="geometry"/>
<mxCell id="n_collection-n-plus-one" value="컬렉션 N+1 (N1)&lt;br/&gt;유형: 컬렉션 N+1&lt;br/&gt;발생: 기준선과 동시에&lt;br/&gt;관계: N2와 형제 문제&lt;br/&gt;진행: Fetch Join 합류" tooltip="기준선에서 N2와 동시에 나타나는 컬렉션 조회 문제다. | Evidence: L32-L34" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;" vertex="1" parent="1">
<mxGeometry x="390.5" y="60.0" width="153.0" height="122.0" as="geometry"/>
</mxCell>
<mxCell id="n_hidden-to-one-queries" value="User·Page 숨은 쿼리 (N2)&lt;br/&gt;유형: User·Page 숨은 쿼리&lt;br/&gt;발생: 기준선과 동시에&lt;br/&gt;관계: N1과 형제 문제&lt;br/&gt;진행: Fetch Join으로 합류" tooltip="기준선에서 N1과 동시에 나타나는 User·Page 연관의 숨은 쿼리 문제다. | Evidence: L25-L25" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;" vertex="1" parent="1">
<mxCell id="n_hidden-to-one-queries" value="User·Page 숨은 쿼리 (N2)&lt;br/&gt;유형: User·Page 숨은 쿼리&lt;br/&gt;발생: 기준선과 동시에&lt;br/&gt;관계: N1과 형제 문제&lt;br/&gt;진행: Fetch Join 합류" tooltip="기준선에서 N1과 동시에 나타나는 User·Page 연관의 숨은 쿼리 문제다. | Evidence: L32-L34" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;" vertex="1" parent="1">
<mxGeometry x="380.0" y="254.0" width="174.0" height="122.0" as="geometry"/>
</mxCell>
<mxCell id="n_fetch-join-failure" value="Fetch Join → 실패&lt;br/&gt;1 N1·N2 합류&lt;br/&gt;2 다중 컬렉션·페이징 실패" tooltip="N1과 N2가 Fetch Join 시도에서 합류한 뒤 다중 컬렉션·페이징 실패로 이어진다. | Evidence: L25-L25" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;strokeColor=#d97706;fillColor=#fffdf5;" vertex="1" parent="1">
<mxCell id="n_fetch-join-failure" value="Fetch Join → 실패&lt;br/&gt;1 N1·N2 합류&lt;br/&gt;2 다중 컬렉션·페이징 실패" tooltip="N1과 N2가 Fetch Join 시도에서 합류한 뒤 다중 컬렉션·페이징 실패로 이어진다. | Evidence: L34-L35" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;strokeColor=#d97706;fillColor=#fffdf5;" vertex="1" parent="1">
<mxGeometry x="714.0" y="174.0" width="150.0" height="88.0" as="geometry"/>
</mxCell>
<mxCell id="n_improvement-chain" value="후속 개선 → 최종 구조&lt;br/&gt;1 Batch Fetch&lt;br/&gt;2 DTO Projection&lt;br/&gt;3 아이템별 Top-3&lt;br/&gt;4 Keyset Pagination&lt;br/&gt;5 가시성 조건 인덱싱&lt;br/&gt;6 최종 피드 조회 구조" tooltip="실패 뒤 다섯 조회 전략 단계가 명시된 순서로 발전해 최종 피드 조회 구조를 만든다. | Evidence: L25-L25" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;strokeColor=#2563eb;strokeWidth=2;" vertex="1" parent="1">
<mxCell id="n_improvement-chain" value="후속 개선 → 최종 구조&lt;br/&gt;1 Batch Fetch&lt;br/&gt;2 DTO Projection&lt;br/&gt;3 아이템별 Top-3&lt;br/&gt;4 Keyset Pagination&lt;br/&gt;5 가시성 조건 인덱싱&lt;br/&gt;6 최종 피드 조회 구조" tooltip="실패 뒤 다섯 조회 전략 단계가 명시된 순서로 발전해 최종 피드 조회 구조를 만든다. | Evidence: L32-L32, L35-L36" style="whiteSpace=wrap;html=1;rounded=1;strokeWidth=2;fontSize=14;fontStyle=1;fillColor=#ffffff;strokeColor=#2d4357;verticalAlign=middle;strokeColor=#2563eb;strokeWidth=2;" vertex="1" parent="1">
<mxGeometry x="1024.0" y="140.0" width="167.0" height="156.0" as="geometry"/>
</mxCell>
<mxCell id="e_baseline-reveals-n1" value="기준선에서 갈라짐" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="n_requirements-model-baseline" target="n_collection-n-plus-one">
<mxCell id="e_baseline-reveals-n1" value="동시 분기" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="n_requirements-model-baseline" target="n_collection-n-plus-one">
<mxGeometry relative="1" as="geometry">
<mxPoint x="325.8" y="165.0" as="offset"/>
<mxPoint x="329.2" y="165.0" as="offset"/>
</mxGeometry>
</mxCell>
<mxCell id="e_baseline-reveals-n2" value="기준선에서 갈라짐" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="n_requirements-model-baseline" target="n_hidden-to-one-queries">
<mxCell id="e_baseline-reveals-n2" value="동시 분기" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="n_requirements-model-baseline" target="n_hidden-to-one-queries">
<mxGeometry relative="1" as="geometry">
<mxPoint x="324.0" y="271.0" as="offset"/>
</mxGeometry>
@@ -35,12 +35,12 @@
<mxPoint x="944.0" y="190.0" as="offset"/>
</mxGeometry>
</mxCell>
<mxCell id="e_n1-joins-fetch-join" value="Fetch Join으로 합류" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="n_collection-n-plus-one" target="n_fetch-join-failure">
<mxCell id="e_n1-joins-fetch-join" value="합류" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="n_collection-n-plus-one" target="n_fetch-join-failure">
<mxGeometry relative="1" as="geometry">
<mxPoint x="656.2" y="165.0" as="offset"/>
<mxPoint x="652.8" y="165.0" as="offset"/>
</mxGeometry>
</mxCell>
<mxCell id="e_n2-joins-fetch-join" value="Fetch Join으로 합류" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="n_hidden-to-one-queries" target="n_fetch-join-failure">
<mxCell id="e_n2-joins-fetch-join" value="합류" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeWidth=2;endArrow=block;endFill=1;" edge="1" parent="1" source="n_hidden-to-one-queries" target="n_fetch-join-failure">
<mxGeometry relative="1" as="geometry">
<mxPoint x="658.0" y="271.0" as="offset"/>
</mxGeometry>
docs/n+1liner/final/assets/diagrams/strategy-journey/strategy-journey.excalidraw
+853
View File
@@ -0,0 +1,853 @@
{
"type": "excalidraw",
"version": 2,
"source": "techviz-harness",
"elements": [
{
"id": "edge-baseline-reveals-n1",
"type": "arrow",
"x": 220.0,
"y": 121.0,
"width": 170.5,
"height": 88.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": null,
"seed": 552529844,
"version": 1,
"versionNonce": 472576796,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"points": [
[
0.0,
88.0
],
[
85.25,
88.0
],
[
85.25,
0.0
],
[
170.5,
0.0
]
],
"lastCommittedPoint": null,
"startBinding": {
"elementId": "node-requirements-model-baseline",
"focus": 0,
"gap": 4
},
"endBinding": {
"elementId": "node-collection-n-plus-one",
"focus": 0,
"gap": 4
},
"startArrowhead": null,
"endArrowhead": "arrow",
"elbowed": true
},
{
"id": "edge-label-baseline-reveals-n1",
"type": "text",
"x": 284.25,
"y": 153.0,
"width": 90,
"height": 24,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 0,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 1033652899,
"version": 1,
"versionNonce": 1516968670,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"fontSize": 13,
"fontFamily": 5,
"text": "동시 분기",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": null,
"originalText": "동시 분기",
"autoResize": true,
"lineHeight": 1.25
},
{
"id": "edge-baseline-reveals-n2",
"type": "arrow",
"x": 220.0,
"y": 227.0,
"width": 160.0,
"height": 88.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": null,
"seed": 591789630,
"version": 1,
"versionNonce": 484551927,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"points": [
[
0.0,
0.0
],
[
80.0,
0.0
],
[
80.0,
88.0
],
[
160.0,
88.0
]
],
"lastCommittedPoint": null,
"startBinding": {
"elementId": "node-requirements-model-baseline",
"focus": 0,
"gap": 4
},
"endBinding": {
"elementId": "node-hidden-to-one-queries",
"focus": 0,
"gap": 4
},
"startArrowhead": null,
"endArrowhead": "arrow",
"elbowed": true
},
{
"id": "edge-label-baseline-reveals-n2",
"type": "text",
"x": 279.0,
"y": 259.0,
"width": 90,
"height": 24,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 0,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 205942638,
"version": 1,
"versionNonce": 190066354,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"fontSize": 13,
"fontFamily": 5,
"text": "동시 분기",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": null,
"originalText": "동시 분기",
"autoResize": true,
"lineHeight": 1.25
},
{
"id": "edge-failure-to-improvements",
"type": "arrow",
"x": 864.0,
"y": 218.0,
"width": 160.0,
"height": 0.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": null,
"seed": 771986691,
"version": 1,
"versionNonce": 1642137980,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"points": [
[
0.0,
0.0
],
[
80.0,
0.0
],
[
80.0,
0.0
],
[
160.0,
0.0
]
],
"lastCommittedPoint": null,
"startBinding": {
"elementId": "node-fetch-join-failure",
"focus": 0,
"gap": 4
},
"endBinding": {
"elementId": "node-improvement-chain",
"focus": 0,
"gap": 4
},
"startArrowhead": null,
"endArrowhead": "arrow",
"elbowed": true
},
{
"id": "edge-label-failure-to-improvements",
"type": "text",
"x": 899.0,
"y": 178.0,
"width": 90,
"height": 24,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 0,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 104239920,
"version": 1,
"versionNonce": 977780642,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"fontSize": 13,
"fontFamily": 5,
"text": "실패 뒤 단계별 개선",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": null,
"originalText": "실패 뒤 단계별 개선",
"autoResize": true,
"lineHeight": 1.25
},
{
"id": "edge-n1-joins-fetch-join",
"type": "arrow",
"x": 543.5,
"y": 121.0,
"width": 170.5,
"height": 88.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": null,
"seed": 1375189997,
"version": 1,
"versionNonce": 831453832,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"points": [
[
0.0,
0.0
],
[
85.25,
0.0
],
[
85.25,
88.0
],
[
170.5,
88.0
]
],
"lastCommittedPoint": null,
"startBinding": {
"elementId": "node-collection-n-plus-one",
"focus": 0,
"gap": 4
},
"endBinding": {
"elementId": "node-fetch-join-failure",
"focus": 0,
"gap": 4
},
"startArrowhead": null,
"endArrowhead": "arrow",
"elbowed": true
},
{
"id": "edge-label-n1-joins-fetch-join",
"type": "text",
"x": 607.75,
"y": 153.0,
"width": 90,
"height": 24,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 0,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 375090892,
"version": 1,
"versionNonce": 248795047,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"fontSize": 13,
"fontFamily": 5,
"text": "합류",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": null,
"originalText": "합류",
"autoResize": true,
"lineHeight": 1.25
},
{
"id": "edge-n2-joins-fetch-join",
"type": "arrow",
"x": 554.0,
"y": 227.0,
"width": 160.0,
"height": 88.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": null,
"seed": 780844363,
"version": 1,
"versionNonce": 1056135667,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"points": [
[
0.0,
88.0
],
[
80.0,
88.0
],
[
80.0,
0.0
],
[
160.0,
0.0
]
],
"lastCommittedPoint": null,
"startBinding": {
"elementId": "node-hidden-to-one-queries",
"focus": 0,
"gap": 4
},
"endBinding": {
"elementId": "node-fetch-join-failure",
"focus": 0,
"gap": 4
},
"startArrowhead": null,
"endArrowhead": "arrow",
"elbowed": true
},
{
"id": "edge-label-n2-joins-fetch-join",
"type": "text",
"x": 613.0,
"y": 259.0,
"width": 90,
"height": 24,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 0,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 1639294716,
"version": 1,
"versionNonce": 1805717144,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"fontSize": 13,
"fontFamily": 5,
"text": "합류",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": null,
"originalText": "합류",
"autoResize": true,
"lineHeight": 1.25
},
{
"id": "node-requirements-model-baseline",
"type": "rectangle",
"x": 70.0,
"y": 165.5,
"width": 150.0,
"height": 105.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "#ffffff",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 195897388,
"version": 1,
"versionNonce": 1827986565,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false
},
{
"id": "node-label-requirements-model-baseline",
"type": "text",
"x": 80.0,
"y": 175.5,
"width": 130.0,
"height": 85.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 0,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 836154815,
"version": 1,
"versionNonce": 195330917,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"fontSize": 15,
"fontFamily": 5,
"text": "요구사항·모델·기준선\n1 과제 요구사항\n2 도메인·데이터 모델\n3 최초 피드 조회",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": null,
"originalText": "요구사항·모델·기준선\n1 과제 요구사항\n2 도메인·데이터 모델\n3 최초 피드 조회",
"autoResize": true,
"lineHeight": 1.25
},
{
"id": "node-collection-n-plus-one",
"type": "rectangle",
"x": 390.5,
"y": 60.0,
"width": 153.0,
"height": 122.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "#ffffff",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 1539566879,
"version": 1,
"versionNonce": 70442440,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false
},
{
"id": "node-label-collection-n-plus-one",
"type": "text",
"x": 400.5,
"y": 70.0,
"width": 133.0,
"height": 102.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 0,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 1797128049,
"version": 1,
"versionNonce": 350363393,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"fontSize": 15,
"fontFamily": 5,
"text": "컬렉션 N+1 (N1)\n유형: 컬렉션 N+1\n발생: 기준선과 동시에\n관계: N2와 형제 문제\n진행: Fetch Join 합류",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": null,
"originalText": "컬렉션 N+1 (N1)\n유형: 컬렉션 N+1\n발생: 기준선과 동시에\n관계: N2와 형제 문제\n진행: Fetch Join 합류",
"autoResize": true,
"lineHeight": 1.25
},
{
"id": "node-hidden-to-one-queries",
"type": "rectangle",
"x": 380.0,
"y": 254.0,
"width": 174.0,
"height": 122.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "#ffffff",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 1430794108,
"version": 1,
"versionNonce": 1806137646,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false
},
{
"id": "node-label-hidden-to-one-queries",
"type": "text",
"x": 390.0,
"y": 264.0,
"width": 154.0,
"height": 102.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 0,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 1014481634,
"version": 1,
"versionNonce": 6450502,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"fontSize": 15,
"fontFamily": 5,
"text": "User·Page 숨은 쿼리 (N2)\n유형: User·Page 숨은 쿼리\n발생: 기준선과 동시에\n관계: N1과 형제 문제\n진행: Fetch Join 합류",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": null,
"originalText": "User·Page 숨은 쿼리 (N2)\n유형: User·Page 숨은 쿼리\n발생: 기준선과 동시에\n관계: N1과 형제 문제\n진행: Fetch Join 합류",
"autoResize": true,
"lineHeight": 1.25
},
{
"id": "node-fetch-join-failure",
"type": "rectangle",
"x": 714.0,
"y": 174.0,
"width": 150.0,
"height": 88.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "#ffffff",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 218595495,
"version": 1,
"versionNonce": 316372391,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false
},
{
"id": "node-label-fetch-join-failure",
"type": "text",
"x": 724.0,
"y": 184.0,
"width": 130.0,
"height": 68.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 0,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 599407563,
"version": 1,
"versionNonce": 1890755630,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"fontSize": 15,
"fontFamily": 5,
"text": "Fetch Join → 실패\n1 N1·N2 합류\n2 다중 컬렉션·페이징 실패",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": null,
"originalText": "Fetch Join → 실패\n1 N1·N2 합류\n2 다중 컬렉션·페이징 실패",
"autoResize": true,
"lineHeight": 1.25
},
{
"id": "node-improvement-chain",
"type": "rectangle",
"x": 1024.0,
"y": 140.0,
"width": 167.0,
"height": 156.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "#ffffff",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 1124544465,
"version": 1,
"versionNonce": 96234792,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false
},
{
"id": "node-label-improvement-chain",
"type": "text",
"x": 1034.0,
"y": 150.0,
"width": 147.0,
"height": 136.0,
"angle": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 0,
"opacity": 100,
"groupIds": [],
"frameId": null,
"index": null,
"roundness": {
"type": 3
},
"seed": 1789169640,
"version": 1,
"versionNonce": 220144649,
"isDeleted": false,
"boundElements": [],
"updated": 0,
"link": null,
"locked": false,
"fontSize": 15,
"fontFamily": 5,
"text": "후속 개선 → 최종 구조\n1 Batch Fetch\n2 DTO Projection\n3 아이템별 Top-3\n4 Keyset Pagination\n5 가시성 조건 인덱싱\n6 최종 피드 조회 구조",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": null,
"originalText": "후속 개선 → 최종 구조\n1 Batch Fetch\n2 DTO Projection\n3 아이템별 Top-3\n4 Keyset Pagination\n5 가시성 조건 인덱싱\n6 최종 피드 조회 구조",
"autoResize": true,
"lineHeight": 1.25
}
],
"appState": {
"gridSize": 10,
"viewBackgroundColor": "#ffffff",
"currentItemFontFamily": 5
},
"files": {}
}
docs/n+1liner/final/assets/diagrams/strategy-journey/strategy-journey.manifest.json
+32
View File
@@ -0,0 +1,32 @@
{
"harness_version": "0.2.0",
"spec_id": "strategy-journey",
"spec_version": "1.1",
"spec_sha256": "e3e4c2346e9995960b8e3a1c4f4574e6a1f4a2e464cd38e9b098c9db41f47334",
"source_context": {
"document": "docs/n+1liner/final/document.md",
"document_sha256": "f9e048a68db0ab82078955bf611b06a71a0033539e0c87ff0aa0d620a3126e36",
"anchor": {
"kind": "heading",
"value": "2. 조회 전략의 전체 여정",
"line": 30
}
},
"outputs": [
"strategy-journey.svg",
"strategy-journey.drawio",
"strategy-journey.mmd",
"strategy-journey.d2",
"strategy-journey.dot",
"strategy-journey.excalidraw",
"strategy-journey.alt.md"
],
"lint_issue_count": 0,
"assumption_count": 0,
"assumptions_allowed": false,
"composition_profile": "component-flow",
"reference_ids": [
"payment-event-flow"
],
"diagram_only": true
}
docs/n+1liner/final/assets/diagrams/strategy-journey/strategy-journey.mmd
+13
View File
@@ -0,0 +1,13 @@
%% 두 형제 문제는 Fetch Join에서 합류한 뒤 단계별 해법으로 최종 구조가 된다
%% question: 과제 요구사항에서 시작해 기준선의 N1·N2 분기와 실패·개선을 거쳐 최종 피드 조회 구조는 어떻게 발전하는가?
flowchart LR
n0["요구사항·모델·기준선"]
n1["컬렉션 N+1 (N1)"]
n2["User·Page 숨은 쿼리 (N2)"]
n3["Fetch Join → 실패"]
n4["후속 개선 → 최종 구조"]
n0 -->|"동시 분기"| n1
n0 -->|"동시 분기"| n2
n1 -->|"합류"| n3
n2 -->|"합류"| n3
n3 -->|"실패 뒤 단계별 개선"| n4
docs/n+1liner/final/assets/diagrams/strategy-journey/strategy-journey.svg
+25 -25
View File
@@ -2,7 +2,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1236" height="421" viewBox="0 0 1236 421" role="img" aria-labelledby="diagram-title diagram-description">
<title id="diagram-title">두 형제 문제는 Fetch Join에서 합류한 뒤 단계별 해법으로 최종 구조가 된다</title>
<desc id="diagram-description">왼쪽에서 과제 요구사항, 도메인·데이터 모델, 최초 피드 조회 기준선 순으로 시작한다. 기준선에서 컬렉션 N+1(N1)과 User·Page 연관의 숨은 쿼리(N2)가 서로 앞뒤가 아닌 형제 문제로 동시에 갈라지고, 두 경로는 Fetch Join 시도에서 합류한다. 이 시도는 다중 컬렉션·페이징 실패로 이어진다. 마지막 노드는 Batch Fetch, DTO Projection, 아이템별 Top-3, Keyset Pagination, 가시성 조건 인덱싱을 거쳐 최종 피드 조회 구조에 도달하는 순서를 담는다.</desc>
<metadata>{&quot;techviz&quot;:{&quot;spec_version&quot;:&quot;1.1&quot;,&quot;id&quot;:&quot;strategy-journey&quot;,&quot;profile&quot;:&quot;component-flow&quot;},&quot;source_context&quot;:{&quot;document&quot;:&quot;/home/donghyeon/workspace/ai-tool/topic-arrange/n+1liner/n+1liner.md&quot;,&quot;document_sha256&quot;:&quot;1bb38964ca2a849690f5355646c1aa988111b4cd4e1055c6cb05cf7e5fc35cde&quot;,&quot;anchor&quot;:{&quot;kind&quot;:&quot;marker&quot;,&quot;value&quot;:&quot;strategy-journey&quot;,&quot;line&quot;:27}},&quot;evidence_policy&quot;:&quot;Each factual element cites source lines or is marked assumption.&quot;,&quot;diagram_only&quot;:true}</metadata>
<metadata>{&quot;techviz&quot;:{&quot;spec_version&quot;:&quot;1.1&quot;,&quot;id&quot;:&quot;strategy-journey&quot;,&quot;profile&quot;:&quot;component-flow&quot;},&quot;source_context&quot;:{&quot;document&quot;:&quot;docs/n+1liner/final/document.md&quot;,&quot;document_sha256&quot;:&quot;f9e048a68db0ab82078955bf611b06a71a0033539e0c87ff0aa0d620a3126e36&quot;,&quot;anchor&quot;:{&quot;kind&quot;:&quot;heading&quot;,&quot;value&quot;:&quot;2. 조회 전략의 전체 여정&quot;,&quot;line&quot;:30}},&quot;evidence_policy&quot;:&quot;Each factual element cites source lines or is marked assumption.&quot;,&quot;diagram_only&quot;:true}</metadata>
<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" />
@@ -50,23 +50,23 @@
</style>
</defs>
<rect class="canvas" width="1236" height="421" />
<polyline class="edge kind-problem style-solid emphasis-normal" points="220.0,209.0 301.8,209.0 301.8,121.0 383.5,121.0" data-evidence="25-25" />
<rect class="edge-label-bg" x="286.6" y="151.0" width="78.3" height="22" rx="3" />
<text class="edge-label" x="325.8" y="166.0">기준선에서 갈라짐</text>
<polyline class="edge kind-problem style-solid emphasis-normal" points="220.0,227.0 300.0,227.0 300.0,315.0 380.0,315.0" data-evidence="25-25" />
<rect class="edge-label-bg" x="284.9" y="257.0" width="78.3" height="22" rx="3" />
<text class="edge-label" x="324.0" y="272.0">기준선에서 갈라짐</text>
<polyline class="edge kind-improvement style-solid emphasis-normal" points="864.0,218.0 944.0,218.0 944.0,218.0 1024.0,218.0" data-evidence="25-25" />
<polyline class="edge kind-problem style-solid emphasis-normal" points="220.0,209.0 305.2,209.0 305.2,121.0 390.5,121.0" data-evidence="32-33" />
<rect class="edge-label-bg" x="303.5" y="151.0" width="51.5" height="22" rx="3" />
<text class="edge-label" x="329.2" y="166.0">동시 분기</text>
<polyline class="edge kind-problem style-solid emphasis-normal" points="220.0,227.0 300.0,227.0 300.0,315.0 380.0,315.0" data-evidence="32-33" />
<rect class="edge-label-bg" x="298.2" y="257.0" width="51.5" height="22" rx="3" />
<text class="edge-label" x="324.0" y="272.0">동시 분기</text>
<polyline class="edge kind-improvement style-solid emphasis-normal" points="864.0,218.0 944.0,218.0 944.0,218.0 1024.0,218.0" data-evidence="34-36" />
<rect class="edge-label-bg" x="898.1" y="176.0" width="91.7" height="22" rx="3" />
<text class="edge-label" x="944.0" y="191.0">실패 뒤 단계별 개선</text>
<polyline class="edge kind-flow style-solid emphasis-normal" points="550.5,121.0 632.2,121.0 632.2,209.0 714.0,209.0" data-evidence="25-25" />
<rect class="edge-label-bg" x="597.0" y="151.0" width="118.5" height="22" rx="3" />
<text class="edge-label" x="656.2" y="166.0">Fetch Join으로 합류</text>
<polyline class="edge kind-flow style-solid emphasis-normal" points="554.0,315.0 634.0,315.0 634.0,227.0 714.0,227.0" data-evidence="25-25" />
<rect class="edge-label-bg" x="598.8" y="257.0" width="118.5" height="22" rx="3" />
<text class="edge-label" x="658.0" y="272.0">Fetch Join으로 합류</text>
<polyline class="edge kind-flow style-solid emphasis-normal" points="543.5,121.0 628.8,121.0 628.8,209.0 714.0,209.0" data-evidence="34-34" />
<rect class="edge-label-bg" x="630.8" y="151.0" width="44.0" height="22" rx="3" />
<text class="edge-label" x="652.8" y="166.0">합류</text>
<polyline class="edge kind-flow style-solid emphasis-normal" points="554.0,315.0 634.0,315.0 634.0,227.0 714.0,227.0" data-evidence="34-34" />
<rect class="edge-label-bg" x="636.0" y="257.0" width="44.0" height="22" rx="3" />
<text class="edge-label" x="658.0" y="272.0">합류</text>
<g id="node-requirements-model-baseline">
<rect class="node-shape kind-journey-stage emphasis-normal role-source" data-evidence="25-25" x="70.0" y="165.5" width="150.0" height="105.0" rx="7" />
<rect class="node-shape kind-journey-stage emphasis-normal role-source" data-evidence="23-26,42-42" x="70.0" y="165.5" width="150.0" height="105.0" rx="7" />
<text class="node-label" x="145.0" y="192.5">요구사항·모델·기준선</text>
<line class="node-detail-divider" x1="84.0" y1="213.5" x2="206.0" y2="213.5" />
<text class="node-detail" x="86.0" y="230.5">1 과제 요구사항</text>
@@ -74,32 +74,32 @@
<text class="node-detail" x="86.0" y="262.5">3 최초 피드 조회</text>
</g>
<g id="node-collection-n-plus-one">
<rect class="node-shape kind-problem emphasis-normal role-service" data-evidence="25-25" x="383.5" y="60.0" width="167.0" height="122.0" rx="7" />
<rect class="node-shape kind-problem emphasis-normal role-service" data-evidence="32-34" x="390.5" y="60.0" width="153.0" height="122.0" rx="7" />
<text class="node-label" x="467.0" y="87.0">컬렉션 N+1 (N1)</text>
<line class="node-detail-divider" x1="397.5" y1="108.0" x2="536.5" y2="108.0" />
<text class="node-detail" x="399.5" y="125.0">유형: 컬렉션 N+1</text>
<text class="node-detail" x="399.5" y="141.0">발생: 기준선과 동시에</text>
<text class="node-detail" x="399.5" y="157.0">관계: N2와 형제 문제</text>
<text class="node-detail" x="399.5" y="173.0">진행: Fetch Join으로 합류</text>
<line class="node-detail-divider" x1="404.5" y1="108.0" x2="529.5" y2="108.0" />
<text class="node-detail" x="406.5" y="125.0">유형: 컬렉션 N+1</text>
<text class="node-detail" x="406.5" y="141.0">발생: 기준선과 동시에</text>
<text class="node-detail" x="406.5" y="157.0">관계: N2와 형제 문제</text>
<text class="node-detail" x="406.5" y="173.0">진행: Fetch Join 합류</text>
</g>
<g id="node-hidden-to-one-queries">
<rect class="node-shape kind-problem emphasis-normal role-service" data-evidence="25-25" x="380.0" y="254.0" width="174.0" height="122.0" rx="7" />
<rect class="node-shape kind-problem emphasis-normal role-service" data-evidence="32-34" x="380.0" y="254.0" width="174.0" height="122.0" rx="7" />
<text class="node-label" x="467.0" y="281.0">User·Page 숨은 쿼리 (N2)</text>
<line class="node-detail-divider" x1="394.0" y1="302.0" x2="540.0" y2="302.0" />
<text class="node-detail" x="396.0" y="319.0">유형: User·Page 숨은 쿼리</text>
<text class="node-detail" x="396.0" y="335.0">발생: 기준선과 동시에</text>
<text class="node-detail" x="396.0" y="351.0">관계: N1과 형제 문제</text>
<text class="node-detail" x="396.0" y="367.0">진행: Fetch Join으로 합류</text>
<text class="node-detail" x="396.0" y="367.0">진행: Fetch Join 합류</text>
</g>
<g id="node-fetch-join-failure">
<rect class="node-shape kind-query-strategy emphasis-warning role-service" data-evidence="25-25" x="714.0" y="174.0" width="150.0" height="88.0" rx="7" />
<rect class="node-shape kind-query-strategy emphasis-warning role-service" data-evidence="34-35" x="714.0" y="174.0" width="150.0" height="88.0" rx="7" />
<text class="node-label" x="789.0" y="201.0">Fetch Join → 실패</text>
<line class="node-detail-divider" x1="728.0" y1="222.0" x2="850.0" y2="222.0" />
<text class="node-detail" x="730.0" y="239.0">1 N1·N2 합류</text>
<text class="node-detail" x="730.0" y="255.0">2 다중 컬렉션·페이징 실패</text>
</g>
<g id="node-improvement-chain">
<rect class="node-shape kind-query-strategy emphasis-primary role-sink" data-evidence="25-25" x="1024.0" y="140.0" width="167.0" height="156.0" rx="7" />
<rect class="node-shape kind-query-strategy emphasis-primary role-sink" data-evidence="32-32,35-36" x="1024.0" y="140.0" width="167.0" height="156.0" rx="7" />
<text class="node-label" x="1107.5" y="168.0">후속 개선 → 최종 구조</text>
<line class="node-detail-divider" x1="1038.0" y1="189.0" x2="1177.0" y2="189.0" />
<text class="node-detail" x="1040.0" y="206.0">1 Batch Fetch</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB