DEVOCEAN

<Gen.View | FE - #1> 굳이 Svelte 를 선택한 이유

AI Data ML서비스개발팀

김우영 (ddsksw01@sktelecom.com)

[Gen.View | FE] 시리즈에서 다룰 (다룬) 기술 Stack

* Web
    * Svelte (w/ Sveltekit)
    * Tailwindcss (w/ DaisyUI)
* App
    * Flutter
* Etc
    * AWS, Netlify
    * Docker, Docker-compose
    * GitAction & Pulumi (IaC)

<Gen.View | FE> 시리즈 - 지난 게시글

• 〈Gen.View | FE - #0〉 비개발 직군의 Frontend 업무 적용 스토리

왜 하필 Svelte 인가요? 아직 시기상조 아닐까요?

쉽고, 빠르고, 직관적인 Web Framework

트렌드

Javascript 가 Web 표준 개발 언어기 때문에, 자연스럽게 해당 언어에 기반한 Web Framework (혹은 Library) 는 짧은 시간 내 굉장히 많이 생기고, 동시에 많이 사라지고 있는 것 같습니다.

Web Framework 를 선택하는 것이 더욱 어려운 이유는, Frontend 분야의 트렌드가 다른 개발 분야에 비해 비교적 빠르게 변화하고 있기 때문입니다.

실제로, 지난 10년 사이에 크고 작은 지각 변동이 수차례 있었던 것 같습니다.

2010년대 초반에는 jQuery, 2010년대 중반에는 Angular, 2010년대 후반 이후에는 React 와 Vue 가 Web Framework 핵심 트렌드였던 것 같습니다.

개인적으로는 대부분의 기간을 Frontend 분야와 친숙하게 지내지 않았기 때문에, 위와 같이 빠르게 변하는 Frontend 업계 트렌드를 그저 '옆동네 불구경' 정도로 생각했던 것 같습니다.

막상 Web 개발 공부를 시작하려다 보니 꽤나 많은 선택지 앞에서 당황했고, 실제로 공부하고자 하는 Web Framework 를 선택하는 과정에서 많은 고민을 하게 되었습니다.

안정적인 선택지 (React, Vue)

현재 시점에서 Javascript 기반의 Web Framework 를 선택할 때, 가장 안정적인 옵션은 의심의 여지없이 React 혹은 Vue 입니다.

Frontend 분야에서 이미 전세계에서 큰 비중으로 활용되고 있기에, 개발 안정성이나 확장 가능성은 보장되었다고 해도 무방합니다.

실제로, Frontend 분야의 채용 시장도 모두 React, Vue 중심으로 열려 있고, 온라인과 오프라인 구분할 것 없이 대부분의 학습 자료는 해당 Web Framework 위주로 구성되어 있습니다.

또한, 현실적으로 개발자들에게 굉장히 중요한 요소로 작용하는 커뮤니티 성숙도 측면에서 압도적인 모습을 보이고 있습니다.

직면한 문제가 무엇이든, 대부분 Google 혹은 Youtube 에 이미 해당 문제를 경험하고 해결한 사례가 존재하기 때문에

React, Vue 에 익숙하지 않은 개발자더라도 풍부한 Reference 를 통해 어렵지 않게 궁금증을 해결할 수 있습니다.

심지어, ChatGPT 도 다른 Web Framework 와 관련된 질문보다는 React, Vue 와 관련된 질문에 보다 명쾌한 해결책을 제시하는 경우가 많습니다.

도전적인 선택지 (Svelte)

처음 Svelte 를 접하게 된 계기는 '노마드 코더' 라는 유튜버의 Svelte 소개 영상이었습니다.

Frontend 분야에 대한 기본 지식이 부족했기에, Svelte 를 추천하는 다양한 이론적인 (Virtual DOM 을 사용하지 않는다든가, 경량화 되었다든가, 실질적인 의미의 Reactive 특성이 구현된 형태다든가 하는) 강점보다는,

초심자 입장에서 가시적으로 느낄 수 있을 정도의 간결한 Code 형태가 굉장히 매력적으로 다가왔습니다.

(Svelte 는 Framework 보다는 Compiler 로 분류되지만 편의상 Framework 로 지칭하겠습니다.)

이를 계기로, Svelte 라는 Web Framework 에 관심을 가지고 다양한 자료를 찾아보기 시작했습니다.

하단에 첨부된 이미지와 같이, 2022년 Survey 결과에 의하면 Javascript 기반 Web Framework 중 (React 와 Vue 를 제치고) 개발자들이 가장 만족한 Framework 라는 결과도 큰 강점으로 느껴졌습니다.

또한, React 진영의 Next.js 와 같이 Full-stack 개발이 가능한 Sveltekit 의 정식 버젼 (v1.0) 이 출시된 시점이었기에 Svelte 에 대한 배움의 의지는 점차 강해졌습니다.

