이전 : CRDT를 구현해보자 (3): FE, BE에 CRDT 적용하기

CRDT의 데이터 구조를 정하자

블럭CRDT, 텍스트CRDT?

앞서 우리 글래스모팀은 블럭형태, 텍스트형태로 CRDT를 나눠 LinkedList를 활용하기로 결정했다고 말씀드렸습니다.

이렇게 결정한 이유는

• 텍스트 CRDT 를 관리하는 LinkedList 구조
• 블럭 CRDT 를 관리하는 LinkedList 구조

위 두 구조를 병합하는 과정에서 CRDT에서 확장한 버전으로 관리하면, 더 효율적으로 마크다운 문법과 블럭 관리를 할 수 있을 것으로 생각하였습니다.

간단하게 보면 위 사진과 같습니다.

글자와 글자 사이에 들어가는 인덱스와 블록의 연결관계가 동일한 상태관리 유지에 매우큰 영향을 미칩니다.

우리팀은 각 텍스트마다 가지는 indext를 최대 3개만 가지게 설정했는데요. 3개 보다 큰경우는 일반적으로 사용하지 않을 것이라고 제한 하였습니다.

하지만 기존에 indent를 구현했던 방식에 확장이 어려운 문제가 발견됐습니다.

기존 블록의 구조

export interface EditorNode {
  id: string;
  type: ElementType;
  content: string;
  attributes?: Record<string, any>;

  // 수평 연결 (같은 레벨의 노드들 간 연결)
  prevNode: EditorNode | null;
  nextNode: EditorNode | null;

  // 수직 연결 (부모-자식 관계)
  parentNode: EditorNode | null;
  firstChild: EditorNode | null; // 배열 대신 첫 번째 자식만 참조

  // 형제 노드 간 연결 (같은 부모를 가진 노드들 간 연결)
  prevSibling: EditorNode | null;
  nextSibling: EditorNode | null;

  depth: number;
  order: number;
  listProperties?: ListProperties;
}