3/ 20

Svelte 문법 정리 (mostly pirating from https://svelte.dev/tutorial/dynamic-attributes)

1. Introduction

1-1. What is Svelte?

Svelte is a tool for building fast web applications. -> with sveltekit, SSR is possible so they say.

It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces.

But there's a crucial difference: Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.

You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework.

Understanding components

In Svelte, an application is composed from one or more components. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a .svelte file. The 'hello world' example in the code editor is a simple component.

1-2. Adding data

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

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

Quite self-explanatory since .svelte file holds all CSS HTML and Javascript.

1-3. Dynamic Attributes

Same as 1-2.

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

<img>

// shorthand syntax.
//<img {src} alt="A man dances.">

1-4. Styling

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

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>
// this .app.svelte won't load on different .name.svelte!

Importantly, these rules are scoped to the component. You won't accidentally change the style of

elements elsewhere in your app, as we'll see in the next step.

1-5. Nested Components.

  <script>
	import Nested from './Nested.svelte';
    // <p>This is another paragraph.</p> nested.svelte inside.

  </script>

<p>This is a paragraph.</p>
<Nested />
<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

  

Thing is, imported

tag has no style declared from App.svelte.

1.6 Making an App

npm create svelte@latest myapp

// basic command

I already made using create-vite and selected sveltekit... but there are also some community wrapup packages in

https://sveltesociety.dev/tools

2. Reactivity

2-1. Assignments

At the heart of Svelte is a powerful system of reactivity for keeping the DOM in sync with your application state — for example, in response to an event.

An example below:

<script>
	let count = 0;

	function incrementCount() {
		count += 1;
	}
</script>

<button on:click={incrementCount}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
  // It works like react state.
</button>

2-2. Declarations

Svelte's reactivity not only keeps the DOM in sync with your application's variables as shown in the previous section, it can also keep variables in sync with each other using reactive declarations. They look like this:

<script>
	let count = 0;
	$: doubled = count * 2;
  	// Need more info about $ under the hood.!!!!! 3/20
  	// tutorial says it uses javascript label feature.
  	// it works like React useEffect hook.
  
	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
  	<p>{count} doubled is {doubled}</p>

</button>

2-3. Statements

We're not limited to declaring reactive values — we can also run arbitrary statements reactively. For example, we can log the value of count whenever it changes:

<script>
	let count = 0;
	$: console.log('the count is ' + count);

	function handleClick() {
		count += 1;
	}
  	// or
  	$: {
	console.log('the count is ' + count);
	alert('I SAID THE COUNT IS ' + count);
    } // this also works.
  	$: if (count >= 10) {
	alert('count is dangerously high!');
	count = 9;
    } // with if statement too.
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

2-4. Updating Arrays and Objects

Svelte's reactivity is triggered by assignments. Methods that mutate arrays or objects will not trigger updates by themselves.

In this example, clicking the "Add a number" button calls the addNumber function, which appends a number to the array but doesn't trigger the recalculation of sum.

One way to fix that is to assign numbers to itself to tell the compiler it has changed:
React updates when state changes, Svelte updates when assignments happens.

<script>
	let numbers = [1, 2, 3, 4];
	let obj = {num: 0}
	
	function addObjectNumber() {
		obj = {...obj, num: obj.num + 1}
	}
</script>


<p>{obj.num}</p>

<button on:click={addObjectNumber}>
	Add a number
</button>