Svelte

스벨트 Svelte
제작자	리치 해리스(Rich Harris)
분류	웹 프레임워크
출시	2016년 11월 26일
언어	JavaScript
버전	4.2.0
라이선스	MIT 라이선스
링크	[[파일:GitHub 아이콘 화이트.svg

1. 개요[편집]

2. 특징[편집]

• 실제 DOM을 사용, 컴파일러

• 비교적 간소화된 소스코드, 상대적으로 작은 용량

• use:

  특성 등을 통한 기존 라이브러리 친화력

use:

use:

2.1. 4.0.0[편집]

• 3.x 대비 최대 12% 빠른 성능과 최대 75% 가벼운 메인 패키지를 포함한 최대 50% 가벼운 번들 크기.[1]
  Rich Harris가 기존 Typescript로 개발하던 체계를 모두 Javascript로 바꾼 덕분이라고 Hacker News 에 언급했다. 물론 타입스크립트 사용을 고려하여 타입을 적용하도록 대응했기 때문에 타입스크립트 사용에도 문제가 없다.
• 최소 요구사항이 node.js 16, webpack 5, vite 4로 상향.
• 향상된 개발자 경험을 위한 주요 IDE 지원 확대

npx svelte-migrate@latest svelte-4

2.2. 5.0.0 (예정)[편집]

3. 예시[편집]

import React, { useState } from 'react';

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

  return (
    <div>
      <input type="number" value={a} onChange={(e)=>setA(+e.target.value)}/>
      <input type="number" value={b} onChange={(e)=>setB(+e.target.value)}/>

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

<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>

<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>

1. React에서는 input 태그에서의 양방향 바인딩을 지원하지 않아, input에 onchange 이벤트를 일일이 걸어 변수값을 변경해주도록 만들어줘야 하며, 또한 변수의 초기값 외에 setter 함수로 쓰일 변수와 useState라는 특유의 선언함수를 이용해야 한다(React Hooks). 그나마 과거 class 기반의 방식보다는 간단해진 버전이다. class 기반에서는 react.component 상속 및 생성자에서의 변수 설정이 추가적으로 필요했다. 또한 일반적인 html 렌더링 방식이 아닌 JSX(JavaScript eXtension)라는 특수한 방식으로 결과를 반환해주고 있다. (svelte에서는 @html과 비슷하다.[2]
   https://svelte.dev/tutorial/html-tags
   )
2. vue에서는 v-model이라는 양방향 바인딩 지원으로 onchange를 선언할 필요는 없지만, 여전히 template 태그를 별도로 선언해야 하며, 일반적인 자바스크립트 방식의 방식과 다르게 객체 선언 등으로 데이터를 초기화해주고 있다.

<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[편집]

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

• 뉴욕 타임스: 제작자가 해당 업체 소속 당시 일부 기사 페이지에서 사용.
• 스포티파이: 랜딩 페이지에서 사용.
• Brave: 검색 기능에 사용.
• Google Arts&Culture: Cultural Crosswords에 사용. 출처
• Facebook Your Home: Your Home 프로젝트에 사용. 출처
• 오라클: 오라클 CMS 서비스 개발에 사용. 출처
• IBM: IBM 카본 컴포넌트 프로젝트에 사용. 출처
• IKEA: IKEA 웹 사이트에 사용. 출처
• 스퀘어: Square 개발자 페이지에 사용. 출처
• Razorpay: Razorpay 결제 다이얼로그에 사용. 출처
• Les Echos: 인터렉티브 뉴스 페이지에 사용. 출처
• 리그 오브 레전드: 클라이언트 웹 컴포넌트에 사용. 출처
• 빌리빌리: 라이브 송출 페이지에 사용. 출처
• Stone Payments: SDK에 사용. 출처
• Godaddy: 홈페이지에 사용.
• 어베스트: 홈페이지에 사용.
• 1Password: 홈페이지에 사용.
• 라쿠텐: 홈페이지에 사용.
• Alaska Airline: 홈페이지에 사용.
• Chess.com: 홈페이지에 사용.
• Fickett.io: 홈페이지에 사용.

6. 도서[편집]

7. 기타[편집]

8. 관련 문서[편집]

• 웹 프레임워크
• 라이브러리
• React(라이브러리)
• Vue.js
• JavaScript
• TypeScript

이 문서의 내용 중 전체 또는 일부는 2023-11-03 21:52:27에 나무위키 Svelte 문서에서 가져왔습니다.