Svelte

https://www.samsungsds.com/kr/insights/svelte.html

2016년도 나온 SPA 프레임워크(Vue, React 같은 애들도 있어서)

Vue보다 더 쉽다.

JS만 알면 쉽게 할 수 있고, 연결도 쉽다고 한다.

라이프 사이클

컴포넌트 생명주기

https://svelte.dev/

REPL
read-eval?
https://svelte.dev/repl/hello-world?version=4.2.15

template이라는 거 없고 그냥 쓴다.

변수 찍을 때 {}

이벤트 연결

on:이벤트 이름={}

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

<h1>Hello {name}!</h1>
<h2>{age}</h2>
<button on:click={() => {name="쟝원영"} }>클릭해</button>

이래도 된다

<script>
	let name = 'world';
	let age = 160;
	function changeName() {
		name = "쟝원영"
	}
</script>

<h1>Hello {name}!</h1>
<h2>{age}</h2>
<button on:click={ changeName }>클릭해</button>

node.js로 할 수 있고 편집은 vscode로 할 것.

svelte 구성

script
template (태그 딱히 없다)
style

이 세개 있는 건 vue랑 같지만 조금 다름

<script>
	let name = 'world';
	let age = 160;
	function changeName() {
		name = "쟝원영"
	}
</script>

<h1>Hello {name}!</h1>
<h2>{age}</h2>
<button on:click={ changeName }>클릭해</button>

<style>
	h2{
		color:red;
	}
	button{
		/*background-color: green;*/
	}
</style>

마우스 좌표 찾기

<script>
	let mmPos = {x:0, y:0};
	function mm(e) {
		mmPos.x = e.clientX;
		mmPos.y = e.clientY;
	}
</script>

<p on:mousemove={mm}>마우스 위치 = ({mmPos.x} : {mmPos.y})</p>

<style>
	p{
		width: 100%;
		height: 100%;
	}
	
</style>

keydown

svelte 코드? <svelte>가 나온다

<script>
	let keycode = 0;
	function kd(event) {
		keycode=event.keyCode;
	}
</script>

<h1>당신이 누른 키 : {keycode}</h1>
<svelte:window on:keydown={kd}/>

• 익명함수

<script>
	let keycode = 0;
</script>

<h1>당신이 누른 키 : {keycode}</h1>
<svelte:window on:keydown={(event) => keycode=event.keyCode}/>

• 누를 때마다 바뀌지 않게 하기
  <svelte:window on:keydown|once={(event) => keycode=event.keyCode}/>
  전송 버튼 수십개 누르면 계속 전송되고 그런거 막을 수 있다

<script>
	let keycode = 0;
</script>

<h1>당신이 누른 키 : {keycode}</h1>
<svelte:window on:keydown|once={(event) => keycode=event.keyCode}/>

if문

<script>
	let name = 'world';
	let 조건 = true;
