사이트 주소가 the1.wiki로 변경되었습니다.

Svelte (r20220720판)

문서 조회수 확인중...

웹 프레임워크 기술

[ 펼치기 / 접기 ]
Μ 모바일 전용 • Ο 오픈소스 • $ 유료 또는 유무료 • Χ 단종
프론트엔드
ReactO
GetsbyΟRemixΟ
VueO
VuePressΟGridsomeΟQuasarΟ
JS
PreactΟAngularOSvelteOBackbone.jsOEmber.jsOjQueryΟSolidJSΟInfernoΟ
백엔드
Java
SpringΟ
JS
ExpressΟkoaΟNestJSΟ
.NET
ASP.NETΟ$
PHP
LaravelΟCodeigniterΟReasonableΟphalconΟSymfonyΟzendΟCakePHPΟFuelPHPΟYiiΟSlimΟPHPixeΟ
Python
DjangoΟFlaskΟ
Ruby
Ruby on RailsΟ
풀스택
React
Next.jsΟ
Vue
Nuxt.jsΟ
JS
SvelteKitΟFreshΟ
하이브리드
.NET
BlazorΟ






스벨트
Svelte
파일:Svelte 로고.svg
제작자
Rich Harris
분류
웹 프레임워크
출시
2016년 11월 26일
언어
JavaScript
버전
3.43.0
라이선스
MIT 라이선스
링크
파일:홈페이지 아이콘.svg 파일:GitHub 아이콘.svg 파일:트위터 아이콘.svg 파일:디스코드 아이콘.svg

1. 개요
2. 특징
3. 예시
4. SvelteKit
5. Svelte를 사용하는 웹 사이트/프로그램
6. 도서
7. 여담
8. 관련 문서



1. 개요[편집]


Svelte는 2016년 출시한 오픈 소스 프론트엔드 웹 프레임워크이다. 기존의 ReactVue.js 등의 널리 알려진 웹 프레임워크와 달리, 가상 DOM을 사용하지 않으며 빌드 단계에서 구성 요소를 컴파일하여 성능이 향상되었다.


2. 특징[편집]


  • 실제 DOM을 사용, 컴파일러
가상 DOM을 사용하는 대표적인 웹 프레임워크인 React는 각 구성 요소를 만들면 가상 DOM 객체가 만들어지고, 실제 DOM과 가상 DOM을 비교하여 변경 사항을 실제 DOM으로 업데이트하는 방식으로 작동한다.
반면, Svelte는 이 과정을 생략하고 바로 실제 DOM을 반영한다. Svelte는 앱을 실행 시점(Run time)에서 해석하지 않고 빌드 시점(Build time)에서 Vanilla JavaScript Bundle로 컴파일하여 속도가 빠르고 따로 라이브러리를 배포할 필요가 없어 간편하다.
document.querySelector 등의 함수를 사용하여 실제 DOM 접근 및 제어가 더욱 간편한 장점이 있다. 가상 DOM을 사용하는 리액트, 뷰에서는 성능 저하 등의 이유로 실제 DOM을 제어하는 걸 되도록 피하기 위해서 Vue에서는 ref를 사용하고, React에서는 refs, useRef 등의 편법을 사용해야 한다.

  • 비교적 간소화된 소스코드, 상대적으로 작은 용량
React나 Vue.js와 비교했을 때 훨씬 적은 양의 코드로 동일한 결과물을 만들어낼 수 있으며, 가독성이 좋은 점도 장점이다.
웹사이트가 거대해질수록 그로 인한 소스코드의 비대화는 수반될 수 밖에 없는데, 상대적으로 간소화된 소스 코드를 가지고 있음으로써 유지보수와 기능 추가 개발에서 효율성이 높아지는 것이다.


3. 예시[편집]


예를 들어, 두 개의 input 요소에서 숫자를 입력받고 그 숫자들을 더한 값을 출력해주도록 구현을 한다고 가정하자.

React에서는 다음과 같이 구축할 수 있다.

import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <Fragment>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    <Fragment/>
  );
};


Vue.js(버전 2 기준)에서는 아래와 같다.
<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">

    <p>{{a}} + {{b}} = {{a + b}}</p>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };
</script>


이를 Svelte에서 똑같이 구현을 하면 아래와 같다.
<script>
  let [a, b] = [1, 2];
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>


React는 442자, Vue.js는 263자의 코드를 작성해야 하지만, Svelte는 145자만 사용하여 동일한 결과물을 만들 수 있다. 이와 같이 Svelte는 훨씬 적은 양의 코드로 간결하게 표현하여 구축할 수 있는 장점 덕분에 작업에 있어 가독성을 향상시키고 시간도 절약할 수 있다.

해당 소스를 살펴보자면,
1. React에서는 input 태그에서의 양방향 바인딩을 지원하지 않아, input에 onchange 이벤트를 일일이 걸어 변수값을 변경해주도록 만들어줘야 하며, 또한 변수의 초기값 외에 setter 함수로 쓰일 변수와 useState라는 특유의 선언함수를 이용해야 한다(React Hooks). 그나마 과거 class 기반의 방식보다는 간단해진 버전이다. class 기반에서는 react.component 상속 및 생성자에서의 변수 설정이 추가적으로 필요했다. 또한 일반적인 html 렌더링 방식이 아닌 JSX(JavaScript eXtension)라는 특수한 방식으로 결과를 반환해주고 있다. (svelte에서는 @html과 비슷하다.[1])

2. vue에서는 v-model이라는 양방향 바인딩 지원으로 onchange를 선언할 필요는 없지만, 여전히 template 태그를 별도로 선언해야 하며, 일반적인 자바스크립트 방식의 방식과 다르게 객체 선언 등으로 데이터를 초기화해주고 있다.

