Svelte

Svelte - Basic

eddie0329 2020. 12. 26. 19:09
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ ๋ชฉ๋ก

  • 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

๋ฐ˜์‘ํ˜•