스벨트(Svelte) 정리

<script>스크립트 블록(자바스크립트 작성)</script>
<main>HTML 블록</main> <!-- main 태그를 빼기도 함 -->
<style>스타일 블록(CSS 작성)</style>

<script>
  let title = "Hello Svelte!";
</script>

<!-- 스크립트 블록에서 선언한 title 변수 값을 HTML 블록에서 사용-->
<h1>{title}</h1>

<script>
  let  a = 1;
</script>

{#if a > 0}
  <p>a는 양수</p>
{:else if a < 0}
  <p>a는 음수</p>
{:else}
  <p>a는 0</p>
{/if}

<script>
  let fruits = ["🍎", "🍊", "🍌", "🍓", "🍑"]
</script>

<select>
  <option>Select</option>
  {#each fruits as fruit, idx}
    <option>{idx}: {fruit}</option>
  {/each}
</select>

<script>
  async function getPosts(){
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const json = await res.json();
    return json;
  }
  let promisePosts = "";
</script>

<button on:click={() => promisePosts = getPosts()}>Get post lists</button>

<!-- promisePosts가 Pending 상태일 때 #await 식이 실행되고, -->
{#await promisePosts}
<p>Wait...</p>
<!-- promisePosts가 Fulfilled 상태로 변하면 :then 식이 실행됨 -->
{:then posts}
<p>대충 posts를 가공하는 코드...</p>
{/await}

<script>
  let name = "Svelte";
</script>

<main>
  <input type="text" bind:value={name}>

  <!-- name 값이 바뀌면 key 블록이 재생성됨 -->
  {#key name}
    <h1>Hello {name}!</h1>
    <p>{Date()}</p>
  {/key}
</main>

<script>
  let content = `
    <h1>Hello</h1>
    <p>World!</p>
  `;
</script>

{@html content}

<script>
  let pStyle = "active";
  let active = true;
  let admin = true;
</script>

<h1>클래스 속성 다양하게 사용하기</h1>
<p class="active">1. 클래스 속성을 직접 명시</p>
<p class={pStyle}>2. 클래스 속성과 스크립트 변수 바인딩</p>
<p class:active={active}>3. class 지시자 사용(`<p class="active">`와 동일함)</p>
<p class:active>4. class 지시자 줄여쓰기(`<p class="active">`와 동일함)</p>
<p class:active class:admin>5. class 지시자 여러 개 사용</p>

<script>
  // 1. 반응형 변수 선언 및 값 할당
  let a = 1; 
  
  // 3. 반응현 변수 값이 바뀌면 센서가 반응함
  $: console.log(`a는 {a} 입니다.`);
</script>
<!-- 2. 트리거 발생 -->
<button on:click={() => a = a + 1}>a는 {a} 입니다.</button>

<script>
  let a = 1
  
  $: console.log(`a는 ${a}`);
  
  $: {
    console.log(`a는 ${a}임`);
    console.log(`왜냐하면 ${a}이기 때문임`);
  }
  
  $: if(a > 0) {
    console.log('a는 양수임');
    console.log('왜냐하면 양수이기 때문임');
  }
  
  $: for(let i=0 ; i<4 ; i++) {
    console.log(`${i+1}번째 for문 그냥 돌려봄: ${a}`)
  }
</script>

<script>
  let fruits = ["🍓", "🍉", "🍒"];
  
  function trigger(){
    fruits.push("🍊");
    fruits = fruits; // 배열을 변경한 후 반드시 할당(=)을 해야 변경 감지
  }
  
  $: console.log(`배열 변경 감지됨. fruits = ${fruits}`)
</script>

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

<!-- input 태그에 입력된 텍스트 값이 name 변수에 저장됨 -->
<h1>Hello {name}!</h1>
<input type="text" bind:value={name}> 

<script>
  let size = 20;
</script>

<!-- input 태그에 입력된 숫자 값이 name 변수에 저장됨 -->
<h1>Size: {size}</h1>
<input type="range" bind:value={size} min=0 max=100>

<script>
  let editable = false;
</script>

<!-- 체크박스 체크 여부가 editable 변수에 저장됨 -->
<h1>editable: {editable}</h1>
<input type="checkbox" bind:checked={editable}>Check

<script>
  let where = "";
</script>

<!-- 어느 라디오 버튼이 선택됐는지 where 변수에 저장됨 -->
<h1>당신의 성별은? {where}</h1>
<input type="radio" bind:group={where} value="남성">남성
<input type="radio" bind:group={where} value="여성">여성

<script>
  let choice;
</script>

<!-- 어떤 값이 선택되었는지 choice 변수에 저장됨 -->
<h1>선택한 값: {choice}</h1>
<select bind:value={choice}>
  <option value="Svelte">Svelte</option>
  <option value="React">React</option>
  <option value="Vue">Vue</option>
</select>

<script>
  let chosen = [];
</script>

<!-- 어떤 값이 선택되었는지 chosen 변수에 저장됨 -->
<h1>선택한 값: {chosen}</h1>
<select multiple bind:value={chosen}>
  <option value="Svelte">Svelte</option>
  <option value="React">React</option>
  <option value="Vue">Vue</option>
</select>

<script>
  let html = `
  <h1>Hello</h1>
  <p>Svelte!</p>
  `;
</script>

<!-- bind:innerHTML을 사용하려면 contenteditable 속성이 필요함 -->
<div contenteditable="true" bind:innerHTML={html}></div>

<script>
  let clientWidth, clientHeight, offsetWidth, offsetHeight;
</script>

<h1 
    bind:clientWidth={clientWidth} 
    bind:clientHeight={clientHeight} 
    bind:offsetWidth={offsetWidth} 
    bind:offsetHeight={offsetHeight}>Hello Svelte!
</h1>
<ul>
  <li>clientWidth: {clientWidth}</li>
  <li>clientHeight: {clientHeight}</li>
  <li>offsetWidth: {offsetWidth}</li>
  <li>offsetHeight: {offsetHeight}</li>
</ul>

<script>
  import { onMount } from "svelte";
  
  onMount(() => console.log("onMount() 호출됨."));
</script>

<script>
  import { onMount, onDestroy } from "svelte";
  
  onMount(() => {
    console.log("onMount() 호출됨.");
    
    // onDestroy() 콜백함수와 같은 기능
    return () => console.log("컴포넌트 파괴됨.");
  });
  
  onDestroy(() => console.log("onDestroy() 호출됨."));
</script>

<script>
    import { beforeUpdate, afterUpdate } from "svelte";

    beforeUpdate(() => console.log("beforeUpdate() 호출됨"));
    afterUpdate(() => console.log("afterUpdate() 호출됨"));
</script>

<script>
  import { tick } from "svelte";
  
  let count = 0;
  
    // async 함수가 tick 함수를 호출해야 함
  const handleButton = async () => {
    count = count + 1;
    await tick(); // 돔이 업데이트 되면 tick 함수 실행 이후 코드가 실행됨
  }
</script>

<h1>{count}</h1>
<button on:click={handleButton}>Count</button>

<!-- App.svelte: 상위 컴포넌트 -->

<script>
    // 하위 컴포넌트 import
  import Child from "./Child.svelte";

    // props로 전달할 객체
  let list = [
    { code: "svelte", desc: "스벨트" },
    { code: "react", desc: "리액트" },
    { code: "javascript", desc: "자바스크립트" }
  ];
</script>

<!-- Child 컴포넌트에 list props 전달 -->
<Child list={list} />

<!-- Child.svelte: 하위 컴포넌트 -->

<script>
  export let list; // props로 받아올 변수에 export 사용
</script>

<ul>
  {#each list as item}
  <li>{item.code}: {item.desc}</li>
  {/each}
</ul>

<script>
  import Card from "./Card.svelte";
</script>

<Child>콘텐츠 영역<Child>

<slot></slot>

<!-- App.svelte -->

<script>
  import Child from "./Child.svelte";
  let user = "스벨트";
</script>

<Child>
    <!-- Named Slot을 사용하여 슬롯을 구분 -->
  <h2 slot="user">{user}</h2>
  <span slot="id">svelte</span>
</Child>

<!-- Child.svelte -->

<!-- Named Slot을 사용하여 슬롯을 구분 -->
<slot name="user"></slot>
<p>아이디: <slot name="id"></slot></p>

<!-- App.svelte -->

<script>
  import Child from "./Child.svelte";
  let user = "스벨트";
</script>

<Child>
  <h2 slot="user">{user}</h2>
  <!-- id slot을 전달하지 않음 -->
</Child>

<!-- Child.svelte -->

<slot name="user"></slot>

<!-- id slot에 값이 들어있는지 확인 -->
{#if $$slots.id}
<p>아이디: <slot name="id"></slot></p>
{:else}
<p>아이디: 비어있음</p>
{/if}

<script>
  import Child from "./Child.svelte";
</script>

<Child>
  <!-- 하위 컴포넌트 슬롯의 Props를 let 지시자를 사용하여 가져옴 -->
  <h1 slot="foo" let:hovered={isFocused} class:hovered={isFocused}>Hello Svelte!</h1>
</Child>

<style>
  .hovered {
    font-style: italic;
  }
</style>

<script>
  let isHovered = false;
  const handleMouseEnter = () => isHovered = true;
  const handleMouseLeave = () => isHovered = false;
</script>

<!-- Slot에는 지시자를 사용할 수 없으므로 Slot을 div 태그로 감싼 후 이 태그에 이벤트 지시자를 사용함 -->
<div on:mouseenter={handleMouseEnter} on:mouseleave={handleMouseLeave}>
  <!-- 마우스 커서 진입 및 탈출 이벤트 상태를 슬롯의 Props를 사용하여 전달 -->
  <slot name="foo" hovered={isHovered}></slot>
</div>

<script>
  import { setContext } from "svelte";
  import Child from "./Child.svelte";
  
  // 첫 번째 파라미터: 키(식별자)
  // 두 번째 파라미터: 값
  setContext("num", 10);
</script>

<Child />

<script>
  import { getContext, hasContext } from "svelte";
  let num;
  
  if(hasContext("num")) {
    num = getContext("num");
  }
</script>

<h1>Context: {num}</h1>

<script>
  let count = 0;
  
  /* 이벤트 처리 함수 */
  const handleCount = () => count = count + 1;
  const handleEvent = (e) => console.log(e.target);
</script>

<!-- on 지시자로 이벤트 처리 함수 지정. -->
<button on:click={handleCount} on:click={handleEvent}>Click ({count})</button>

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

<h1>{count}</h1>
<button on:click={(e) => count = count + 1 }>Count</button>

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

<!-- 버튼이 한 번만 동작함 --->
<h1>{count}</h1>
<button on:click|once={(e) => count = count + 1 }>Count</button>

<!-- Child.svelete: 커스텀 이벤트를 보낼 하위 컴포넌트 -->
<script>
  // 1. 상위 컴포넌트로 커스텀 이벤트를 전달하기 위한 dispatch 생성
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
  
  // 2. 상위 컴포넌트로 커스텀 이벤트를 전달하는 함수(커스텀 이벤트 명, 전달할 데이터)
  function handleChildButton() {
    dispatch("childButtonClicked", { text: "Child button clicked." });
  }
</script>

<!-- 3. HTML 엘리먼트에 커스텀 이벤트 처리 함수 부착 -->
<button on:click={handleChildButton}>Click!</button>

<!-- App.svelte: 커스텀 이벤트를 받을 상위 컴포넌트 -->
<script>
  import Child from "./Child.svelte";
  
  // 4. 하위 컴포넌트가 보내온 이벤트를 처리하는 함수
  const handleChildEvent = (e) => {
    alert(e.detail.text);
  }
</script>

<Child on:childButtonClicked={handleChildEvent} />

/* store.js */

import { writable } from "svelte/store";

// 1. Writable을 사용하여 변수 초기값 설정
// 초기값은 숫자, 문자, 배열, 객체 등 자유롭게 설정 가능
export const count = writable(0);

console.log("Writable Store 생성 완료.", count);

<!-- App.svelte -->

<script>
  import { onDestroy } from "svelte";
  import { count } from "./store.js";

  let buttonCount;
  const handleButton = () => {
    buttonCount = buttonCount + 1;
  }

  // 2. Store 구독
  //  * subscribe 함수는 변수 값 변경 여부를 감지 후 콜백 함수를 실행함
  //  * 매개변수는 누군가가 변경한 스토어 값
  const unsubscribe = count.subscribe((v) => {
    buttonCount = v;
    console.log("count 값이 변경되었습니다.", v);
  });

  // 3. Store 변경
  $: count.set(buttonCount);

  // 4. Store 구독 종료
  onDestroy(unsubscribe);
</script>

<h1>{buttonCount}</h1>
<button on:click={handleButton}>Count</button>

<script>
  import { count } from "./store.js";

  // 스토어 이름 앞에 $를 붙여 사용하면 자동 구독됨
  const handleButton = () => $count = $count + 1;
</script>

<h1>{$count}</h1>
<button on:click={handleButton}>Count</button>

/* store.js */

import { readable } from "svelte/store";

// 1. Readable Store 생성
//  * readable 함수의 첫번째 매개변수는 스토어의 초기값
//  * readable 함수의 두번째 매개변수는 구독 시 호출되는 콜백함수
//   - 이 콜백함수는 스토어를 업데이트하는 set 함수를 파라미터로 받음
//   - 이 콜백함수는 구독이 종료될 때 호출되는 stop 함수를 반환함
export const time = readable(new Date(), function start(set) {
  console.log("Readable Store 구독 시작.");

  // 1초 간격으로 시간 갱신
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return function stop() {
    console.log("Readable Store 구독 종료.");
    clearInterval(interval);
  }
});

console.log("Readable Store 생성 완료.", time);

<script>
  import { time } from "./store.js";
</script>

<h1>현재 시간: {$time}</h1>

/* store.js */

import { writable, derived } from "svelte/store";

export const num = writable(2);

// Derived Store 생성
//  * derived 함수의 첫 번째 파라미터는 원본 스토어
//  * derived 함수의 두 번째 파라미터는 무기명 함수(원본 스토어가 변경될 때마다 호출할 콜백 함수)
export const sqrt1 = derived(num, $num => Math.sqrt($num));

// derived 함수에서 사용하는 무기명 함수의 매개변수가 2개인 경우
// * 첫 번째 매개변수: 스토어 값
// * 두 번째 매개변수: set 함수(새롭게 계산된 값을 derived 스토어에 저장하는 함수)
export const sqrt2 = derived(num, ($num, set) => {
  set(Math.sqrt($num));
  return () => {
    // 실행이 종료되었을 때 실행할 코드
  };
});

<script>
  import { num, sqrt1, sqrt2 } from "./store.js";
</script>

<main>
  <h1>{$num}의 제곱근은 {$sqrt1}입니다.</h1>
  <h1>{$num}의 제곱근은 {$sqrt2}입니다.</h1>
</main>

<script>
  import { num } from "./store.js";
  import { get } from "svelte/store";
</script>


<h1>1. `$STORE_NAME`으로 스토어 객체에 접근하는 경우</h1>
<p>num의 값은 {$num}입니다.</p>

<h1>2. subscribe의 콜백 함수에서 넘겨 받는 매개변수로 스토어 값에 접근하는 경우</h1>
<p>이건 subscribe 함수 내에서 접근해야 함...</p>

<h1>3. get 함수를 사용하여 접근하는 경우</h1>
<p>num의 값은 {get(num)}입니다.</p>

<script>
  import Child1 from "./Child1.svelte";
  import Child2 from "./Child2.svelte";

  const lists = [
    { mode: "Child1", component: Child1 },
    { mode: "Child2", component: Child2 }
  ];

  let current = lists[0];
  let text = "Svelte";
</script>

<select bind:value={current}>
  {#each lists as list}
    <option value={list}>{list.mode}</option>
  {/each}
</select>

<!-- 선택된 옵션에 따라 하위 컴포넌트가 달리 렌더링됨 -->
<!-- current.component를 렌더링하고, content Props를 전달 -->
<svelte:component this={current.component} content={text}/>

<script>
  let innerWidth;
  let innerHeight;
  let outerWidth;
  let outerHeight;
  let scrollX;
  let scrollY;
  let online;

  function handleKeydown(e) {
    alert(e.key + "키를 누르셨군요.");
  }
</script>

<svelte:window bind:innerWidth bind:innerHeight bind:outerWidth bind:outerHeight bind:scrollX bind:scrollY bind:online on:keydown={handleKeydown} />

<p>브라우저 콘텐츠 영역의 가로 픽셀 크기(읽기 전용): {innerWidth}</p>
<p>브라우저 콘텐츠 영역의 세로 픽셀 크기(읽기 전용): {innerHeight}</p>
<p>브라우저의 가로 픽셀 크기(읽기 전용): {outerWidth}</p>
<p>브라우저의 세로 픽셀 크기(읽기 전용): {outerHeight}</p>
<p>수평 방향으로 스크롤한 픽셀 값: {scrollX}</p>
<p>수직 방향으로 스크롤한 픽셀 값: {scrollY}</p>
<p>브라우저 온라인 상태 여부: {online}</p>

<script>
  let message = "마우스가 어디 갔어요...?";

  function handleMouseLeave() {
    message = "마우스가 어디 갔어요...?";
  }

  function handleMouseEnter() {
    message = "마우스 포인터 발견!";
  }
</script>


<!-- body 영역에 마우스를 옮기거나 바깥 영역으로 이동하면 메시지가 바뀜 -->
<svelte:body 
  on:mouseleave={handleMouseLeave}
  on:mouseenter={handleMouseEnter}
/>

<h1>{message}</h1>

<svelte:head>
  <title>svelte:head로 Title 설정</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <meta http-equiv="속성값" content="속성값" name="속성값" />
</svelte:head>

<svelte:options immutable={true} accessors={true} />

<script>
  // 대충 자바 스크립트 코드
</script>