solid - js 및 shadow dom 그냥 공부하면서 의식의 흐름대로 끄적이기

bgm. 너와 나의 memories

dom = html 문서의 구조화된 표현 ==> 최종적으로 브라우저에 무엇을 렌더링할지 표현할 때 사용

 

shadow dom = 캡슐화된 돔으로 외부의 css에 영향을 받지 않는다..? 설명하는 사람도 잘 모르는 것 같은데 공식 문서참고 해야겠다

mdn에 따르면 shadow dom은 video 테그를 사용했을 때, 나타나는 컨트롤러와 같이 하나의 테그와 그 안에 숨겨져서 (독립적으로) 작동하는 것들을 말한다고 한다. => 개발자 도구에도 안잡혀야 shadow dom으로 보는 듯 깊게 안파도 될 것 같다 일단 개념만 알고 가는걸로 하고 pass

https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_shadow_DOM

 

virtual dom => 리액트 state가 변경될 때마다 가상의 dom을 그리고 실제 dom과의 변경점을 찾아 바뀐 부분만 변경한다. 사용 이유는한 번에 여러가지 변경점이 생겼을때 virtual dom을 활용해서 한번에 렌더링 하기 때문에 (모던 웹은 웹앱이라고 불릴만큼 인터렉티브함), 근데 virtual dom이 진짜로 효율적인지에 관한 논란은 많은 것 같다. 대충 이유는 바뀐 지점을 찾기위해서 모든 부분에 대한 비교를 수행하기 때문이기도 하고 메모리에 virtual dom이 상주하기 때문에 메모리를 많이 잡아 먹기도 하기 때문인듯

 

incremental dom => angular 솔직히 virtual dom 보다느리다. 우리도 인정(이 단락의 내용들은 https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36에서 발췌) but, virtual dom사용보다 메모리 사용량이 훨씬 적음

이걸 쓰는 구글팀의 목표

• 렌더링 엔진 자체가 트리를 흔들 수 있어야 합니다.
• 렌더링 엔진은 메모리 풋프린트(?? => 메모리 풋프린트 는 프로그램이 실행되는 동안 사용하거나 참조하는 메인 메모리 의 양을 나타냅니다 . from wikipedia)가 낮아야 합니다.
• 메모리 양이 더 적게 드는 이유는 인터프리터를 거치지 않고 컴파일단에서 비교하기 때문에.. 어렵다

이거 찾다보니까 공부할게 차고 넘친다. :(

 

solid를 왜 쓰지? react 라는 이미 좋고 (커뮤니티도 크고 관련 라이브러리도 많고 업데이트도 나름활발하고 ) maybe 앞으로도 유망해 보이고 큰 문제가 없어 보이는데 라고 생가을 했었는데 react는 생각보다 느리다...! 

 

왜 느리냐면 state 값이 바뀔 때마다 virtual dom -> real dom 비교 연산을 수행하는데 이게 state가 자주 바뀌는 경우에 매우 느려진다. state가 진짜 계속 바뀐다던가,, 바뀐다던가 한다면 일례로 이런걸 코드에 넣어두면 리액트는 바로 죽어버린다.

useEffect( ( ) => {
	setNumber((number)=>number + 1)
	} )

 

 예를 들면 이번에 개발을 진행하다가 서버에서 어떤 {...item, isFetched}형태의 item list값을 받고, 프론트엔드 에서 isFetched 값이 false(업데이트가 안된 값이면) 다시 서버에 request 하고.. 서버에서는 다시 이 값을 update(외부에서 데이터를 끌어 와야해서 느림)하고 다시 업데이트 된 값을 보내주면 반영해서 setstate하고. 뭐 이런 작업을 했는데, 이게 update된 값이 하나하나 프론트에 도착할 때마다 다시 렌더링을 하기 때문에 엄청나게 버벅거렸다.

  처음부터 서버에서 fetch 된 값들만 보내주면 되는거 아니냐 라고 할 수도 있지만, 서비스의 특성상 실시간으로 데이터를 끌어오는 것이 불가능하다. (짧아도 5초, 느리면 수십초가걸린다) 결과적으로는 서버에서 해결해야할 문제이지만 언제나 이상적인 상황만 나오는 것은 아니기에 더 빠른 web library(frame work)에 대한 필요성을 느꼇다. (react 는 자신들을 library 라고 표현한다)  

 

 그래서  찾아보니 solid js란게 눈에 띄게 빨랐다. 거의 vanilla js 만큼 그리고 react 는 진짜 생각보다 느린 것 같다. (물론 자료의 출처가 solid js document)라서 저 수치를 있는 그대로 받아들이는 것은 옳지 않을수도..?

근데 어떻게 이렇게 빠르지? 설마 내가 vanila 처럼 element 하나 하나에 직접 접근해서 통제해야 하나? 봤더니 그건 또 아니다

 

https://blog.openreplay.com/solid-vs-react-the-fastest-vs-the-most-popular-ui-library 읽어볼 것 

솔리드 개발자의 블로그 https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37