Svelte란?

Front-End/svelte

Svelte란?

DEV_GOLF 2024. 2. 17. 17:37

svelte는 UI를 그리기 위한 javascript 기반 framework로 2016년 비교적 최근에 출시되었습니다. 이 framework는 많은 사랑을 받고 있기도 한데요. state Js of 2023 사이트의 자료에 의하면 매우 높은 비율로 흥미를 보이고 있습니다.

그럼 svelte에 대해 알아볼까요?

real-dom 기반의 framework

보통 react나 vue.js 같은 대중적인 js framework는 대다수가 virtual dom 기반의 spa를 지원합니다. 이유는 간단한데요 DOM을 경량화하여 가상으로 존재하게 하여 실제 DOM을 렌더링하는 것 보다 성능상으로 이점이 많기 때문입니다. VDOM은 전체 UI를 VDOM에 재렌더링하고 이전 VDOM과 비교하여 변경된 부분만 실제 VDOM에 적용합니다. 이러한 과정을 통해 DOM 조작을 최소화 했었습니다.

하지만 VDOM 또한 다음과 같은 단점이 있습니다.

오버헤드: VDOM을 사용할 경우 새로운 가상 DOM 트리를 생성하고 이를 이전 트리와 비교하여 변경사항을 탐색합니다. 하지만 이 과정은 변화가 많이 없음에도 전체 트리를 재생성하고 비교해야하기 때문에 변경이 적은 경우 오버헤드 비용이 발생합니다.
메모리 사용: VDOM은 메모리 상에 전체 DOM 트리의 복사본을 유지합니다. 이는 애플리케이션 규모에 따라 더 많은 메모리를 사용하여 리소스에 민감한 환경에서는 단점이 될 수 있습니다.

Svelte는 이 문제를 해결하기 위하여 UI 컴포넌트를 최적화된 JS 코드로 변환하는 접근 방식을 이용해 해결하였습니다.

런타임 오버헤드 감소: VDOM을 더 이상 사용하지 않습니다. 대신, 컴파일 타임에 애플리케이션의 구조를 분석하여 필요한 DOM 업데이트를 수행할 최소한의 코드를 생성합니다. 이는 불필요한 코드 계산을 줄이고, 런타임 성능을 향상시킵니다.
메모리 최적화: VDOM과 다르게 메모리에 가상 트리를 유지하지 않습니다. 때문에 메모리 효율성이 증대합니다.
코드량 감소: 상태 변경이 발생할 때 필요한 코드만 실행하여 DOM을 업데이트하기 때문에 코드량이 react나 vue.js에 비해 현저히 줄어듭니다.

특히 코드량 감소는 생산성과 이어지기 때문에 더욱 매력적으로 느껴집니다.

<script>
  let email = '';
  let password = '';

  const login = async() => {
     // 로그인 로직
     console.log(email, password);
  };
</script>

<form on:submit|preventDefault={login}>
  <input type="email" bind:value={email} placeholder="Email">
  <input type="password" bind:value={password} placeholder="Password">
  <button type="submit">Login</button>
</form>

import React, { useState } from 'react';

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const login = async(e) => {
    e.preventDefault();
    
    // 로그인 로직
    console.log(email, password);
  };

  return (
    <form onSubmit={login}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
}

export default Login;

<template>
  <form @submit.prevent="login">
    <input type="email" v-model="email" placeholder="Email">
    <input type="password" v-model="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 로그인 로직
      console.log(this.email, this.password);
    }
  }
}
</script>

보다 싶이 확연히 svelte의 코드가 적은 것을 확인할 수 있습니다. 이는 개발자 생산성에 큰 영향을 끼칩니다.

내가 Svelte를 선택한 이유 (feat. Server Engineer 에게 추천하는 이유)

블로그를 읽어오신 여러분들은 아실겁니다. 제가 Server Engineer라는것을요. 그럼 저는 svelte를 어쩌다 선택하게된 걸 까요?

정답은 비교적 익숙한 코드를 짤 수 있다는 장점입니다. 한 번 우리가 자주 쓰는 thymleaf 코드를 보실까요?

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <form th:action="@{/login}" method="post" id="loginForm">
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required />
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required />
        </div>
        <div>
            <button type="submit">Login</button>
        </div>
    </form>

    <script>
        document.getElementById("loginForm").addEventListener("submit", function(event) {
            var email = document.getElementById("email").value;
            var password = document.getElementById("password").value;
            if (email.trim() === "" || password.trim() === "") {
                alert("Email and password are required.");
                event.preventDefault(); // 폼 제출을 방지하여 서버로 전송되지 않게 합니다.
            }
            // 여기에 추가적인 클라이언트 측 유효성 검사 로직을 구현할 수 있습니다.
        });
    </script>
</body>
</html>

어딘가 닮은 점이 없나요? 네 맞습니다. <script>에 js 문법을 정의하고 js를 이용하여 html에 입력된 email password로 서버에 로그인 요청을 보냅니다. svelte도 매우 유사한 구조를 띄고 있죠. 그렇기 때문에 필자는 꽤 쉽게 svelte에 적응할 수 있었습니다. 또한 svelte는 SPA를 달성할 수 있기 때문에 코드량이 thymleaf 같은 html 템플릿 엔진보다 훨씬 감소하고 빠른 개발이 가능해집니다. 재사용 또한 가능합니다.

이번 포스팅에선 svelte를 왜쓰는지 svelte에 대한 소개였다면 다음엔 svelte의 컴파일 과정과 문법등 좀 더 기술 소개에 가까운 포스팅으로 돌아오겠습니다. 읽어주셔서 감사합니다!

출처.

https://svelte.dev/docs/introduction

Introduction • Docs • Svelte

Edit this page on GitHub On this page On this page Welcome to the Svelte reference documentation! This is intended as a resource for people who already have some familiarity with Svelte and want to learn more about using it. If that's not you (yet), you ma

svelte.dev

https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/#front_end_frameworks_experience_linechart

State of JavaScript 2022: Front-end Frameworks

This chart splits positive (“want to learn”, “would use again”) vs negative (“not interested”, “would not use again”) experiences on both sides of a central axis. Bar thickness represents the number of respondents aware of a technology.

2022.stateofjs.com