[Svelte] 가볍고 빠른 웹 프레임워크, 스벨트(Svelte) 기초 이론 알아보기

 

안녕하세요, 성조입니다.

오늘은 스벨트에 대해 간략하게 소개하는 시간을 가져보려 하는데요.

Next.js를 공부하다가 조금은 뜬금 없이 스벨트를 가지고 온 것 같지만(?) 이번 프로젝트에서 Next 최신 버전을 도입하는 것 보다 가벼운 프로그래밍으로 스벨트를 도입하는 것으로 결론을 지어서 선택하게 됐어요! 🤔🤓😊

오늘은 가벼운 개요를 진행하고, 다음 포스팅에서는 세팅과 조금 더 심화된 코드를 구현해보려 해요.

 

---

스벨트(Svelte)란?

스벨트는 빠르고 가벼운 웹 애플리케이션을 쉽게 만들 수 있게 돕는 자바스크립트 프레임워크다. 컴파일 타임에 코드를 변환해서, 런타임에 불필요한 작업을 줄여주는 것이 특징이다. 다른 프레임워크가 가상 DOM을 사용해 업데이트를 관리하는 것과 달리, 스벨트는 컴파일된 코드로 직접 DOM을 수정해 성능을 최적화한다.

 

스벨트의 특징

- 간단하고 직관적인 문법: HTML, CSS, JavaScript로 컴포넌트를 작성해 배우기 쉽다.

- 빠른 성능: 가상 DOM 없이 직접 DOM 조작으로 앱 성능이 뛰어나다.

- 작은 번들 크기: 불필요한 코드를 줄여 빠른 로딩이 가능하다.

 

다른 프레임워크와의 차이점

- 리액트, 뷰는 가상 DOM을 사용해 UI 업데이트를 관리하지만, 스벨트는 가상 DOM 없이 직접 DOM을 업데이트해 빠르게 동작한다.

- 컴파일 단계에서 코드를 최적화해 더 가벼운 애플리케이션을 만든다.

- 코딩애플님의 정상화 노래

 

스벨트를 선택해야 하는 이유

- 스벨트는 정적 사이트, 간단한 웹 앱, 경량화가 중요한 프로젝트에 유용하다. 저사양 디바이스에서도 부드럽게 동작하므로, 퍼포먼스와 가독성이 중요한 경우에 적합하다.

 

간단한 예제 코드

// Counter.svelte
<script>
  let count = 0;
  function increment() { count += 1; }
</script>

<button on:click="{increment}">Count: {count}</button>

 

 

---

짧고, 가볍게 스벨트에 대해 다뤄봤어요! 다르게 전달 된 정보가 있다면 언제든지 댓글로 공유해 주시면 감사드리겠습니다.

(사실 유데미도 대략 이정도 느낌으로 정리된 것 같아서..)

 

그럼 다음 포스트에서 뵙겠습니다!