svelte 스터디#2 Introduction

mhlee·2023년 2월 24일

svelte

목록 보기

2/6

Basics

svelte는 무엇인가에 대해 소개한다.

But there's a crucial difference: Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.

svelte는 코드를 빌드타임에 순수 자바스크립트로 변환하는 반면,
다른 프레임워크(react, vue등)는 런타임에 자바스크립트로 인터프리팅 된다고 설명한다.

Adding data

간단히 변수를 선언하고, html에 바인딩되는 간단한 샘플이다.
정말 심플하다. 무슨말이 필요한가..

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

<h1>Hello {name.toUpperCase()}!</h1>

Dynamic attributes

간단하게 img 태그의 속성을 변수화 처리하는 샘플이다.
역시 심플하다.
shorthand attiribute라고 src={src}라는 표현을 attribute 이름과 변수명이 동일하다면 {src} 이런식으로 줄요서 표현도 가능하다 설명한다.
더불어 alt 속성도 다양한 환경을 위해 추가하길 권고한다.

<script>
	let src = '/tutorial/image.gif';
	let name = 'Rick Astley';
</script>

<img {src} alt="{name} dances.">

Styling

style 태그를 이용해서 스타일링 할수 있음을 설명한다.
단, 해당 파일에서만 유효하다.

<p>This is a paragraph.</p>

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

Nested Components

위에 설명했듯 style 태그는 해당 파일에서만 유효하다.
해당 내용을 설명하기 위해 두개의 파일을 만들어 설명한다.
임포트된 Nested의 내용은 스타일이 적용되지 않는다.

그것과는 별개로 다른 파일의 내용을 컴포넌트화해서 임포트하는것이 아주 간단하다.

App.svelte 파일

<script>
	import Nested from './Nested.svelte';
</script>

<p>This is a paragraph.</p>
<Nested/>

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>