1. Introduction

Svelte를 사용할 일이 생겨서 학습을 위해 Svelte 공식 사이트의 Tutorial을 진행하면서 학습한 내용을 정리한 시리즈 입니다.

이런 식으로 공식 사이트 옆에 학습하면서 실습해볼 수 있는 좋은 환경이 구성되어 있지만 내가 글을 쓰면서 한번 더 기억하기 위한 글입니다.

1-1. Basics

Svelte와 다른 프레임워크의 차이점

Svelte도 React, Vue처럼 자바스크립트 프레임워크지만 다른 프레임워크와 달리 런타임이 아닌 빌드타임에 변환되는데, 추상화하는 비용과 첫 로드시 패널티가 없습니다.
그리고 Svelte로만 독립된 패키지처럼 어디서든 실행가능합니다.
Svelte에서 하나의 App은 1개 이상의 컴포넌트로 구성되고 컴포넌트는 .svelte 파일에 있는 재사용 가능한 HTML/CSS/JS 코드 입니다.

1-2. Adding data (변수 만들기)

변수 추가하기

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

<h1>Hello {name}<h1>

1. 위처럼 script태그 안에 코드를 작성하여 변수를 선언할 수 있습니다.
2. 선언한 변수를 h1태그 같은 html 태그 안에서 {name}의 형태로 사용할 수 있습니다.
3. {}안의 변수는 원하는 JS 코드를 넣을 수 있습니다.
4. 위의 name은 String이므로 {name.toUpperCase()}처럼 string의 내장 함수를 사용할 수 있습니다.

1-3. Dynamic attributes (속성에 변수 할당하기)

속성에 변수 넣기

<script>
  let src = ".../image.gif"
  let name = "모히칸"
</script>

<img src={src} alt="{name} is dancing">

위처럼 img태그의 src속성에 src변수를 넣을 수 있습니다. 속성에 변수를 넣기 위해서 똑같이 {}안에 변수명을 넣어주면 됩니다.
"{name} is dancing"처럼 문자열 안에도 변수를 넣을 수 있습니다.
위처럼 대입하려는 속성과 대입하려는 변수의 이름이 똑같을 경우 <img src>처럼 축약할 수 있습니다.

에 alt를 안 썼을 때 경고문

1. Svelte는 접근불가능한 마크업 코드를 작성했을 때 경고문을 통해 다양한 사용자가 접근할 수 있도록 도와줍니다.
2. 예를 들어 img태그를 사용하면 이미지 로드가 오래걸리는 사용자를 위해 개발자가 alt속성을 작성할 수 있도록 경고문을 띄워줍니다.

1-4. Styling (Svelte에서 Style 적용하기)

스타일링

<p> Hi </p>
<style>
  p {
    ...
  }
</style>

1. HTML처럼 style태그 안에 css코드를 작성해서 스타일링이 가능합니다.
2. 범위는 컴포넌트에 한정되어서 다른 컴포넌트에 영향을 주지 않습니다.

1-5. Nested components (컴포넌트 안의 컴포넌트)

중첩 컴포넌트

다른 파일에서 컴포넌트를 import 해와서 사용할 수 있습니다.
각각의 .svelte 파일이 하나의 컴포넌트입니다.

// App.svelte
<script>
  import Nested from './Nested.svelte';
</script>
<style>
  p {
    color: red;
  }
</style>
<p>안녕하세요 App입니다.</p>
<Nested />
...
// Nested.svelte
<p>안녕하세요 Nested입니다.</p>

1. 위의 코드처럼 Nested.svelte 파일에서 export하지 않아도 App.svelte에서 import해서 HTML태그처럼 <Nested />를 작성하면 Nested.svelte의 코드를 사용할 수 있습니다.
2. style태그의 범위는 해당 컴포넌트 안이기 때문에 같은 p태그이지만 App의 p에는 style이 적용되고 Nested의 p에는 style이 적용되지 않습니다.

컴포넌트는 대문자시작

기존 HTML태그와 구분하기 위해 사용자가 정의한 컴포넌트는 대문자로 시작해야 합니다.

1-6. Making an app (SvelteKit 사용해보기)

SvelteKit

배포할 수 있는 Vite를 위한 setup이 되어있는 도구입니다.

npm create svelte@latest myapp

위와 같은 명령어로 svelte 프로젝트를 생성할 수 있다.

┌  Welcome to SvelteKit!
│
◆  Which Svelte app template?
│  ● SvelteKit demo app (A demo app showcasing some of the features of SvelteKit - play a word
guessing game that works without JavaScript!)
│  ○ Skeleton project
│  ○ Library project
└

3가지 버전을 선택할 수 있는데,
1. Demo App: Counter와 간단한 게임까지 구현되어있는 Svelte Project를 생성한다.
2. Skeleton Project: 페이지 하나 있는 빈 Svelte Project를 생성한다.
3. Library Project: Svelte 라이브러리를 만들기 위한 빈 Velte Project를 생성한다.

Compiler

프로젝트를 한 번 set up하면 각 컴포넌트를 JS Class처럼 new를 사용하여 인스턴스화할 수 있다고 하는데, 아직은 잘 모르겠다.

튜토리얼 1장 끝

참고문헌

Svelte Tutorial 1장 Introduction
Svelte란? - 둉이님