Code King Academy devlog
  • Home
    • 프로젝트
    • 1대1 개발 멘토링 후기
    • 3D 데이터 센터 모니터링 솔루션 프로젝트
    • 3D 모델링과 좌표계 설계 그리고 최적화 (작성중)
    • JWT 토큰을 활용한 프론트엔드 인증 및 재발행 시스템 구현
    • 피그마 같은 데이터 시각화 편집툴을 만들자고? (작성중)
    • CRDT 란 무엇인가? (작성중)
    • 서로의 행위를 존중해주는 실시간 undo / redo (작성중)
    • E2E Test with PlayWright (작성중)
    • Ajax 요청 취소와 자동완성 (작성중)
    • Webpack 으로 프로젝트 초기 작업 하기 (작성중)
    • 번들링 최적화 Code Splitting
    • 번들링 최적화 minify, uglify, 압축 (작성중)
    • 모듈 시스템과 Tree-Shaking (작성중)
    • 테스트를 더 효율적으로 할 수 없을까?
    • 프런트엔드 개발의 테스트 범위 (테스트 레벨)
    • 동기 vs 비동기, 블로킹 vs 논블로킹
    • 모두가 알지만 모두가 모르는 package.json 과 의존성 관리 (작성중)
    • Runtime Performance 를 분석해보자
    • 브라우저는 화면을 어떻게 그리는가
    • 기술 블로그 모음
    • 오픈소스를 운영해보자
    • NEXT 를 사용해 서비스를 만들어보자
    • Supabase 를 활용한 릴리즈 주도 개발
    • 협업 문서 작성하기
    • MFA 와 Module Federation
Powered by GitBook
On this page
  • About Yorkie
  • Components
  • How it works
  • CRDT vs OT
  • 실시간 협업 에디터가 동작되는 과정
  • CRDT 와 OT 비교
  1. Home

CRDT 란 무엇인가? (작성중)

Yorkie 오픈소스를 분석해보자

Previous피그마 같은 데이터 시각화 편집툴을 만들자고? (작성중)Next서로의 행위를 존중해주는 실시간 undo / redo (작성중)

Last updated 10 months ago

About

Yorkie is an open-source document store that provides a suite of tools for building real-time collaborative applications like Google Docs and Figma. It includes a JSON-like Document based on Conflict-free Replicated Data Types(CRDTs), Presence, and auth webhook features to enable synchronous co-editing.

Unlike other libraries like AutoMerge and Yjs, Yorkie includes a full-stack solution with SDKs, Cloud or Self-Hosted Server, making it easier to implement co-editing capabilities in your application.

In the following sections, we will explore the structure and workings of Yorkie in more detail.

Components

Yorkie consists of three main components: Clients, Documents, and Server.

  • s are the entities that communicate with the server. Changes made by documents can be synchronized with the server, allowing for real-time collaboration.

  • s are the core data structures of Yorkie, and are based on Conflict-free Replicated Data Types(CRDTs). This allows for seamless collaboration on a document, even when clients are offline.

  • is the central hub of the Yorkie, receiving changes from clients, storing them in the database, and propagating them to other clients who are subscribed to the same documents.

In addition, s in Yorkie represent separate services or applications within the system. This allows for multiple independent projects to coexist within a single Yorkie installation.

How it works

A high-level overview of Yorkie is as follows:

 Client "A" (Go)                 Cloud or Self-Hosted Server     MemDB or MongoDB
┌───────────────────┐           ┌────────────────────────┐      ┌───────────┐
│  Document "D-1"   │◄─Changes─►│  Project "p-1"         │      │ Changes   │
│  { a: 1, b: {} }  │           │ ┌───────────────────┐  │◄────►│ Snapshots │
└───────────────────┘           │ │  Document "D-1"   │  │      └───────────┘
 Client "B" (JS)                │ │  { a: 2, b: {} }  │  │
┌───────────────────┐           │ │                   │  │
│  Document "D-1"   │◄─Changes─►│ │  Document "D-2"   │  │
│  { a: 2, b: {} }  │           │ │  { a: 3, b: {} }  │  │
└───────────────────┘           │ └───────────────────┘  │
 Dashboard or CLI               │                        │
┌───────────────────┐           └────────────────────────┘
│  Query "Q-1"      │                 ▲
│  P-1.find({a:2})  ├─────── Query────┘
└───────────────────┘

The Yorkie system allows clients to have replicas of a document, representing an application model, on multiple devices. Each client can edit the document independently on their local devices, even when offline. When a network connection is available, Yorkie determines which changes need to be synced between clients and brings their replicas into the same state. In the event that the document is being edited concurrently on different devices, Yorkie automatically syncs the changes and resolves any conflicts, ensuring that all replicas end up in the same state.

CRDT vs OT

CRDT ( Conflict-Free-Replicated Data Types) 와 OT (Operational Transformation) 란 동시 편집 기술로, 실시간 협업 툴에 관련된 기술이다.

실시간 협업 에디터가 동작되는 과정

CRDT 와 OT 비교

To get started with Yorkie, please refer to the .

Yorkie
Client
Document
Server
Project
Getting Started
Page cover image