서론

noctaCRDT y.js처럼 캐럿관리 시스템 도입

최근 localInsert나 사용해야하는 메서드에 따라 그 함수 내부가 아닌 외부에서 설정을 바꿔야하는 경우가 많았습니다.

이를 방지하기 위해 noctaCRDT자체적으로 캐럿을 자동으로 관리할 수 있도록 라이브러리화를 좀더 체계적으로 진행하고 자 했습니다.

문제

image.png

현재는 Editor내에 CRDT를 생성하고 중첩적인 구조로 각 블록별, 문자별로 클래스 덩어리를 만들며 해당하는 연산이 일어날때마다 직접 그 블럭과 텍스트에 입력 처리를 해주는 연산이 일어나고 있습니다.

nocta-doc/
├─ package.json
├─ tsconfig.json
└─ src/
   ├─ core/                # CRDT 핵심 로직
   │   ├─ NoctaDoc.ts      # public 진입점
   │   ├─ OperationLog.ts  # encode/update, stateVector
   │   ├─ LinkedList.ts    # 공용 연결리스트
   │   └─ Id.ts            # Lamport·Client ID
   │
   ├─ model/               # 도메인 모델
   │   ├─ Block.ts
   │   ├─ Char.ts
   │   └─ Types.ts
   │
   ├─ ops/                 # 직렬화 대상 Operation 정의
   │   ├─ InsertOp.ts
   │   ├─ DeleteOp.ts
   │   └─ index.ts
   │
   ├─ codec/               # VarInt·CBOR 등 인코딩 헬퍼
   │   ├─ Encoder.ts
   │   └─ Decoder.ts
   │
   ├─ util/                # assert, helper, iterator
   │   └─ invariant.ts
   │
   └─ index.ts             # `export *` 모음

→ 위 구조는 외부 라이브러리 사용성을 극대화한 구조임.

→ 좀더 React나 실제 라이브러리에서 쓰기 쉬운 형태로 구조화와 분리가 필요함

image.png