티스토리 뷰
Svelte의 개념
Svelte는 빠르게 웹 애플리케이션을 구축할 수 있는 도구이다. Svelte는 자바스크립트 기반의Front-end Web Framework로, 애플리케이션을 구축하기 위한 프레임워크로서 개발자가 UI를 작성하는 방식을 변화시키는 새로운 접근 방식을 제공한다. Svelte는 2016년 Reactive를 개발한 Rich Harris에 의해 개발되었으며, 2018년에 처음 공개되었다.
Svelte는 기존의 React, Vue 등 대부분의 Front-end Web Framework가 가지고 있던 단점을 보완해서 가볍고 빠른 개발을 가능하게 하기 위해여 개발되었다.
Svelte는 "Framework without Framework"라는 개념으로 설계하여 HTML에 애플리케이션을 표기하는데 필요한 작은 JavaAScript만 로드할 수 있는 컴파일러 형태로 만들어져서 빠른 속도, 적은 번들 크기, 쉬운 구현 및 배포 등의 장점을 가지고 있다.
다시말해, Svelte는 컴파일러를 사용하여 애플리케이션을 생성하며, 가상 돔 대신에 변경사항을 추적하고 효율적으로 렌더링하는 방식을 채택하고 있습니다. 이를 통해 개발자가 작성한 코드를 최적화하고 불필요한 렌더링을 방지하여 성능을 향상시키며, 번들 크기를 줄일 수 있다.
Svelte의 주요 특징
1. Write less code
Svelte는 컴파일러를 사용하여 최적화된 코드를 생성하며, 불필요한 코드를 제거하여 번들 크기를 줄였을뿐만 아니라, 개발자가 작성해야 하는 코드의 양을 줄이는 것을 목표로 개발되었다. 다음 그림은 Svlte와 React, Vue를 이용한 개발자 코드 크기의 비교에 관한 것이다.
2. No Virtual DOM
Virtual DOM이란 데이터가 바뀔때 화면이 어떻게 갱신되어야 할지를 미리 판단해서 변경된 부분만 실제 DOM에 전달해서 리소스를 절약하는 방식이다. Vue, React의 경우Virtual DOM을 사용해서 실제 DOM을 사용하는 경우보다 빠르게 동작한다. 하지만, 이 과정에서 Virtual DOM에서 어떻게 갱신할지 비교하는 과정을 Diffing이라 하는데 시간과 메모리의 Overhead가 발생한다.
Svelte는 Virtual DOM을 사용하지 않아 Diffing Overhead가 발생하지 않고, 실제 DOM을 갱신하는 역할만 수행한다. 이를 통해 변경된 위치를 정확하게 알 수 있어 DOM을 비교하는 runtime framework가 필요하지 않게 되었으며, Diffing과정을 거치지 않아서 리소스 절약 및 빠른 성능을 확보할 수 있게 되었다
3. Truly reactive (JavaScript 자체의 반응성 제공)
Vue, React는 Runtime에 Virtual DOM을 비교하여 변경된 내용을 파악하는 방식이나 Svelte는 Build time에 어느 부분이 변경될지 파악하는 방식으로 어느 부분이 변경되는지 파악하여 해당 부분의 state가 변경될 경우 반응형으로 화면을 갱신하는 형태로 동작한다. 즉, DOM 변경되 내용을 확인하기 위한 Runtime Framwork를 포함하지 않고 순수한 Javascript로 결과물을 만들어서 브라우저에 동작을 시킨다.
4. Automated update
Svelte는 선언 변수를 기반으로 자동으로 데이터 업테이트가 가능하다. 변경 사항이 가상 구조에 반영될때 까지 기다리 않아도 자동으로 업데이트되어 개발효율을 증가한다.
하지만 Svelte에 장점만 있는 것을 아니며 다음과 같은 단점이 있다.
- 생태계의 부족: React나 Vue와 비교하면 아직은 생태계가 덜 발전된 편입니다. 따라서 커뮤니티나 오픈소스 기여도가 상대적으로 적을 수 있습니다.
- 학습곡선: React나 Vue와 달리 Svelte는 전혀 새로운 문법을 사용하므로, 초기 학습 비용이 높을 수 있습니다.
- 대규모 애플리케이션에 부적합: Svelte는 작고 단순한 프로젝트에 적합한 도구입니다. 하지만 대규모 프로젝트에서는 복잡성이 증가할 수 있습니다.
Svelte의 인지도
아래 그림은 State of JS 2021의 설문 결과 표이다.
첫번재 그림은 각 Front-end Web Framework의 사용현황을 보여주고 있으며, 두번째 그림에서는 설문 응답자들의 관심도를 보여주고 있다. Svelte의 경우 사용 현황은 중위 수준이지만, 설문의 응답한 개발자들의 관심도는 2019년 부터 상위에 랭크하고 있는 것을 볼 수 있으며, 향후 지속적으로 사용이 증가하지 않을까 조심스럼게 예측해 본다.
'기술사 Sketch > SW Eng.' 카테고리의 다른 글
| [정보관리 기술사] 크로스 플랫폼 앱 개발 프레임워크, Ionic Capacitor (48) | 2024.05.07 |
|---|---|
| [정보관리 기술사] Kubernetes Native Java Framework, Quarkus (49) | 2024.04.22 |
| [정보관리 기술사] AsyncAPI란 무엇이고 OpenAPI와 어떻게 다른가? (52) | 2024.02.13 |
| [정보관리 기술사] Data Gateway란 무엇인가? (60) | 2024.01.24 |
| [정보관리 기술사] Dapr(Distributed application runtime) 란 (45) | 2024.01.22 |