Svelte
- js 프레임워크
컴파일러 프레임워크로 실행된다.
.svelte → .js로 바꿔주는 과정을 거치게된다.
Svelted의 특징
- 빠른데
- virtual dom을 사용하지 않는다.
react virtual dom 사용안할때
→ complie로 속도를 더 향상 시켯다.
bundle 했을때 가벼움을 보장할수있는 이유!?
사이드 프로젝트
→ svelte + typescript
<script></script>
<html></html>
<style></style>
mobx -> reaction과 같은기능
$:{
}event listener 사용
<button on:click={}>{#if flavours.length === 0}
<p>Please select at least one flavour</p>
{:else if flavours.length > scoops}
<p>Can't order more flavours than scoops!</p>
{:else}
<p>
You ordered {scoops}
{scoops === 1 ? 'scoop' : 'scoops'}
of {join(flavours)}
</p>
{/if}
html 태그에서 삼항연산자가 사용이 안되서 if문을 가지고 사용해주어야한다.{#each} -> 반복문 map ### 라이프 사이클
script -> beforeUpdate -> onMount -> afterUpdate### input use
<script>
let name = '';
</script>
<input bind:value={name} placeholder="enter your name" />
<p>Hello {name || 'stranger'}!</p>
### store
### writable (적을수도잇는)
import { writable } from 'svelte/store';
export const count = writable(0);
### readable (읽기 전용)
import { readable } from 'svelte/store';
export const time = readable(new Date(), function start(set) {
const interval = setInterval(() => {
set(new Date());
}, 1000);
return function stop() {
clearInterval(interval);
};
});
### derived (데이터 구독)
상태객체에서 상태값을 가지고 조회해옵니다.
간혹 상태객체가 subscribe() 되지 않았다면,
get() 을 통해 조회를 해오면 됩니다.
(하지만 문서에는 권장하지 않는다라고 되어있습니다)
vue computed 속성처럼 동작.
import { readable, derived } from 'svelte/store';
export const time = readable(new Date(), function start(set) {
const interval = setInterval(() => {
set(new Date());
}, 1000);
return function stop() {
clearInterval(interval);
};
});
const start = new Date();
export const elapsed = derived(time, ($time) => Math.round(($time - start) / 1000));
subscribe()를 가지는 스토어 객체만 $를 사용해 참조(writable, readable, derived)
tick
태스크를 완료하고 나서 화면이 갱신되도록 되어 있기 때문에
tick을 사용하여 내가 원하는때에 DOM 업데이트를 보장해줄때까지 기다린다.
그리고 그 다음이 실행되기 때문에 원하는 결과가 나올 것.
tick DOM 업데이트가 완료 되고 Promise 객체를 반환한다.
<script>
import { tick } from 'svelte';
let name = 'a to b';
async function handler() {
name = 'a to b @@@@@';
await tick();
const h1 = document.querySelector('h1');
console.log(h1.innerText);
}
</script>
<h1 on:click={handler}>ttttttt {name}</h1>
Let's do it developer