프레임워크 Svelte 란 무엇인가

최근 웹 개발 현장에서 주목을 받기 시작한 새로운 JavaScript 프레임 워크 인 Svelte에 대해 궁금증이 생겨 포스팅 하게 됐습니다.

흔히들 React , Vue , Angular를 대부분 사용하기 때문에 Svelte에 대해 생소하다.

Svelte란? 

 

간단하게 말하면 웹앱 프레임워크이다

 React 또는 Vue와 같은 구성 요소 프레임 워크이지만 중요한 차이점이 있다.

 

작성한 컴포넌트를 컴파일러가 Javascript로 트랜스파일하는 방식으로 동작한다.

이 때문에 가상돔(VDOM)을 사용하는 다른 라이브러리(React , Vue , Angular)와는 다르게 순수 DOM을 사용한다. 

 

특징으로는

• 기존 프레임워크에 비해 훨씬 적은 양의 코드
• 가상 DOM을 사용하지 않는다
• 변경된 값이 자동으로 DOM에 반영
• 컴포넌트를 컴파일러가 빌드때 자바스크립트로 컴파일된다.

많은 프레임 워크에서 다음 render()과 같은 간단한 React 구성 요소 와 같은 함수 를 생성하여 앱을 빌드합니다 .

 

가상돔을 사용하면 안좋다?

ㄴ가상 DOM을 업데이트하는 것은 많은 작업입니다. 얼마 전에 React 팀은 업데이트를 작은 덩어리로 나눌 수있는 React Fiber라는 것을 도입했습니다.업데이트가 총 작업량이나 업데이트에 걸리는 시간을 줄이지 않지만 오랜 시간 동안 메인 스레드를 차단하지 않는다는 것을 의미합니다.

 

그러면 프레임 워크가 가상 DOM을 사용하는 이유는 무엇입니까?

ㄴ가상 DOM 은 기능이 아님 을 이해하는 것이 중요 합니다 .

결국 선언적 상태 기반 UI 개발입니다. Virtual DOM은 상태 전환에 대해 생각하지 않고 일반적으로 충분한 성능 으로 앱을 빌드 할 수 있기 때문에 유용합니다 . 이는 버그가 적은 코드를 줄이고 지루한 작업 대신 창의적인 작업에 더 많은 시간을 할애한다는 것을 의미합니다.

 

 

그러나 우리는 가상 DOM을 사용하지 않고도 유사한 프로그래밍 모델을 얻을 수 있는것이  Svelte다.

기존 UI 프레임 워크와 달리 Svelte는 런타임에 작업을 수행하기를 기다리지 않고 빌드시 앱에서 상황이 어떻게 변경 될 수 있는지 아는 컴파일러입니다 .

그래서 가상돔에서 작업하지 않아도 됩니다.

 

일단 가볍게 스벨트에 대해 알아 보았습니다.

 

 

참고문서 https://svelte.dev/ 공식사이트