Svelte란?

최근에 프로젝트를 하나 하게 되었는데 FrontEnd 친구가 Svelte를 말하는 것을 보고

배워보고 싶어 이렇게 글을 쓰게 되었습니다 

Svelte해지기 위해 Svelte를 사용해볼까요?

---

Svelte란 무엇일까? 

Svelte

Svelte는 JavaScript의 라이브러리 중 하나로 React보다 가볍고 Vue보다 쉽다는 여러 좋은 장점들을 가지고 있습니다

Svelte는 영어로 날씬하다라는 뜻도 가지고 있다고 합니다

 

장점

• 학습 곡선이 낮습니다
• 빠른 개발 속도가 올라갑니다
• 렌더링 성능이 일정합니다

단점

• 느린 빌드 속도를 가졌습니다
• 아직 React나 Vue 만큼 많이 쓰이지 않아 커뮤니티가 작습니다
• TypeScript가 Svelte의 신규 문법을 잘 따라가지 못하는 경향이 있다고 합니다

---

다른 라이브러리들과의 차이점

구조

svelte는 다른 라이브러리들과 다르게 이런 구조를 가졌습니다

순서는 상관 없지만 저렇게 3가지로 나눠서 작성하면 됩니다

<script>
// JS
</script>

마크업 영역

<style>
/*styling */
</style>

 

Event

svelte의 이벤트를 다룰 때에는 밑에 보이는 식으로 해야합니다

on: 뒤에 원하는 event

<button on:click={함수}>눌러</button>

 

$: 는 참조한 값이 변할 때마다 $: 앞에 함수를 다시 실행한다는 의미를 가지고 있습니다

let cnt = 0;
$: square = cnt * cnt;

 

props

props를 받기 위해서는 export let을 하여서 받아야 합니다

<script>
   export let title;
</script>

<p>
   {title}
</p>

 

조건문

내부에서 조건문을 사용할 수 있습니다

<script>
	let toggle = false;

	function toggle() {
		toggle = !toggle;
	}
</script>

{#if toggle}
	<button on:click={toggle}>
		트루
	</button>
{:else}
	<button on:click={toggle}>
		폴스
	</button>
{/if}

---

글을 마치며

이렇게 Svelte에 대해서 장단점을 알아보고 써보았는데 더 많은 장단점이 있을 수 있고

다른 차이점도 있겠지만 이 정도 대표적으로 한번 정리해보았습니다

Svelte를 사용하기 적절할 때 잘 사용할 수 있었으면 좋겠습니다

글을 읽어주셔서 감사합니다