Collaborative Editing

~13 min · app, collab, ot, crdt

Level 0Poller

0 XP0/60 lessons0/10 achievements

0/120 XP to next level120 XP to go0% complete

도전: 동시 편집

같은 문서 동시 편집하는 두 user 가 conflict. 순진한 'last-write-wins' 가 데이터 잃음. Production-grade 두 접근: Operational Transforms (OT) + Conflict-free Replicated Data Types (CRDT).

한 단락 OT vs CRDT

OT (Google Docs) 는 중앙 서버 필요. 각 편집이 정수 revision 가진 operation; 서버가 들어오는 operation 을 동시 operation 들과 transform 해서 일관 결과. CRDT (Figma, Notion) 는 중앙 권위 안 필요 — 각 character 가 globally unique ID + 순서 metadata, 데이터 구조가 operation 순서 무관 수학적 converge. CRDT 가 추론 쉬움; OT 가 bandwidth 효율.

라이브러리 써

둘 다 정확히 구현하는 거 수개월 작업이고 originality 발휘할 자리 아냐. Yjs (CRDT) 가 dominant JS 라이브러리; Automerge 가 주요 경쟁자. 둘 다 WebSocket transport adapter 보유. Wire 박고 시간을 알고리즘 아니라 UX 에 써.

Code

개념: CRDT-shape insert·javascript

// Each character gets a globally unique id.
// Order is determined by ids, not local indices.
ws.send(JSON.stringify({
  type: 'doc.insert',
  data: {
    id: 'user1-1705312000-0',  // globally unique
    char: 'H',
    after: null,                // position reference
  },
}));

// On the receiving side, all operations from all users
// merge into the same final state regardless of order.

WebSocket 위 Yjs — production 준비된 path·javascript

import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

const ydoc = new Y.Doc();
const provider = new WebsocketProvider(
  'wss://api.example.com/yjs',
  'document-id-here',
  ydoc,
);

const ytext = ydoc.getText('content');
ytext.observe(event => {
  // event.changes — apply to your editor view
});

// Local edit
ytext.insert(0, 'Hello');

External links

Exercise

공유 room 에 두 브라우저 탭으로 Yjs wire. 한 쪽에 타이핑; 다른 쪽 나타나는 거 봐. 탭 A disconnect, 둘 다 편집; reconnect; 두 편집 손실 없이 merge. 깰 시도 — 같은 위치 동시 insert, insert 위 deletion. 라이브러리가 모든 케이스 처리.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousLive Chat 시스템 Next →Live Dashboard

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.