[SVELTE] SVELTE 시작하기 Introduction - Basics, Adding data, Dynamic attributes, Styling, Nested components, Making an app

 

SVELTE 공식 사이트의 tutorial을 기반으로 정리하였습니다.

영문 자료를 보며 혼자 공부한 내용이라 잘못 번역된 내용 등이 있을 수 있으니 혹시 발견하시면 댓글로 알려주시면 감사하겠습니다~

 

introduction

스벨트에서 애플리케이션은 하나 이상의 컴포넌트로 구성된다. HTML 의 수퍼셋을 사용해 .svelte 파일에 작성된다. 스크립트, 스타일, 마크업의 세 섹션으로 나뉘며 각 섹션은 선택 사항이다.

 

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

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

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

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

 

마크업 중괄호 안에 원하는 자카스크립트를 넣거나 요소 속성을 제어할 수 있다. <style>태그를 사용해 스타일을 추가할 경우 해당 컴포넌트에만 적용된다. 앱의 다른 곳에서 p요소의 스타일을 변경하지 않는다.

 

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

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

 

요소를 포함하는 것처럼 다른 파일에서 컴포넌트를 가져와 포함할 수 있다. 또한 컴포넌트 이름은 대문자로 ㅍ시한다. 이는 사용자 정의 컴포넌트와 HTML 태그를 구분할 수 있도록 하기 위해서이다.

 

<!-- App.svelte -->
<script>
    import Nested from './Nested.svelte';
</script>

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

<!-- Nested.svelte -->
<p>This is another paragraph.</p>

 

일반적인 문자열은 일반 텍스트로 삽입한다. 때로 직접html을 랜더링 하는 경우에는 {@html …}태그를 사용한다.

 

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

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