Svelte 기초

KHS·2023년 4월 5일

frontend svelte

Svelte

2016년 출시
다른 프레임워크에 비해 적은 코드 작성 추구
- 가독성 상승, 쉬운 리팩토링 같은 장점
가상 DOM을 사용하지 않음
- 빠른 성능을 기대할 수 있음
- 코드가 HTML과 유사함
CDN 미제공
IE 미지원

SvelteKit

Svelte Framework
ReactJs의 Next.js, Vue.js의 Nuxt.js와 같은 관계
SvelteKit 1.0이 출시됨에 따라 Svelte 프로젝트 생성 시 자동으로 SvelteKit을 사용하도록 설정 됨
초기에 번들러로 Rollup이나 WebPack을 쓰는 대신 현재는 Vite가 기본 번들러로 사용됨
앱 구성을 위해 파일 명, 변수 명 등에 예약어가 있음(다른 프레임워크도 동일하잖아?)

설치 필요

NodeJs(이왕이면 LTS 버전)

프로젝트 초기화

npm create svelte@latest '디렉토리 명'

프로젝트 초기 모습
+page.svelte가 index.html 역할

변수 선언과 바인딩

<script lang="ts">
  let name = 'World'
</script>

<h1>Hello {name}!</h1>
<!-- 동적 바인딩을 하려면 bind: 사용 -->
<input type="text" bind:value={name} />
<button on:click={() => (name = 'World')}>초기화</button>

<style>
  h1 {
    color: cadetblue;
  }
</style>

조건문과 반복문

{#if 조건식 혹은 boolean}
코드
{:else if 조건식 혹은 boolean}
코드
{:else}
코드
{/if}

{#each 배열 as 배열 변수명}
코드
{/each}

컴포넌트

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import Movie from './movie.svelte'

  let name = 'World'
  let movieList = ['A', 'BB', 'CCC', 'DDDD']
</script>

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

<input type="text" bind:value={name} />
<button on:click={() => (name = 'World')}>초기화</button>

<Movie {movieList} />

<style>
  h1 {
    color: cadetblue;
  }
</style>

<!-- movie.svelte -->
<script lang="ts">
  export let movieList: string[] = []
</script>

<ul>
  {#each movieList as movie}
    <li>{movie}</li>
  {/each}
</ul>

라우팅

routes(웹 루트 개념) 디렉토리에 +layout.svelte 파일 생성
slot에 대상 페이지(컴포넌트)가 로드 됨
```
<a href="/actor">영화 배우</a>

<slot />
```

페이지 요청 스크립트

라우팅을 통해 특정 컴포넌트로 이동 시 실행되는 함수

<!-- src/routes/actor/+page.svelte -->
<script lang="ts">
  export let data: any
</script>

<ul>
  {#each data.actorList as actor}
    <li>{actor}</li>
  {/each}
</ul>

<a href="/">홈</a>

<!-- src/routes/actor/+page.server.js -->
<!-- .server를 추가하면 SSR로 동작함 -->
export async function load() {
  console.log('asdf')
  return { actorList: ['톰 크루즈', '브래드 피드'] }
}

API

라우팅을 그대로 따라감
GET, POST, PATCH, DELETE 등을 지원

변수 저장

앱 전체에서 공유하려면 src/routes 이하의 +layout.svelte에 할당하는 것이 적절

<script lang="ts">
  import { setContext } from 'svelte'
  import { writable } from 'svelte/store'

  const user = writable<string>()
  $: user.set('USER NAME!')

  setContext('user', user)
</script>

<a href="/actor">영화 배우</a>

<slot />

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import { getContext } from 'svelte'
  import Movie from './movie.svelte'

  const defaultUser = getContext('user')
  let userName = $defaultUser
  let movieList = ['몬티 파이튼의 성배', '아이언 맨', '올드보이']
</script>

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

<input type="text" bind:value={userName} />
<button on:click={() => (userName = $defaultUser)}>초기화</button>

<Movie {movieList} />

<style>
  h1 {
    color: cadetblue;
  }
</style>