개구리 탈출하기

react component를 사용해서 edit 할 수 있는 걸 만들기 위해 react-moveable과 react-selecto를 사용하면서 찾아보며 알게된 CSS property에 대해서 정리하고자 한다. Pointer events 클릭 이벤트 허용 여부이다. hover, click, drag등에 어떻게 반응할 지 지정할 수 있다. 대부분의 속성값은 svg전용이다. "stroke": element의 둘레에 있을 때만 pointer event의 타겟이 될 수 있다. 이 속성을 이용하면, 화살표 같은 경우 svg의 영역 자체는 넓지만, 안쪽 화살표, or 직선을 선택할 때만 pointer event가 적용될 수 있도록 할 수 있다. "fill": interior of the element 일때 point..

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..

기본적으로 주어지는 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..

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..

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..

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..

너무너무 만들고 싶은 것이 있어서 스터디 기록용으로 블로그를 시작하게 되었다. 동시 협업 툴에 대한 지식을 쌓기 위해서 공부를 시작하려고 한다. 동시 협업 툴에서는 문서를 작성하거나, 슬라이드를 작성할 때 동시에 여러명이 같은 도형이나 단어에 접근해서 변형시키는 것이 가능해야한다. 동기화된 화면을 보여줘야 하기 때문에, 동시에 같은 것에 접근해서 operation 을 했을 때 그것을 서버단에서 어떻게 처리할지가 중요해진다. 예를 들면 같은 단어에 다른 operation이 적용된다면 그걸 서버단에서 잘 처리하는 메커니즘이 필요하다는 것이다. 이 과정을 어떻게 처리하면 좋을 지에 대해서 이미 사용되는 두가지의 방법이 있다고 한다. OT와 CRDT이다. 1. OT (Operational Transformati..