개구리 탈출하기

참고자료 1. https://go.dev/tour/concurrency/1 Goroutine이란? Go 언어로 동시에 실행되는 모든 활동을 고루틴이라고 한다. Golang에서 실행 되는 모든 프로그램은 goroutine에서 실행된다. 메인 함수도 고루틴에서 실행된다. golang의 모든 프로그램은 반드시 하나 이상의 고루틴을 가지고 있다. 경량 스레드 라고 함. go 키워드를 사용해서 함수를 호출하고, 고루틴을 실행할 수 있다. go Function() main 고루틴이 종료되면 서브 고루틴도 모두 함께 종료된다. 서브 고루틴이 어느정도 시간이 걸릴지 보통 모르기 때문에 subgoroutine이 끝날때까지 main goroutine을 유지할 수 있도록 하는 WaitGroup을 제공한다. Waitgroup..

참고 자료 1. https://go.dev/blog/declaration-syntax 2. https://go.dev/tour/basics/12 3. https://go.dev/tour/moretypes/1 4. https://soyoja.com/263 : 비트 이동 연산자 Go 와 C syntax가 다른 이유에 대해서 C syntax는 declare할 때 그것이 앞으로 가지게 될 type을 명시하는 형태이다. int x; 와 같이 x는 int 일 것임을 declare하는 것이다. int *p; *p가 int라는 것. p가 int를 향한 pointer라는 것을 의미한다. int a[2]; a[2]가 int type을 가지기 때문에 a는 int의 array임을 의미한다. 함수의 경우에는 paren 바깥에서..

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