백엔드도 프론트엔드를 알고있어야 하는 것 같다.
그래서 React를 공부하려고 했으나, 쉽고 빠르게 배울 수 있는 프론트 기술인 Svelte를 알게 되어서 찍먹하게 되었다.
.svlete
파일을 html 요소로 변환해주기 때문<script>
let number = 10;
</script>
{number}
<script>
// 무조건 대문자로 시작해야 됨. 파일 명은 상관없
import Nested from './Nested.svelte';
</script>
<p>This is a paragraph.</p>
<Nested />
<style>
p {
color: goldenrod;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>
<script>
let count = 0;
$: if (count >= 10) {
alert('count is dangerously high!');
count = 0;
}
$: {
// count값이 바뀌면, 해당 블록 코드가 다 실행됨
// 안바뀌면, 실행안
console.log(`the count is ${count}`);
console.log(`this will also be logged whenever count changes`);
}
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
<script>
let count = 0;
// let doubled = count * 2 ; count가 10이 되어도 doubled는 항상 0임
$: doubled = count * 2; // dount값에 따라 값이 바뀜
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
<p>{count} doubled is {doubled}</p>
<script>
let count = 0;
$: if (count >= 10) {
alert('count is dangerously high!');
count = 0;
}
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
{#if count > 10}
<p>{count} is greater than 10</p>
{:else if count < 5}
<p>{count} is less than 5</p>
{:else}
<p>{count} is between 5 and 10</p>
{/if}
<script>
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
let selected = colors[0];
</script>
<div>
// 변수 명, 인덱스
{#each colors as color, i}
<button
aria-current={selected === color}
aria-label={color}
style="background: {color}"
on:click={() => selected = color}
>{i + 1}</button>
{/each}
</div>
<script>
import Thing from './Thing.svelte';
let things = [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'carrot' },
{ id: 4, name: 'doughnut' },
{ id: 5, name: 'egg' }
];
function handleClick() {
things = things.slice(1);
}
</script>
<button on:click={handleClick}>
Remove first thing
</button>
{#each things as thing (thing.id)}
<Thing name={thing.name} />
{/each}
<script>
import { getRandomNumber } from './utils.js';
let promise = getRandomNumber();
function handleClick() {
promise = getRandomNumber();
}
</script>
<button on:click={handleClick}>
generate random number
</button>
{#await promise}
<p>...waiting</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
on:(이벤트명)={함수}
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
|
키워드를 통해서 적용 가능on:click|once|capture={...}
<button on:click|once={() => alert('clicked')}>
Click me
</button>
const {subscribe, set, update} = writable(초기값)
count.subscribe((value) => {
count_value = value;
});
$
기호를 통해, auto-subscribe도 가능{$count}
stores.js
import { writable } from 'svelte/store';
// writable()는 매개변수로 넘겨진 값을 제어할 수 있는 여러 함수를 제공
// count 변수에는 set, update, subscribe 함수가 주어짐
export const count = writable(0);
<script>
import { count } from './stores.js';
function increment() {
count.update((n) => n + 1);
}
// store 변수에 직접 접근할 경우, $ 기호를 꼭 붙여줘야 함
//const increment = () => {
// $count = $count + 1;
//}
</script>
<button on:click={increment}>
+
</button>
----------
<script>
import { count } from './stores.js';
function decrement() {
count.update((n) => n - 1);
}
// store 변수에 직접 접근할 경우, $ 기호를 꼭 붙여줘야 함
//const decrement = () => {
// $count = $count - 1;
//}
</script>
<button on:click={decrement}>
-
</button>
------------
<script>
import { count } from './stores.js';
function reset() {
count.set(0);
}
// store 변수에 직접 접근할 경우, $ 기호를 꼭 붙여줘야 함
//const reset = () => {
// $count = 0;
//}
</script>
<button on:click={reset}>
reset
</button>
<script>
import { count } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';
let count_value;
count.subscribe((value) => {
count_value = value;
});
</script>
<h1>The count is {count_value}</h1>
<Incrementer />
<Decrementer />
<Resetter />
<script>
import { count } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';
</script>
<h1>The count is {$count}</h1>
<Incrementer />
<Decrementer />
<Resetter />
const value = readable(초기값, 초기 함수)
초기 함수
에서 반환하는 stop
함수를 실행(맨 마지막 상태값이 unsubscribe
될 때)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);
};
});
const value = derived(state, $state => $state + 1)
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)
);
직관적이고 명확해서 React나 Vue에 비해 배우기 쉽고 빨랐다. 단, 자료가 많이 없고 버전도 초기버전이라 아쉬웠다.
게다가, 채용 시장엔 대부분 React를 요구하기 때문에, 취준 시기에 Svelte를 사용해도 괜찮을지 걱정이 되기도 하였다.
여유가 있다면, 좀 더 깊이 공부해 보면서 프로젝트에 적용해보고싶은 욕심이 난다.