개구리 탈출하기

Docker container, image Image: a file used to execute code in a Docker container - image act as a set of instructions to build a Docker container. - application code, libraries, tools, dependencies들이 포함되어있음. - image가 도커 환경에서 deploy 되면, Docker container로써 실행가능하다. Docker container: virtualized runtime environment - underlying hardware에서 독립적으로 application을 create,run, deploy 하기 위해서 사용된다. docker-com..

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

참고한 자료는 https://github.com/dev-yakuza/react-native-image-picker-example/blob/master/src/App.tsx GitHub - dev-yakuza/react-native-image-picker-example Contribute to dev-yakuza/react-native-image-picker-example development by creating an account on GitHub. github.com 이전 버전으로 작성되어있던 터라 버전을 업데이트 하면서 몇가지를 수정해줘야 했다. 먼저 styled-components를 다운로드 받아서 사용하는데, react18과 버전 충돌이 있어서 styled-components를 --force f..

View, SafeAreaView, ScrollView, KeyboardAvoidingView 등 View가 들어간 component들이 제공됨. react-native-paper 패키지: google material design의 ~colors.blue500 형태로 컬러 표기 가능함. View component 속성 1. view component의 width, height 설정 방법 default 방식: parent component의 width 를 그대로 설정하고, height는 child component 의 height에 의해 결정된다. px 숫자 설정 Parent component의 width, height를 기준으로 자식 컴포넌트의 크기를 퍼센트로 설정하는 방법 flex 속성을 사용하는 방법..

Mac 용 ReactNative 개발 세팅 완료! [Trouble shooting]예제 실행 시 com.github.facebook.watchman.plist for write: Permission denied에러가 남. 해결 방법 https://github.com/facebook/react-native/issues/9116 참고함. sudo chown -R $(whoami):staff ~/Library/LaunchAgents DOM과 렌더링 Document Object Model(DOM) 는 HTMLDivElement 클래스의 instance. 이런 클래스를 DOM이라 부르고 DOM클래스의 인스턴스를 DOM 객체라 한다. DOM 객체는 부모/자식 형태의 tree structure를 이룬다. 이를 DOM..

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