Svelte를 시작하며

들어가며

나는 여지까지 Vue.js, React.js를 사용해서 프로젝트를 한 경험이 있다. 그러다가 새로운 프레임워크를 활용해서 사이드 프로젝트를 하고 싶다는 생각이 들었다. "어떤 프레임워크를 사용할까?" 고민을 하다가 지난번에 JS Framework & Library 트렌드라는 주제로 글을 썼던 당시를 회상했다.

 

📚지난 글 보기

JS Framework & Library 트렌드

 

내 눈길을 끌었던 프레임워크는 Svelte이었다. 지속적으로 유저들한테 관심을 받고 있고 사용률도 늘어나고 있다. 호기심 천국인 나는 Svelte를 활용해서 새로운 프로젝트에 도전하기로 결심했다. 

그래서 오늘은 Svelte가 무엇인지에 대해 살펴보고자 한다. 

 

SVELTE란?

Svelte 사이트

 

Svelte 사이트에 들어가자마 보이는 문구는 cybernetically enhanced web apps이다. 인공 지능(AI)와 같은 첨단 기술이 통합되어 한층 더 업그레이드 된 웹 애플리케이션이라는 뜻이다. 문구만 봐도 호기심을 잔뜩 불러온다. 

 

Svelte에는 3C가 존재한다고 설명한다. compiled, compact, complete 차례대로 살펴보자. 

 

1️⃣ compiled: Svelte는 가능한 많은 작업을 브라우저에서 제거하고 빌드 단계로 옮긴다. 더 이상 수동적인 최적화가 필요 없다. 단지 더 빠르고 효율적인 앱만 존재한다. Svelte는 가상 DOM을 사용하는 React, vue와 달리 실제 DOM에 바로 반영한다. Svelte는 앱을 실행 시점(Run time)에서 해석하지 않고 빌드 시점에서 Vanilla JavaScript Bundle로 컴파일하여 속도가 빠르고 따로 라이브러리를 배포할 필요가 없어 간편하다. 실제로 React와 어떤 차이가 있는지 다음시간에 살펴보겠다.  

 

2️⃣ compact: Svelte는 우리가 알고 있는 HTML, CSS 그리고 JavaScript를 사용해서 놀랄만큼 간결한 컴포넌트를 작성할 수 있다. 그리고 번들 크기도 매우 작을 것이다. 과연 얼마나 간결할까? 

 

Ex) React code

import React, { Component } from 'react';

class App extends Component {
  ...
  render() {
    return (
      <div>Hello world!</div>  
    );
  }
}

React code를 보면 boilerplate(반복되는 코드 패턴)이 존재한다. 지금이야 클래스 컴포넌트 대신 함수형 컴포넌트를 사용해서 많이 간편해졌기는 하지만 여전히 귀찮다. 그럼 Svelte는 어떨까?

 

Ex) Svelte code 

<script>
let name = "teo.yu"
</script>

<div>Hello world! {name}</div>

<style>
div { color: red }
</style>

 

React code보다 훨씬 간결하다. boilerplate도 없고 문법도 우리가 알던 것이며 쉽다. 그래서 HTML, CSS, JS를 아는대로 쓰면 된다. 

 

3️⃣ complete: Svelte는 내장된 범위 지정 스타일링, 상태 관리, 모션 기본 요소, 폼 바인딩 등 필수 요소를 찾기 위해 npm을 뒤지는 시간을 낭비하지말자. 모든 것이 Svelte에 있다고 설명한다. 

 

 

 

마무리하며

오늘은 첫 시간으로 Svelte에 대해서 살펴보았다. Svelte는 2023년 6월 23일 기준으로 4.0.0버전까지 나와있다. 지속적인 업데이트를 하면서 성능 업그레이드, 개발자 경험 향상에 주력하고 있다. 다음 시간에는 React와 Svelte가 어떤 차이가 있는지 살펴보겠다.