automerge

automerge는 CRDT 패턴을 지원하는 자바스크립트 환경의 라이브러리다.

구현은 Rust지만, 애초에 범용적인 웹 환경을 고려한 것이라서 WASM을 통한 Javascript 연동을 직접 지원한다.
그래서 WASM이 불가능한 환경에라면 쓰지 못할 것이다.

Rust나 C로 사용하는 것도 가능은 한데, 문서하도 잘 안돼있고 권장하지도 않는다.

CRDT에 대한 개념 참조
https://blog.naver.com/sssang97/223113627152

방향성과 원리

automerge가 CRDT를 구현한 방법은 git의 원리와 흡사하다.
각 변경사항을 별도의 흐름으로 관리하다가, 병합하면 그때 이리저리 끼워넣고 밀어넣는 작업을 하는 것이다.

automerge는 "automerge 객체"를 기반으로 모든 변경에 대한 제어와 병합을 총괄한다.

각 automerge 객체는 불변 값이고, 값을 변경하면 새로운 버전의 객체를 새로 생성한다.
자바스크립트 환경의 상태관리 라이브러리들도 그런 방식을 취하곤 하는데, 비슷하다고 보면 된다.

그리고 변경이 되면 그 변경된 사본들을 기반으로, Merge를 하면 적절히 병합처리는 해주는게 기본적인 사용법이다.

여기서 각 automerge 객체는 로컬에서 현재 사용자가 변경한 내역일 수도 있고, 네트워크로 날라온 다른 사용자의 변경내역일 수도 있다.
일단 automerge 객체들로 받아오기만 하면 merge를 통해서 안정적으로 병합할 수 있다.

설치

nodejs에서 쓴다면 그냥 npm으로 설치하는 것만으로도 간단하게 사용할 수 있다.

npm i @automerge/automerge @automerge/automerge-repo

하지만 React, Vue 등 브라우저 환경을 고려한다면 설정해야할 것이 몇가지 있다.
웹어셈블리 종속성이 있기 때문이다. 자세한 것은 문서 내 가이드를 참조한다.
https://automerge.org/docs/library_initialization/

여기서는 일단 node.js를 써서만 간단하게 원리를 보여보겠다.

간단한 예시: 텍스트 병합

CRDT의 대표적인 사용례는 아무래도 동시 텍스트 편집 같은 경우일 것이다.
automerge는 배열이나 숫자, 오브젝트에 대해서도 병합 기능을 제공하지만, 내가 볼때 대부분의 사용례는 텍스트다.

한번 automerge가 어떤 식으로 사용되는지를 보여보겠다.
아래는 그냥 텍스트 객체를 초기화하고 텍스트를 끼워넣는 변경을 하는 간단한 코드다.

import { next as Automerge } from "@automerge/automerge";

let doc = Automerge.from({ text: "hello world" });

// 변경을 위한 복제본 생성
let forked = Automerge.clone(doc);
forked = Automerge.change(forked, (d) => {
  // 인덱스 5부터 0개를 지우고 그 자리에" wonderful"를 추가
  Automerge.splice(d, ["text"], 5, 0, " wonderful");
});

// 변경사항 병합
doc = Automerge.merge(doc, forked);

console.log(doc.text);

이 코드처럼, 실질적인 최종 값에 대한 변경은 변경사항을 root에 병합하는 것으로 이루어진다.
일단은 돌긴 했는데, 사실 변경사항이 하나뿐이라서 CRDT를 쓰는 의미는 없었다.

이번에는 변경사항을 하나 더 적용해보겠다.

이렇게 변경 내역을 하나 만들고

마찬가지로 병합을 시켜서 보면 된다.

동일 텍스트에 대해서 변경을 시도했음에도, 2가지 변경이 적당히 섞인 것을 볼 수 있다.

아래는 전체 코드다.

import { next as Automerge } from "@automerge/automerge";

let doc = Automerge.from({ text: "hello world" });

// 변경을 위한 복제본 생성
let forked = Automerge.clone(doc);
forked = Automerge.change(forked, (d) => {
  // 인덱스 5부터 0개를 지우고 그 자리에" wonderful"를 추가
  Automerge.splice(d, ["text"], 5, 0, " wonderful");
});

// 변경을 위한 복제본 생성 - 두번째
let forked2 = Automerge.clone(doc);
forked2 = Automerge.change(forked2, (d) => {
  // 인덱스 0부터 5개를 지우고 그 자리에 "Greetings"를 추가
  Automerge.splice(d, ["text"], 0, 5, "Greetings");
});

// 변경사항 병합
doc = Automerge.merge(doc, forked);
doc = Automerge.merge(doc, forked2);

console.log(doc.text);

근데 위 예제에서는 텍스트를 서로 다른 위치에 구겨넣어서 자연스럽게 병합이 됐다.
그러면 동일한 위치에서 텍스트를 집어넣으면 어떻게 될까?

그런 경우에는 둘다 텍스트를 넣되, 먼저 수정한 변경을 먼저 반영하는 식이 된다.

실시간 네트워킹 구조 제공

CRDT가 필요할 정도의 환경에서는 웹소켓이나 WebRTC를 통한 실시간 처리가 동반될 경우가 잦은데, CRDT는 그에 대한 약간 준비된 구성을 어느 정도 제공한다.

이름이 @automerge/automerge-repo-storage-*로 시작되는 모듈들은 스토리지 기반으로 automerge 객체를 저장하고 동기화하는 기능을, @automerge/automerge-repo-network-*로 시작되는 모듈들은 네트워크 통신을 기반으로 automerge 객체를 주고받으면서 동기화하는 기능을 제공한다.

예를 들면, 이건 React의 일반적인 구성이다.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { IndexedDBStorageAdapter } from "@automerge/automerge-repo-storage-indexeddb"
import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel'
import { Repo } from '@automerge/automerge-repo'
import { RepoContext } from '@automerge/automerge-repo-react-hooks'

const broadcast = new BroadcastChannelNetworkAdapter();
const indexedDB = new IndexedDBStorageAdapter();

const repo = new Repo({
  storage: indexedDB,
  network: [broadcast],
})

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RepoContext.Provider value={repo}>
      <App />
    </RepoContext.Provider>
  </React.StrictMode>
)

이런 식으로 어댑터를 초기화해서 repo 단위를 생성하면, 저 repo 객체를 기반으로 automerge 작업 단위를 만들거나 조회, 다른 네트워크 사용자로의 동기화까지를 처리할 수 있다.

React에 대한 예제코드는 다음 문서에 적당히 적혀있다. 더 자세한 사용법을 문서를 참조하는게 좋을 것 같다.
CRDT에서 제공하는 동기화 구성을 활용하려면 이것저것 갖다써야할 것이 많다.
https://automerge.org/docs/quickstart/#manage-docs-with-a-repo

참조
https://automerge.org/docs/hello/
https://github.com/automerge/automerge