And Brain said,

Svelte, 프론트엔드 판도에 등장한 오컴의 면도날 본문

IT/Svelte

Svelte, 프론트엔드 판도에 등장한 오컴의 면도날

The Man 2023. 4. 9. 22:46
반응형

 

목차
기존 웹프레임워크들과의 차이점, Svelte만의 장점
그럼에도 불구하고 부족한 이유

 

오늘은 최신 웹프레임워크 Svelte에 대해 간단히 알아보자.

 

Svelte는 현재 굉장히 핫하지만 그 점유율은 매우 미약한 신생 프론트엔드 프레임워크다.

 

왜 Svelte가 실제 사용률은 미비하지만 주목은 받고 있는지 알아보는 시간을 가져보자.

 

 


기존 웹프레임워크들과의 차이점, Svelte만의 장점

 

 

 

전통적인 웹 프레임워크들과 달리, Svelte는 가상 DOM이 없다.

 

프론트엔드 역사를 고려하면 이는 꽤 의아한 일인데, 이미 이전에 실제 DOM을 직접 업데이트하는 방식이 사용되었으나 성능 저하 문제로 가상 DOM이 등장했기 때문이다.

 

가상 DOM은 DOM 트리를 빠르게 업데이트하는 능력을 제공해 React, Vue 등의 프레임워크 성능을 향상시켰다.

이처럼 기존 웹 프레임워크들은 가상 DOM과 같은 기술을 도입하며 발전해갔지만, 이로 인해 추가적인 런타임 오버헤드가 발생하고 개발자들이 이해하고 구현하기 어려워졌다.

그리하여 등장한 것이 Svelte인데, Svelte는 과감하게 가상 DOM을 잘라내고 실제 DOM에 접근하는 방식으로 회귀했다.

 

이것이 가능해진 이유는 바로 컴파일러 기반 웹 프레임워크라는 혁신적인 접근 방식 덕분이었다.

 

일반적인 프레임워크들은 브라우저에서 애플리케이션 실행 시 런타임에 프레임워크 로드가 필요하지만, Svelte는 컴파일 시간에 앱 코드를 일반 JavaScript 코드로 변환해 브라우저에서 코드를 빠르게 해석한다.

이로 인해 Svelte는 작은 번들 크기를 가지며, 초기 로딩 시간이 짧아지고, 더 빠른 속도로 애플리케이션을 렌더링한다. 

 

더욱이 가상 DOM이 아닌 실제 DOM을 사용하므로 성능 면에서도 우위를 점한다.

그 외에도 Svelte는 자동 코드 생성 기능, 단일 파일 컴포넌트 구조, 다국어 지원 등 편리한 기능과 낮은 학습 곡선을 제공하고 있다. 

 


그럼에도 불구하고 부족한 이유

 

 


먼저, Svelte는 상대적으로 신생 프레임워크로, 최근 많은 개발자들의 관심을 받고 성장하고 있는 커뮤니티를 갖추고 있지만, 아직까지는 다른 프레임워크들에 비해 커뮤니티 규모가 상대적으로 작다.

두 번째로, Svelte는 React, Angular, Vue와 같은 경쟁 프레임워크들에 비해 상대적으로 생태계가 덜 발달되어 있다. 이는 라이브러리와 플러그인 등의 선택지가 다른 프레임워크에 비해 적을 수 있다는 것을 의미한다.

마지막으로, Svelte는 TypeScript를 지원하긴 하지만, 다른 프레임워크들에 비해 아직 TypeScript 지원이 부족한 편이다. 이로 인해 일부 개발자들이 TypeScript 환경에서 Svelte를 사용하는 데 어려움을 겪을 수 있다.

 


끝으로,

 

 

Svelte는 가벼움과 빠른 속도, 직관적인 학습 곡선, 그리고 다양한 기능을 제공하여 개발자들에게 매력적인 선택지로 다가서지만, 아직 커뮤니티 규모, 생태계 및 TypeScript 지원 면에서 한계가 있다.

그렇지만 최근에 Svelte는 많은 개발자들의 관심을 끌어 큰 커뮤니티를 구축하고 있으며, 지속적으로 발전하는 생태계와 문서화 덕분에 앞으로 더 많은 개발자들에게 사랑받는 웹 프레임워크로 성장할 것으로 기대된다. Svelte는 계속해서 발전하고 있으므로, 그 성장을 지켜보며 앞으로의 가능성에 기대를 걸어보며 Svelte 소개는 이쯤에서 마무리 짓는다.

 

 

 

Thanks for watching, Have a nice day.

 


References

https://svelte.dev/blog/svelte-3-rethinking-reactivity

https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075/

https://www.swyx.io/svelte-why

반응형
Comments