[Svelte 튜토리얼] Part 1 - Your first component

튜토리얼 링크

이번 튜토리얼에서는 Svelte의 기본 구성 요소인 컴포넌트 작성 방법과 변수 사용 방법을 알려줍니다.

Svelte의 기본 구성

Svelte는 컴포넌트 단위로 코드를 작성합니다.

컴포넌트는 애플리케이션을 구성하는 재사용 가능한 코드 블록이며,

Svelte에서 컴포넌트를 사용하려면 .svelte 파일에 아래의 코드 예시처럼 <script>, <main>, <style> 태그로 각각 Javascript, HTML, CSS를 감싼 코드를 작성하면 됩니다.

HTML 코드가 들어있는 main 태그는 생략하기도 합니다.

 

<script>
  Javascript code
</script>
<main>
  HTML code
</main>
<style>
  CSS code
</style>

 

<script> 블록에 존재하는 변수를 HTML code에서 중괄호로 감싼 { 변수 } 형태로 쓰게 되면 변수의 값으로 치환됩니다.

또한, 중괄호에서는 Javascript 문법 사용이 가능합니다.

따라서 튜토리얼의 답은 다음과 같습니다.

 

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

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