# Yjs를 활용한 인터랙티브 학습

> Clean Markdown view of GeekNews topic #18786. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=18786](https://news.hada.io/topic?id=18786)
- GeekNews Markdown: [https://news.hada.io/topic/18786.md](https://news.hada.io/topic/18786.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-01-18T09:55:02+09:00
- Updated: 2025-01-18T09:55:02+09:00
- Original source: [learn.yjs.dev](https://learn.yjs.dev/)
- Points: 1
- Comments: 1

## Topic Body

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

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

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

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

## Comments



### Comment 33568

- Author: neo
- Created: 2025-01-18T09:55:02+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=42731582) 
- Jamsocket 개발자는 Yjs를 사용하여 협업 및 로컬 우선 앱을 구축하는 데 도움이 되는 인터랙티브 튜토리얼을 만들었음. Yjs는 CRDT 라이브러리로, 분산 상태 작업에 익숙하지 않은 사람들에게는 학습 곡선이 존재함. 이 튜토리얼은 직관적이며, 탐색 가능한 데모와 코딩 연습을 통해 기초부터 이해를 쌓도록 설계되었음

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

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

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

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

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

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

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

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

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

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