(직후 게시글에서 Sveltekit 을 다룰 예정입니다.)

Svelte 를 선택한 이유

현재 시점에서, Svelte 를 자신의 주력 Web Framework 로 선택하는 것은 리스크가 큰 판단입니다.

커뮤니티 성숙도 또한 높지 않기 때문에 Svelte 를 공부하는 것이 시기상조 일 수 있다는 의견에도 크게 반박할 여지는 없어 보입니다.

아직은 '다윗'의 위치이기에, 특히나 Frontend 분야의 개발자로 커리어를 시작하고자 하는 입장에서는 채용 관점에서 좋은 선택지가 아닌 것 같습니다.

그럼에도 불구하고 Svelte 를 선택하고자 한다면, Svelte 의 발전 방향과 실제 기업들의 채택률을 꾸준히 지켜보며 조금은 가벼운 마음으로 공부를 시작해보는 것이 가장 현명해 보이는 시점인 것 같습니다.

개인적으로 Svelte 는 Frontend 가 아닌 다른 분야의 (Backend 혹은 AI) 개발자 혹은 비개발 직군이 Frontend 분야의 기술 역량을 보조적인 강점으로 활용하는 입장에서 가장 적합한 Web Framework 라고 판단하고 있습니다.

또한, 새로운 개발 언어나 Framework 를 배우는 것에 큰 두려움이 없는 성향을 가지고 있다면 더욱 흥미롭운 선택지입니다.

해당 상황에서 동일한 기능을 갖춘 Web-application 을 React, Vue, Svelte 각각의 공식 문서를 참고하여 튜토리얼 방식으로 만들다보면, 자연스럽게 Svelte 의 매력에 빠져들 수 있습니다.

상태 변수에 기반하여 동적인 Counter Application 화면을 만드는 아래의 예시를 통해 Svelte 의 간결하고 직관적인 Code 형태를 쉽게 확인할 수 있습니다.

• React

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default App;

• Vue

