[TIL] 기타 - Svelte

[TIL]

기타

Svelte

DOM과 Virtual DOM이 효율적인 것은 아니다.

어제 DOM과 가상 DOM이 무엇인지 알아보았는데, 가상 DOM이라고해서 무조건 빠른 건 또 아니라고 한다.

따라서, “가상 DOM을 쓰니까 빠른 것!”이라고 하는 건 완전히 맞는 말은 아니다.

요새 급부상한다는 svelte, svelte는 가상돔 안쓰는데도 더 빠르다고 하는데, 왜인지 가볍게 알아보려고 한다.

먼저, 봐보자. 가상 DOM도 어쨌든 JS가 만들어야하는 객체이고, 바뀌었으면 또 시뮬레이션 해야하고,
또 시뮬레이션한 객체를 또 실제 DOM과 비교하는 과정(diffing)을 거치게 되는 것이다.

딱 봐도 뭔가 복잡하다.

React/Vue가 Virtual DOM을 쓰는 이유

그래서 Virtual DOM 없이 효율적으로 DOM을 조작할 수 있다면 가상 DOM을 쓰는 것 보다 훨씬 빠르다는 것이다.

근데 그럼 React/Vue는 왜 진즉이 효율적으로 DOM 조작 안하고 가상 DOM 만드는 것일까?

그건 React/Vue는 라이브러리/프레임워크이고, Svelte는 컴파일러니까 그렇다.

React로 만들어진 사이트는 React의 기능을 담은 JS 파일들을 사용해서 동작한다.
그걸로 로드된 React나 Vue가 사이트가 실행될 때 코드에 있는 템플릿이랑 데이터들을 읽어서 화면에 잘 나타내주는 것.
이 과정을 브라우저 단에서 효율적으로 하기 위해 만들어진 것이라고 보면 된다.

그러니까 개발자가 작성한 React 전용 코드를 브라우저가 가상 돔으로 해석해서 메모리에서 먼저 구현한 다음 최종적으로 실제 DOM에 적용하는 것이다.
이는 사용자가 실행하는 시점인 런타임에서 일어난다. React/Vue는 이런 런타임이라는 조건 하에, 브라우저에 로드된 라이브러리로 DOM에 가해지는 변화들을 최소한의 변경으로 구현할 방법을 찾는 방식인 것이다.

반면 svelte

반면 svelte는 그 과정을 사이트가 배포되기 전에 미리 다 해두는 것이다.

미리 어떤 데이터가 바뀌면 어떻게 바꾼 것을 적용할 것인지를 다 계산해놓고 그것을 빌드해서 내놓는 것이다.
svelte는 node.js로 컴파일하는 과정에서 다 이루어진다.
그렇기 때문에 브라우저가 로드된 라이브러리를 사용해서 뭘 할 필요가, 알 필요가 없는 것이다.

따라서 svelte 형식에 맞게 코드를 짜고 이것을 빌드하면 Svelte는 사이트에서 딱 실제로 일어난 일들(특정 이벤트가 들어오면 어떤 것을 어떻게 동작할지)을 컴팩트한 JS 파일로 컴파일해서 내놓는 것 (브라우저가 진짜 DOM을 효율적으로 조작할 수 있도록 친절하게 주는 것. 그러니 브라우저가 라이브러리 등을 지원할 필요가 따로 없는 것임)

그렇다고 만사 형통인가? 그건 또 아닐 것. 왜냐면 미리 컴파일 해서 주는거니까 일단 한계가 있을 것. 아직 오래되지도 않았고. React나 Vue가 워낙 강력한 기능들이 많기 때문에 또..

아직 정확하게 이해가 가지는 않는다..

나중에 다시 svelte를 공부하고 싶을 때 공부해보자!