YJS 5

[동시 협업 툴-6] tldraw과 yjs를 사용한 multiplayer drawing app 예제 (TBU)

1. https://github.com/tldraw/tldraw/tree/main/apps/www : yjs가 아닌 liveblocks을 사용 2. https://github.com/nimeshnayaju/yjs-tldraw : yjs + tldraw 합쳐서 multiplayer drawing 가능 3. https://github.com/yjs/y-websocket/blob/master/bin/server.js : 기본 yjs server -> 이용해서 어떻게 wss server만드는지 알아보기. 4. tldraw -> react native로: 필요한 기능을 어떻게 rendering할지 tldraw 코드 살펴보기. - 살펴봐야할 코드: https://github.com/tldraw/tldraw/tree..

[동시 협업 툴-5] 간단한 Yjs사용한 앱 코드 분석 (3. y-websocket server with persistence)

기본적으로 주어지는 websocket server의 작동에 대해서 알아보자. persistence 관련 y-leveldb: https://github.com/yjs/y-leveldb bindState: 아래의 코드에서 하는 동작은 docName에 해당하는 것을 생성해서 param으로 들어온 ydoc을 db에 저장하고, Y.encodeStateAsUpdate(Y.Doc, targetStateVector): Remote document에 적용될 수 있도록 document state를 single update message로 암호화 한다. target state vector를 넣게 되면 update message에 difference만 나타낼 수 있다. persistence.storeUpdate('my-doc..

[동시 협업 툴-4] 간단한 Yjs사용한 앱 코드 분석 (2. Yjs Docs 살펴보기)

Awareness & Presence https://docs.yjs.dev/getting-started/adding-awareness Propagating awareness information such as presence & cursor locations Awareness features는 collaborative applications에 필수적인 파트이다. users가 함께 일할 때 더 많은 info를 사용하여 커뮤니케이션 할 수 있다. cursor locations 이라던지, presence info같은 것들을 공유하면서 좀 더 active하게 협업할 수 있게 만들 수 있다. 대부분의 application 들이 사용자에게 unique한 이름과 색깔을 부여한다. 이런 정보들은 Awareness in..

[동시 협업 툴-3] 간단한 Yjs사용한 앱 코드 분석 (1. SolidJS 사용에 관해)

SolidJs? ReactJs를 쓰지 않고 SolidJs 를 쓰는 이유? SolidJS가 왜 Truly reactive라 주장하는지? https://www.youtube.com/watch?v=J70HXl1KhWE Vite 를 사용하여 project를 시작할 수 있고, 포맷은 react 를 사용했을때와 비슷하다. count, doubleCount가 있을 때 doubleCount = count * 2인데, count++ 를 했을 때 doubleCount도 restate relationship을 하지 않고 업데이트 되길 바라게 된다. SolidJs maintain the relationship(ex: count와 doublecount) over time. let변수 대신 createSignal을 사용한다. g..

[동시 협업 툴-2] Collaborate and Replicate data with CRDTs (youtube 강의 요약)

https://www.youtube.com/watch?v=MvwBw5p5vUU coordination of replicas, coordination and communication between the replicas. confirmation from authority or another developer가 필요할 수 있다. Example) Github source code: 사용자가 개입해서 뭐가 옳은 것인지 대답하는 프로세스가 필요하고, 이게 유일한 방법일 수 있다. 왜냐하면 자동적으로 모든 programming lang. conflict를 해결하는 건 어려운 문제니까. user steps in -> tell what the answer is (a manual process) CRDT CRDT는 co..