<template>
  <div>
    <h1>Counter: {{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
};
</script>

• Svelte

<script>
  let count = 0;

  function increment() {
    count += 1;
  }
</script>

<div>
  <h1>Counter: {count}</h1>
  <button on:click={increment}>Increment</button>
</div>

아래의 내용은 Svelte 의 강점을 묻는 질문에 ChatGPT 가 답변한 사항입니다.

길지는 않은 시간이었지만 개인적으로 여러가지 Web Framework 를 경험해본 결과, 특히 2~3번 강점을 깊이 체감할 수 있었습니다.

기본적인 HTML, Javascript 문법을 숙지한 상태에서, 직관적으로 생각하고 손이 가는 대로 Code 를 작성하면 원하는 기능이 실제 Web 에서 구현되는 신기한 경험을 했습니다.

이처럼 즐거운 초기 학습 과정을 통해 Svelte 에 대한 호감을 더욱 키웠습니다.

Svelte 를 처음 경험하고 빠져들게 된 시기는, 아직까지도 Frontend, Backend, AI 등 모든 분야를 통틀어 새로운 개발 언어나 Framework 를 접하는 과정에서 느꼈던 가장 긍정적인 개발 경험으로 남아있습니다.

[Svelte 강점에 대한 질문 - ChatGPT 의 답변]
1. 컴파일러 기반의 효율성
- 빠른 런타임 성능: Svelte는 컴파일러 기반 프레임워크로, 런타임에 프레임워크가 필요하지 않습니다. 코드를 컴파일 단계에서 최소화하고 최적화하기 때문에 React나 Vue에 비해 더 빠른 런타임 성능을 제공합니다.
- 작은 번들 크기: 컴파일 단계에서 필요한 코드만 포함하여 번들 크기가 작습니다. React나 Vue는 런타임 라이브러리와 함께 번들링되기 때문에 상대적으로 더 큰 번들 크기를 갖게 됩니다.

2. 더 간단하고 직관적인 문법
- 간결한 코드: Svelte는 HTML, CSS, JavaScript를 자연스럽게 활용하여 컴포넌트를 작성하기 때문에 React의 JSX나 Vue의 템플릿 구문에 비해 더 간단하고 직관적입니다. 이로 인해 코드가 읽기 쉽고 작성하기도 수월합니다.
- 간단한 상태 관리: Svelte에서는 상태 관리를 위해 복잡한 라이브러리나 패턴을 도입할 필요가 없습니다. 반응형 변수를 통해 상태를 관리할 수 있어 React의 useState, useEffect 훅이나 Vue의 reactivity 시스템을 배우지 않아도 쉽게 시작할 수 있습니다.

3. 낮은 진입 장벽과 빠른 학습 곡선
- 빠른 시작: Svelte는 설정이 간단하고 기본 문법이 쉬워서 React나 Vue에 비해 더 빠르게 프로젝트를 시작할 수 있습니다. 특히, 설정 파일이나 복잡한 구성 요소 없이도 간단한 애플리케이션을 구축할 수 있습니다.
- 초보자 친화적: Svelte는 기존 웹 기술에 익숙한 사람들에게 친숙하며, HTML, CSS, JavaScript를 그대로 사용할 수 있기 때문에 웹 개발 초보자에게 더 쉽게 접근할 수 있습니다.

4. 내장된 기능의 활용
- 내장된 애니메이션과 전환 효과: Svelte는 기본적으로 애니메이션과 전환 효과를 지원합니다. 추가적인 라이브러리를 설치하지 않아도 간단한 애니메이션을 구현할 수 있어, 인터랙티브한 UI를 만들기가 쉽습니다.
- 컴포넌트 스코핑된 CSS: Svelte에서는 컴포넌트 내에서 작성한 스타일이 자동으로 스코핑되어 다른 컴포넌트와 충돌하지 않습니다. 이 기능은 React나 Vue에서도 가능하지만, Svelte에서는 더 자연스럽고 간단하게 처리됩니다.

5. 가상 DOM의 부재로 인한 효율성
- 직접 DOM 조작: React나 Vue는 가상 DOM을 사용하여 변경 사항을 관리하지만, Svelte는 컴파일 단계에서 직접 DOM 조작을 위한 코드를 생성합니다. 이는 DOM 업데이트를 더 효율적으로 처리하고, 개발자가 가상 DOM을 이해하거나 관리할 필요가 없도록 해줍니다.

6. 보다 일관된 성능
- 재렌더링 최소화: Svelte는 상태 변경 시 필요한 부분만 업데이트하도록 컴파일되기 때문에 불필요한 재렌더링을 줄여줍니다. React나 Vue에서의 최적화 작업(예: React의 shouldComponentUpdate 또는 Vue의 컴포넌트 업데이트 라이프사이클)이 Svelte에서는 대부분 필요하지 않습니다.

핵심적인 기능을 쉽고 빠르게 Web 으로 구현하고자 하는 명확한 목표를 가지고 Demo Web 를 만들거나 Admin Web 을 구축해야 하는 상황이라면,

Svelte 가 최적의 선택지라는 확신을 가지게 되었습니다. 이로 인해, Gen.View 프로젝트에 사용할 Web Framework 로 Svelte 를 선택하게 되었습니다.

Svelte 의 매력 포인트

Svelte 를 사용하며 매료되었던 몇 가지 매력 포인트를 간략히 정리하며 글을 마무리하고자 합니다.

편리한 상태 관리 & 반응형 선언문 (Reactivity)

Svelt 를 사용하면, Javascript 언어로 선언한 변수를 별도의 복잡한 상태 관리 Library 없이 그대로 활용할 수 있습니다.

즉, 간단히 선언한 변수의 값이 변경되면 자동으로 UI 가 Update 됩니다. 또한, 복잡한 계산이나 의존성을 관리할 때는 반응형 선언문 ($:) 을 사용할 수 있습니다.

이는 특정 변수나 값이 변경될 때마다 자동으로 관련 Logic 을 실행시켜, 상태 Update 를 더욱 쉽게 처리할 수 있습니다.

<script>
  let count = 0;

  // count가 변경될 때 자동으로 실행
  $: double = count * 2;
</script>

<p>Count: {count}</p>
<p>Double: {double}</p>

<button on:click={() => count += 1}>Increment</button>

편리한 스타일 지정 (Scoped CSS)

Svelte 를 사용하면, 동일한 파일에 작성한 Style 지정 사항이 자동으로 해당 Component 에 적용됩니다. 별도의 설정 없이 스코프가 지정된 CSS 를 사용할 수 있습니다.

<h1>Hello, styled text!</h1>
<style>
  h1 {
    color: blue;
  }
</style>

편리한 HTML 활용

Svelte 를 사용하면, 다른 Web Framework 와 달리 JSX 나 별도의 Template 문법을 따로 숙지할 필요가 없습니다. HTML, CSS, JavaScript 를 그대로 사용하여 Code 를 작성할 수 있으며 DOM 조작이 직관적입니다.

<script>
  let name = '';
</script>

<input type="text" bind:value={name} placeholder="Enter your name" />
<p>Your name is: {name}</p>

Frontend 개발 직군이 아닌 비전문가가 Frontend 분야를 학습하는 과정에서 경험할 내용들을 이어질 [Gen.View | FE] 시리즈에서 공유해드릴 예정입니다.

잘못된 내용에 대한 지적 사항이나 문의 사항이 있다면 언제든지 편하게 연락해주세요!