[Document] Svelte - 1.Introduction

새로운 프론트엔드 프레임워크를 배워보고자 합니다. 최근에 라이징하고 있는 언어인 Svelte.js 입니다.

튜토리얼을 조금 해봤을 때는 React나 Vue 보다 훨씬 쉽고 간편한 느낌입니다.

앞으로 Document를 읽어나가면서 배우는 것을을 기록해보겠습니다. Svelte.js 의 Tutorial 페이지는 다음과 같습니다.

해당 페이지로 가면 웹 상에서 바로 Svelte 튜토리얼을 진행할 수 있습니다.

https://svelte.dev/tutorial/basics

Introduction / Basics • Svelte Tutorial

 

 

 Basics 

Svelte 란 무엇인가?

​Svelte 는 웹 애플리케이션을 빠르게 빌드 할 수 있는 도구입니다.

마치 우리가 잘 알고 있는 React나 Vue 와 같으며, 이를 통해 유려한 사용자 인터렉션의 인터페이스를 만들 수 있습니다.

그러나 Svelte 는 앞서 말한 프레임워크와 크게 다른 점이 하나 있습니다.

바로 Svelte 는 build time 에 우리의 애플리케이션을 JavaScript 코드로 변경한다는 점입니다.

(run time에서의 변경이 아니라 👈)

 

이게 무슨 말 일까요?

우리는 CS 수업에서 배웠던 것을 떠올릴 필요가 있습니다. 이 코드를 저 코드로 변경한다? 무엇이 떠오르시나요.

바로 컴파일러 입니다.

 

즉, Svelte 는 라이브러리도 프레임워크도 아닌 컴파일러라는 것입니다. (Svelte가 그렇게 주장하네요)

이는 Svelte 의 No virtual DOM 특징입니다.

컴파일러로써 프레임워크 코드가 탑재되어 돌아가는 것이 아니라 우리의 코드를 Vanilar JavaScript 코드로 변경해주기 때문에 프레임워크 추상화 과정에 대한 성능 비용을 낼 필요가 없어지고, 애플리케이션 또한 빨리 로드할 수 있습니다.

 

 

 Making an App 

https://svelte.dev/blog/svelte-for-new-developers

Svelte for new developers

해당 링크에서 Svelte 를 설치하는 방법을 알 수 있습니다.

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install

우선은 만들고자 하는 위치로 와서 터미널을 켭니다.

여기서 my-svelte-project 는 Svelte App 을 만들고자 하는 폴더 위치를 말합니다.

만약 test 폴더 안에 만들고 싶다면 my-svelte-projcet 를 test 라고 변경하면 되겠네요.

그러면 필요한 파일들과 폴더들이 만들어집니다.

npm run dev

애플리케이션을 실행하고 싶다면 위 명령어를 사용합니다.

8080 포트로 들어가 위와 같은 화면이 실행되면 성공입니다.

 

 

 Adding data 

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

<h1>Hello {name}!</h1>

<style>
</style>

name 이라는 이름의 변수를 script 태그 안에서 선언합니다.

마크업 상에서 우리는 해당 변수를 {} 문법(curly braces) 를 사용하여 참조할 수 있습니다.

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

또한 이런식으로 직접적인 함수도 적용할 수 있습니다.

 

 

 Dynamic attributes 

텍스트를 다룬 것처럼 우리는 curly braces 를 통해 element의 attributes 또한 다룰 수 있습니다.

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

<img src={src} >

 

이렇게만 쓰면 Svelte 에서 왜 alt 를 쓰지 않았냐고 경고를 줍니다.

A11y: <img> element should have an alt attribute

가능한한 방대면 사용자 베이스를 두고 앱을 빌드하는 것이 좋습니다.

신체나 네트워크에 있어 장애를 가진 사람들도 명확하게 앱에 접근할 수 있도록 img 태그에는 그를 가리키는 alt 속성을 달도록 합시다.

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

<img src={src} alt="A man dances." >

Svelte 에서는 속성 안에서도 {} 를 사용할 수 있습니다.

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

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

 

 

 Styling 

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

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

HTML 처럼 <style> 태그를 이용하여 컴포넌트를 스타일링 할 수 있습니다.

해당 style 태그는 해당 컴포넌트 내에서는 scoped 하게 적용이 됩니다. 즉 다른 컴포넌트에서 p 태그에 스타일을 걸어도 해당 컴포넌트 스타일은 여전한 것이지요.

 

 

 Nested components 

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

// Nested.svelte

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

script 태그 내에서 import 하여 다른 컴포넌트 파일을 가져올 수 있습니다.

두 컴포넌트 p 태그를 쓰지만 App 컴포넌트에서만 p 태그에 스타일을 걸었기 때문에 Nested 컴포넌트에는 적용이 되지 않습니다.

 

 

 HTML tags 

<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{string}</p>
<p>{@html string}</p>

보통 plain text 는 따옴표 안에 태그가 있든 말든 그냥 일반 텍스트로 인식합니다.

하지만 때때로 우리는 HTML 태그를 바로 컴포넌트 내에 렌더링을 하고싶을 때가 있습니다.

그때 {@html } 을 사용합니다.

 

Svelte 는 DOM 에 삽입하기 전에 해당 표현식 내부를 삭제하지 않기 때문에, 안에 신뢰할 수 없는 코드가 있다면 수동으로 삭제하는 것이 좋습니다. 그렇지 않으면 사용자가 XSS 공격에 노출될 위험이 있습니다.

 

Introduction 튜토리얼은 이것으로 끝이며 다음 튜토리얼에서 찾아뵙도록 하겠습니다.

 

 

 

 

 

 

 

 

 

 

Svelte.js Document Documentation

Svelte html

Svelte data

Svelte {}

---