CRDT는 데이터 타입에 병합 규칙을 담아 각 복제본의 연산을 교환할 수 있게 합니다. 지원하는 연산의 순서가 달라도 결과가 수렴하도록 설계됩니다.
데모는 A와 B가 각각 항목을 추가한 뒤 서로 반대 순서로 변경을 받아도 같은 집합에 도달하는 모습을 보여줍니다. 모든 데이터 규칙이 자동으로 해결되는 것은 아니므로 업무상 충돌 의미는 따로 정해야 합니다.
언제 쓰나
여러 기기의 오프라인·동시 편집을 서버 잠금 없이 병합할 때 사용합니다.
CRDT 자동 병합
CRDT merge
동시 변경의 순서가 달라도 복제본이 같은 결과로 수렴하도록 합니다.
···
<div class="scene"><div class="title">CONCURRENT SET MERGE</div><div class="row crdt"><div class="tile">REPLICA A<div id="setA" class="set">{A}</div></div><div class="merge">⇄<small>op exchange</small></div><div class="tile">REPLICA B<div id="setB" class="set">{B}</div></div></div><div id="mergeState" class="muted">Independent adds while offline</div></div>.scene{width:min(94vw,760px);height:min(86vh,320px);padding:clamp(10px,2.5vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:500 clamp(11px,1.3vw,16px)/1.25 "Pretendard Variable",Pretendard,-apple-system,sans-serif;display:flex;flex-direction:column;gap:clamp(7px,1.6vmin,12px);overflow:hidden}.scene *{box-sizing:border-box}.title{font-weight:750;color:var(--accent)}.muted{color:var(--muted)}.mono{font-family:ui-monospace,monospace}.row{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.4vmin,12px);flex:1;min-height:0}.tile{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(6px,1.6vmin,12px);text-align:center;min-width:0}.on{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.pulse{animation:pulse 1.6s infinite alternate}@keyframes pulse{to{border-color:var(--accent);transform:translateY(-3px)}}.crdt .tile{flex:1}.set{font:700 1.5em ui-monospace,monospace;color:var(--accent);margin-top:9px}.merge{color:var(--accent);font-size:1.7em;text-align:center}.merge small{display:block;font:500 clamp(11px,1.2vw,14px) "Pretendard Variable",Pretendard,-apple-system,sans-serif;color:var(--muted)}let phase=0;function tick(){const p=phase%3;document.getElementById('setA').textContent=p===2?'{A,B}':'{A}';document.getElementById('setB').textContent=p===2?'{A,B}':'{B}';document.getElementById('mergeState').textContent=['A adds A; B adds B','Operations travel in different order','Both replicas converge to {A,B}'][p];phase++}tick();setInterval(tick,1050)