Svelte - Basic

📌 목록

• Introduction
• Adding Data
• Dynamic Attribute
• Styling
• Nested components
• HTML tags
• Conclusion
• Reference

📌 Introduction

안녕하세요. 오늘은 지난번에 이어 svetle에 기본적인 부분에 대해서 한번 알아보겠습니다. 많은 부분 vue에서 영향을 받은 것 같은 느낌이 드네요.

📌 Adding Data

일단 간단하게 hello world을 그려보겠습니다.

<script>
    let name = "world";
    name = name.toUpperCase();
</script>
<h1>Hello {name}</h1>

여기서 신기한건 이렇게 해도 동일하게 동작을 합니다.

<h1>Hello {name}</h1>
<script>
    let name = "world";
    name = name.toUpperCase();
</script>

위치는 딱히 상관이 없어보여요. 이걸 토대로 눈치를 챌수 있는 부분은 단순 javascript 형식으로만 compile을 하는게 아닌거 같아요.(아직 확실 한건 아니지만 최종적으로 vanila javscript 파일이 어떻게 나오는지 보고 더 유추해볼게요.)

놀랍진 않겠지만 이러한 문법도 가능해집니다.

<h1>Hello {name.toUpperCase()}</h1>
<script>
    let name = "world";
    // name = name.toUpperCase();
</script>

📌 Dynamic Attribute

이제 한번 html atrribute속성을 지정해볼까요?

<script>
    let src = "favicon.png";
</script>

<img src={src} alt="logo" />

이렇게 쓸수 있습니다. 하지만 이걸 좀더 간결하게 사용할 수 있어요.

<script>
    let src = "favicon.png";
</script>

<img {src} alt="logo" />

📌 Styling

이 부분을 보고 제가 꽤 vue와 닮아 있구나 싶었던 부분입니다. 바로 .svelte 파일에 style을 쓸수 있어요.

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

<!-- 이렇게 vue처럼 같은 파일에 style을 쓸수 있어요 -->
<style>
    h1 {
        color: red;
    }
</style>

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

📌 Nested components

react나 vue처럼 component를 지원합니다. 이렇게 사용이 가능해요. 먼저 MyButton을 만들어볼게요.

<!-- MyButton.svelte -->
<style>
  .my-btn {
    color: red;
  }
</style>

<button class="my-btn">HELLO</button>

이제 App.svelte에서 MyButton을 한번 불러와보겠습니다.

<script>
    import MyButton from "./components/MyButton.svelte";
</script>

<MyButton />

📌 HTML tags

이번에는 html tag를 data처럼 사용해볼게요.

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

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

@html을 사용해서 string을 html 태그처럼 사용할 수 있습니다.

📌 Conclusion

이렇게 오늘은 svelte의 기본적인 것들에 대해서 알아보았습니다. 다음 시간에는 가장 중요한 reactivity에 대해서 알아볼게요. 그럼 다음 포스팅에서 만나요~ 안녕!

📌 Reference

• svelte tutorial