[svelte] Svelte 시작하기

<script>
	let items = [
		{ id: 1, name:"MILK", done: false},
		{ id: 2, name:"BREAD", done: true},
		{ id: 3, name:"EGGS", done: false}
	]

	const remove = item => {
		items = items.filter(i => i !== item);
	};

	let name = "";

	const addItem = (event) => {
		event.preventDefault();
		items = [...items, {id : Math.random(), name, done: false}];
		name = "";
	};
</script>

<style>
	li button {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
	}

	.done span {
    opacity: 0.4;
	}
	ul{
		list-style: none;
	}
</style>

<div>
	<h1>Grocery List</h1>
	<form on:submit|preventDefault={addItem}>
		<label for="name">Add an item</label>
		<input id="name" type="text" bind:value={name}/>
	</form>
	<ul>
		{#each items as item}
		<input type="checkbox" bind:checked="{item.done}"/>
			<li class:done={item.done}>
				<span>{item.name}</span>
				<button on:click={() => remove(item)}>❌</button>
			</li>
		{/each}
	</ul>
</div>

실행화면

Svelte 문서

https://svelte.dev/docs

Docs • Svelte

REPL

https://svelte.dev/repl/hello-world?version=3.42.4 

Hello world • REPL • Svelte

주의할점

• Use degit 를 이용하는 방법은 degit가 사용이 안되는 문제점이 있기 때문에 REPL방법을 사용해야 된다.