▲

GN⁺: Yjs를 활용한 인터랙티브 학습

 (learn.yjs.dev)
1P by neo 1달전 | ★ favorite | 댓글 1개

  • 소개

    • Learn Yjs는 Yjs CRDT 라이브러리를 사용하여 실시간 협업 애플리케이션을 구축하는 방법을 배우는 대화형 튜토리얼 시리즈임.
    • 이 페이지 자체가 실시간 협업 애플리케이션의 예시로, 다른 사용자의 커서가 실시간으로 표시됨.
    • 식물을 클릭하면 다른 사용자에게도 변경 사항이 반영됨.

  • Yjs의 기본

    • Yjs의 기본 개념을 시작으로, 분산 애플리케이션에서 상태를 처리하는 기술을 다룸.
    • CRDT가 무엇인지, 그리고 이를 사용하는 이유에 대해 설명함.
    • 협업 애플리케이션에서 발생할 수 있는 문제점과 이를 피하는 방법을 제시함.
    • 탐색 가능한 데모와 코드 연습을 통해 Yjs의 작동 방식을 체험할 수 있음.

  • 데모 예시

    • 각 상자는 Yjs를 사용하는 애플리케이션을 실행하는 별도의 컴퓨터(클라이언트)를 나타냄.
    • 한 클라이언트에서 상호작용하면 다른 클라이언트에도 자동으로 동기화됨.
    • 상단 왼쪽의 슬라이더로 네트워크 지연 시간을 조절하여 클라이언트 간의 상호작용을 확인할 수 있음.

  • 사이트 소개

    • Learn Yjs는 실시간 앱을 구축하는 플랫폼인 Jamsocket의 프로젝트임.
    • 이 페이지의 실시간 커서와 멀티플레이어 정원은 Y-Sweet, 오픈 소스 Yjs 서버로 구동됨.
    • 웹사이트는 Astro로 구축되었으며, 대화형 데모와 연습은 React와 Yjs로 제작됨.
▲
neo 1달전  [-]
Hacker News 의견

  • Jamsocket 개발자는 Yjs를 사용하여 협업 및 로컬 우선 앱을 구축하는 데 도움이 되는 인터랙티브 튜토리얼을 만들었음. Yjs는 CRDT 라이브러리로, 분산 상태 작업에 익숙하지 않은 사람들에게는 학습 곡선이 존재함. 이 튜토리얼은 직관적이며, 탐색 가능한 데모와 코딩 연습을 통해 기초부터 이해를 쌓도록 설계되었음

  • Yjs의 일반화된 기능은 복잡해질 수 있으며, 특히 여러 객체가 서로 관련되어 있을 때 문제가 발생함. 모든 항목을 하나의 문서에 넣는 간단한 모델은 데이터베이스 전체를 전송해야 하는 문제를 야기함. 따라서 항목을 개별 객체로 나누고 직접 지속시키는 방법이 필요함

    • Subdocuments를 사용하여 문제를 해결할 수 있지만, 일부 Provider는 이를 지원하지 않음. Yjs의 핵심 프로토콜은 문서화되지 않았으며, 관련 코드가 분산되어 있음

  • Yjs는 P2P 결과를 쉽게 얻을 수 있는 장점이 있음. 그러나 백엔드의 지속성, 충돌 해결, 히스토리 되감기 등은 어려운 엔지니어링 과제임. Platejs와 같은 블록 편집기와의 좋은 경험을 원했으며, Liveblocks와 같은 솔루션이 개발 경험을 단순화하려는 시도가 있음

  • Yjs를 사용하여 오프라인에서도 작동해야 하는 앱을 개발 중임. 실시간 협업 앱은 아니지만, 서버를 하나의 협업자로 간주하면 다양한 사용 사례를 상상할 수 있음

  • Yjs를 작은 프로젝트에 사용했으며, 클라이언트 측은 배우기 쉽고 사용하기 쉬웠음. 서버 측에서는 Node 외의 언어로 된 예제가 거의 없었고, LevelDB 기반의 지속성을 사용하여 Node의 y-websocket을 약간 수정하여 사용했음

  • 분수 인덱싱이라는 기술은 인덱스를 정수가 아닌 분수로 사용하는 것임. 얼마나 많은 횟수로 사용할 수 있는지에 대한 의문이 있음

  • 인터랙티브 데모의 지연 슬라이더는 네트워크 지연이 아닌 디바운스 버퍼로 작동하는 것처럼 보임. 왜 그런지 이해하기 어려움

  • 인터랙티브 데모는 아름다움. 이를 구축하는 데 사용된 라이브러리가 있는지 궁금함

  • 네잎 클로버를 얻었지만 누군가가 망쳤음. 창작자에게 찬사를 보냄. 재미있는 것임

  • 배너 이미지 게임은 유치하지만 재미있음

답변달기