참고로 반응형 문법을 쓰는 방식으로도 구현할 수 있다.[2]
svelte에서는 $: 로 끝나지만, vue.js에서는 'computed, watch'로 별도로 선언해야 하며, react에서는 해당 기능이 존재하지 않으며, 해당 효과를 흉내내기 위하여 일반적으로 useeffect(이전의 componentDidUpdate)등의 생명주기 hook를 이용해야 한다.
<script>
  let [a, b] = [1, 2];
  $: c = a + b;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {c}</p>



4. SvelteKit[편집]


웹사이트

구 Sapper로 알려져 있으며, 2021년 여름 Sapper 대체 및 웹 어플리케이션 개발 도구 통합을 목표로 개발 중인 툴킷이다. 기존 SPA 방식을 비롯하여, Sapper를 대체할 SSR(server side rendering) 솔루션 제공, Svelte 컴포넌트 개발 등 다양한 기능을 목표로 하고 있다. 참고로 React에는 Next.js, Vue.js에서는 nuxt.js가 이와 비슷한 역할을 하고 있다.

또한, npm build svelte 와 npm build sapper 등 예제 프로젝트 소스 및 개발 방식이 분화되어 있는 상태를 svelteKit 방식으로 일원화하기 위한 목적도 있으며, 해당 SSR 기능 솔루션 사용으로 CSR(Client-side rendering) 방식의 대표적인 문제점으로 지적되는 웹사이트 규모의 거대화로 인한 초기 로딩 소스 용량 비대화 및 지연을 최소화할 수 있는 장점이 있다.

자세하게 보자면, 기존 Svelte 상에서는 모든 소스를 웹사이트 초기 로딩 때 모두 다운로드받아야 하였으나, sveltekit(sapper)에서는 code splitting, chunk 등의 기능[3]을 SSR와 버무려서 사용함으로써 웹사이트 방문한 페이지에 따라 해당 방문 페이지에 필요한 컴포넌트만 로딩하고, 그 외의 컴포넌트는 로딩하지 않는 원리라고 볼 수 있다.

번들링은 Vite를 사용하고 있는데, 기존 Svelte에 사용하던 webpack 대체제인 Rollup 번들러 플러그인을 별도 수정 없이 그대로 사용하면서도, 빠른 개발 기능과 빠른 성장 속도로 인해 Sapper 당시 전환하려던 Snowpack 연동을 포기하고 수용한 것이다.

아직 SvelteKit와 Vite에서 개선할 점이 많으며, 특히 Vite 쪽의 SSR 기능에서 다양한 문제가 발생하고 있어 몇몇 SSR을 지원하는 Vue.js 기반 프레임워크 및 라이브러리도 Webpack을 쓰고 있는 실정이다. 그러나 이미 개발진들과 기여자들도 인지하고 있다. Svelte 개발진들 또한 Vite 개발에 기여하고 있고, 많은 개선이 이루어진 바가 있다. Vite 연동 현황에 관심이 있다면 이 이슈를 보도록 하자. 현재 기업에서 사용 중인 프론트엔드 삼국지 체제인 Angular, ReactVue.js 중 어느 프레임워크를 밀어낼 것인지 또한 관심사가 되고 있다.


5. Svelte를 사용하는 웹 사이트/프로그램[편집]


  • 뉴욕 타임스[4]
  • 스포티파이[5]
  • Brave[6]
  • Google Arts&Culture[7]
  • Facebook Your Home[8]
  • 오라클[9]
  • IBM[10]
  • IKEA[11]
  • 스퀘어[12]
  • Razorpay[13]
  • Les Echos[14]
  • 리그 오브 레전드[15]
  • 빌리빌리[16]
  • Stone Payments[17]
  • Godaddy[18]
  • 어베스트[19]
  • 1Password[20]
  • 라쿠텐[21]
  • Alaska Airline[22]
  • Chess.com[23]



6. 도서[편집]



가장 빨리 만나는 스벨트

7. 여담[편집]


제작자 Rich Harris 가 최근 Next.js 프레임워크로 유명한 독일 기업 Vercel 에 합류하면서, Svelte 개발에 더 많은 시간을 할애할 수 있다고 밝혔다. 기여자 위주의 제한적인 개발과 얼어붙은 커뮤니티에 활기를 불어넣어줄 것으로 기대하고 있다.

8. 관련 문서[편집]




파일:크리에이티브 커먼즈 라이선스__CC.png 이 문서의 내용 중 전체 또는 일부는 2022-07-17 09:23:24에 나무위키 Svelte 문서에서 가져왔습니다.

[1] https://svelte.dev/tutorial/html-tags[2] https://svelte.dev/tutorial/reactive-declarations[3] 소스를 작은 단위로 쪼개는 기능들이다.[4] 제작자가 해당 업체 소속 당시 일부 기사 페이지에서 사용[5] 랜딩 페이지에서 사용[6] 검색 기능에 사용[7] Cultural Crosswords 에 사용 출처[8] Your Home 프로젝트에 사용 출처[9] 오라클 CMS 서비스 개발에 사용 출처[10] IBM 카본 컴포넌트 프로젝트에 사용 출처[11] IKEA 웹사이트에 사용 출처[12] Square 개발자 페이지에 사용 출처[13] Razorpay 결제 다이얼로그에 사용 출처[14] 인터렉티브 뉴스 페이지에 사용 출처[15] 클라이언트 웹컴포넌트에 사용 출처[16] 라이브 송출 페이지에 사용 출처[17] SDK 에 사용됨 출처[18] 홈페이지에 사용[19] 홈페이지에 사용[20] 홈페이지에 사용[21] 홈페이지에 사용[22] 홈페이지에 사용[23] 홈페이지에 사용