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

SolidJs? ReactJs를 쓰지 않고 SolidJs 를 쓰는 이유? SolidJS가 왜 Truly reactive라 주장하는지? 

https://www.youtube.com/watch?v=J70HXl1KhWE 

1. Vite 를 사용하여 project를 시작할 수 있고, 포맷은 react 를 사용했을때와 비슷하다. 
2. count, doubleCount가 있을 때 doubleCount = count * 2인데, count++ 를 했을 때 doubleCount도 restate relationship을 하지 않고 업데이트 되길 바라게 된다. SolidJs maintain the relationship(ex: count와 doublecount) over time. 
3. let변수 대신 createSignal을 사용한다. getter, setter를 가지는데, doubleCount = ()=>count()*2 와 같은 형태로 정의 한다. 그리고 나서 단순히 console.log(doubleCount())처럼 logging하는 대신에, createEffect를 사용한다. createEffect는 signal에 의존하는 함수들을 말하는데, 이는 createEffect에는 function을 pass시켜서 사용하는데 그때 solidjs는 그 function scope안에 들어가는 모든 signal을 keep track of 하며, signal값이 변하면 effect가 rerun된다. (keep track of any signals in the function scope.)
4. 특히 complexity grows 할 때 reasoning을 더 쉽게 만들어준다. 예를 들면 두개의 다른 signal 이 createEffect안에서 사용되면, 그 중 하나의 signal만 업데이트 되어도 effect rerun된다. 
5.  function으로 signal의 relationship을 쉽게 나타낼수도 있다. product = () => count() * multiplier(); 
6. Granular updates가 가능 
7. 다른 framework들 처럼 component는 그들의 state를 소유하지 않는다. 
8. HTML element directly into code 쓸 수 있다.
9. 주요 특성
   1. createSignal: sets up a value that can be tracked by solid.  
      • signal은 solid에서 주요하게 사용하는 상태 객체. useState와 유사한 기능을 함. createSignal안에는 js 객체가 어떤것이든 들어갈 수 있다. 
      •  signal의 값을 count로 참조하는 것이 아니라 count()와 같이 함수 호출을 통해 참조한다는 점에서 useState와 차이가 있다. 
   2. createEffect: always up to date when a signal that it depends on is updated 

 

Simplified Implementation (이해하는데 도움 된 Pseudo code)  

1. Reactivity를 위해서 어떤 signal을 관찰하는 어떤 effect도 모두 추적이 가능해야한다. 그러기 위해서 global stack 인 context라는 것을 사용하는데, context 를 통해서 어떤 effect가 현재 running하고 있는지를 추적할 수 있다. createEffect에서는 passed function를 wrapping하는데, wrapper는 어떤 역할을 하냐면, context에 자기자신을 context stack에 push하고, execute functions that was passed, 그리고 나서 removes itself from stack when it's done. 
2. read가 불렸을 때 subscribers에 currentObserver를 불러와서 추가해 놓는다. 그리고 나서 write함수가 불릴때마다 effect 를 재실행 해주는 원리.

 

https://github.com/dairyisscary/syn 

GitHub - dairyisscary/syn: Offline, CRDT collaboration demo!