</script>
{#if 조건}
	조건이 참일때 실행할 문장
{:else}
	조건이 거짓일대 실행할 문장
{/if}

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

로그인 참거짓

아 썼는데 지움

반복문

모양

<script>
	let num = [10,20,30,40,50,60]
</script>
{#each 자료형 as 반복자}
	{반복자}
{/each}

<h1>{num}</h1>

• 출력됨

<script>
	let num = [11,20,30,40,50,60]
</script>
{#each num as i}
	{i}<br>
{/each}

<h1>{num}</h1>

객체 출력 (게시판)

<script>
	let no2 = {id:2, title:'두번째 글'}
	let num = [{id:1, title:'첫번째 글'}, no2, {id:3, title:'세번째 글'}]
</script>
{#each num as i}
	{i.id} ♥ {i.title}<br>
{/each}

• 반복자 말고 바로 풀기
  i대신 key들을 나열.

<script>
	let no2 = {id:2, title:'두번째 글'}
	let num = [{id:1, title:'첫번째 글'}, no2, {id:3, title:'세번째 글'}]
</script>
{#each num as {id, title}}
	{id} ♥ {title}<br>
{/each}

• index 찍기

<script>
	let no2 = {id:2, title:'두번째 글'}
	let num = [{id:1, title:'첫번째 글'}, no2, {id:3, title:'세번째 글'}]
</script>
{#each num as {id, title}, index}
	{index} ♥ {id}:{title}<br>
{/each}

컴포넌트

신기하다

컴포넌트를 컴포넌트에 붙이기

• Component3
  
• Component2
  
• App
  

컴포넌트는 엮여 있는 녀석들을 갖다쓸 수 있다

잘못해서 순환참조 일어나는 건 조심

컴포넌트 재활용 시 편하다.

바인딩

싱기방기

To-Do

• 체크박스, 그룹박스 이런 거랑 연동하는 거 해보기

<script>
	let name = null;
	let findOut = false;
</script>

<input type="text" bind:value={name} placeholder="이름을 입력하세요">
<div>입력된 값 : {name}</div>

<span>확인</span>
<input type="checkbox" bind:value={findOut}>
<div>확인했어? {#if findOut} 확인 {:else} 확인 안함 {/if}</div>

여러 개

<script>
	let name = null;
	let findOut = false;
	let what = [];
</script>

<input type="text" bind:value={name} placeholder="이름을 입력하세요">
<div>입력된 값 : {name}</div>

<span>확인</span>
<input type="checkbox" bind:value={findOut}>
<div>확인했어? {#if findOut} 확인 {:else} 확인 안함 {/if}</div>
<div>
<input type="radio">
</div>
좋아하는 언어 고르기
<ul>
<li>
	<input type="checkbox" bind:group={what} value=자바> 자바
</li>
<li>
	<input type="checkbox" bind:group={what} value=C#> C#
</li>
	<li><input type="checkbox" bind:group={what} value=kotlin>
코틀린</li>
<li><input type="checkbox" bind:group={what} value=js> js</li>
<li><input type="checkbox" bind:group={what} value=svelte>
svelte</li>
</ul>
<div>
	{what}
</div>

let kimjihun = "바보";

컴포넌트 통신(값 내려보내기)

props 사용. 부모껄 자식으로

string

• Component2.svelte

<script>
	export let string;
</script>
<div>컴포넌트2</div>
<div>App에서 온 값 : {string}</div>

• App.svelte

<script>
	import Component2 from './Component2.svelte'
</script>
<Component2 string='쟝원영'></Component2>

• App.svelte (이것도 됨)

<script>
	import Component2 from './Component2.svelte'
	let name = '쟝원영'
</script>
<Component2 string={name}></Component2>

객체 내려보내기

?

Context API?

props의 반대. 거리가 먼 컴포넌트로 보내기?
on으로 타고타고 보냄.

• Component4

<script>
	import {createEventDispatcher} from 'svelte'
	const dispatch = createEventDispatcher()
	function send() {
		dispatch('what', '하니')
	}
</script>

<div>컴포넌트4</div>
<button on:click={() => send()}>눌러주세요</button>

<style>
	div {
		background-color: green;
	}
</style>

• Component3

<script>
	import {getContext} from 'svelte'
	import Component4 from './Component4.svelte'
</script>

<div>컴포넌트3이야 = {getContext('name')}</div>
<Component4 on:what></Component4>
<style>
	div{
		background-color: red;
	}
</style>

• Component2

<script>
	import Component3 from "./Component3.svelte"
	export let string;
</script>
<div>컴포넌트2</div>
<div>App에서 온 값 : {string}</div>
<Component3 on:what></Component3>

• App

<script>
	import {setContext} from 'svelte'
	import Component2 from './Component2.svelte'
	let name = ''
	setContext('name', '쟝원영')
	function send(event) {
		name = event.detail
	}
</script>
컴포넌트4가 준 값 : {name}
<Component2 string={name} on:what={send}></Component2>

svelte에서 import한 setContext로 key-value 값을 세팅하면 Component가 여러 개 있어도 중간 단계를 건너뛰어도 getContext로 가져온다.

우리 썼던 dispatcher..라고 생각하면 된다.

??

pdf보다 좀 더 간단하게 한 것.
월요일에는 실제로 서버 구동

---