[Pytho] Svelte

Svelte

Svelte란?

 Svelte가 뭔지 간단하게 짚고 넘어가자면 Svelte는 웹 애플리케이션 구축을 위한 JavaScript 프레임워크인데요. 가상 DOM을 사용하지 않고 대신 실제 DOM을 업데이트하는 명령형 코드로 구성 요소를 컴파일한다는 점에서 React 또는 Angular와 같은 프레임워크와는 다릅니다. 이를 통해 보다 효율적인 런타임과 더 빠른 로드 시간이 가능합니다. 또한 문법도 React나 Angular, Vue 보다 간결하고 코드도 짧습니다. 

 가상 돔을 사용하는게 실제 돔을 조작하는 것보다 빠르다고 생각할 수도 있지만 당연히 레이어가 하나 더 추가되어 있는 것이기 때문에 느립니다. JQuery가 너무 느려서 React나 Vue 같은 가상 돔을 사용하는 프레임워크가 나오긴 했지만 실제 돔을 조작하는 게 더 빠릅니다.

 

 

---

사용 예시

 

 

<script>
  import svelteLogo from './assets/svelte.svg'
  import viteLogo from '/vite.svg'
  import Counter from './lib/Counter.svelte'
  import Morning from "./lib/Morning.svelte";
  import Lotto from "./lib/Lotto.svelte";
  import Gugu from "./lib/Gugu.svelte";
  import GAwi from "./lib/GAwi.svelte";
  import Phone from "./lib/Phone.svelte";
</script>

<main>

  <h1>Vite + Svelte</h1>

  <table>
      <tr>
          <td>
            <Counter/>
          </td>
          <td>
            <Lotto/>
          </td>
      </tr>

    <tr>
      <td>
        <Lotto/>
      </td>
      <td>
        <Counter/>
      </td>
    </tr>



  </table>

    <Phone />

</main>

 

 

- 이런 식으로 넣어도 충돌 나지 않음. 

 

 

 

 

 

 

 

[클릭 시 로또 번호 생성하기]

<script>

  let lt1 = "__"
  let lt2 = "__"
  let lt3 = "__"
  let lt4 = "__"
  let lt5 = "__"
  let lt6 = "__"

  const myclick = () => {

      let arr = [1,2,3,4,5,  6,7,8,9,10,
          11,12,13,14,15, 16,17,18,19,20,
          21,22,23,24,25, 26,27,28,29,30,
          31,32,33,34,35, 36,37,38,39,40,
          41,42,43,44,45];


      for(let i=0; i<1000; i++){
          let rnd = parseInt((Math.random()*45)+"");
          let a = arr[0];
          arr[0] = arr[rnd];
          arr[rnd] = a;
      }
      for(let i=0; i<=5; i++){// i<45로 하면 모든 숫자를 정렬한것으로 됨
          for(let j=0; j<=5; j++){
              if(arr[i] < arr [j]){
                  let a = arr[i]
                  let b = arr[j]
                  arr[i] =b ;
                  arr[j] =a ;
              }
          }
      }
      lt1 = arr[0]+"";
      lt2 = arr[1]+"";
      lt3 = arr[2]+"";
      lt4 = arr[3]+"";
      lt5 = arr[4]+"";
      lt6 = arr[5]+"";

  }
</script>

<table border="1px">
        <tr>
            <td>{lt1}</td>
            <td>{lt2}</td>
            <td>{lt3}</td>
            <td>{lt4}</td>
            <td>{lt5}</td>
            <td>{lt6}</td>
        </tr>
        <tr>
            <td colspan="6">
                <input type="button" value="로또 생성하기" on:click={myclick}/>
            </td>
        </tr>

</table>

 

[ 출력단 입력 후 클릭 시 구구단 출력  ]

 

<script>

    let txt = "";
    const myclick = () => {
        var dan= document.querySelector('#it').value;
        var idan = parseInt(dan);
        txt = "";

        for (let i = 1; i <= 9; i++) {
            txt += idan +"*"+ i+ "="+(idan*i)+"<br/>";
        }


  }
</script>

<table border="1">
    <tr>
      <td>출력단수</td>
      <td>
        <input type="text" id="it" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="출력하기" on:click={myclick}/>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <div id="my_div">{@html txt}</div>
      </td>
    </tr>

</table>

<style>
  #it{
    width: 30px;
  }
  #my_div{
    height: 200px;
  }

</style>

[ 가위바위보 게임하기  ]

 

 

<script>

  let com = "";
  let result= "";
  let mine = ""

  const myclick = () => {

      let rnd = Math.random();

      if (rnd > 0.66){
          com = "가위";
      }
      else if(rnd > 0.33)	{
          com = "바위";
      }
      else{
          com = "보";
      }
      if (com == "가위" && mine == "가위") result = "비김";
      if (com == "가위" && mine == "바위") result = "이김";
      if (com == "가위" && mine == "보") result = "짐"  ;

      if (com == "바위" && mine == "가위") result = "짐";
      if (com == "바위" && mine == "바위") result = "비김";
      if (com == "바위" && mine == "보") result = "이김"  ;

      if (com == "보" && mine == "가위") result = "이김";
      if (com == "보" && mine == "바위") result = "짐";
      if (com == "보" && mine == "보") result = "비김"  ;


  }
</script>

<table>
    <tr>
      <td>나</td>
      <td>
        <input type="text" id="it_mine" bind:value="{mine}"/>
      </td>
    </tr>
    <tr>
      <td>컴</td>
      <td>
        <input type="text" id="it_com" value="{com}"/>
      </td>
    </tr>
    <tr>
      <td>결과</td>
      <td>
        <input type="text" id="it_result" value="{result}"/>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="button" value="게임하기" on:click={myclick}/>
      </td>
    </tr>

</table>

 

[ 번호 입력 후  입력한 번호 나오게 하기  ]

 

 

<script>
  let str_it ="";

  function myclick() {
    let str_new = this.value;
    str_it = str_it+ str_new
    //console.log(this);

  }

  function mycall() {
    alert("Calling\n"+ str_it);s
  }

</script>

<table border="1">
  <tr>
      <td colspan="3">
          <input type="text" id="it" bind:value={str_it}/>
      </td>
  </tr>
  <tr>
    <td><input type="button" class="btn_num" value="1" on:click={myclick}/></td>
    <td><input type="button" class="btn_num" value="2" on:click={myclick}/></td>
    <td><input type="button" class="btn_num" value="3" on:click={myclick}/></td>
  </tr>
  <tr>
    <td><input type="button" class="btn_num" value="4" on:click={myclick}/></td>
    <td><input type="button" class="btn_num" value="5" on:click={myclick}/></td>
    <td><input type="button" class="btn_num" value="6" on:click={myclick}/></td>
  </tr>
  <tr>
    <td><input type="button" class="btn_num" value="7" on:click={myclick}/></td>
    <td><input type="button" class="btn_num" value="8" on:click={myclick}/></td>
    <td><input type="button" class="btn_num" value="9" on:click={myclick}/></td>
  </tr>
  <tr>
    <td><input type="button" class="btn_num" value="0" on:click={myclick}/></td>
    <td colspan="2">
        <input type="button" class="btn_call" value="☎" on:click={mycall}/>
    </td>
  </tr>

</table>

<style>
    table{
      text-align: center;
    }
    #it{
      width: 120px;
      text-align: right;
    }
    .btn_num{
      width: 35px;
    }
    .btn_call{
      width: 71px;
    }
</style>

 

[ UPDown 숫자 맞추기 게임  ]

 

 

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

  let txt = ""
  let com = 0;

  const myclick = () => {
    let mine = document.querySelector("#it").value;
    let imine = parseInt(mine);
    let line = "";
    if (com > imine) {
      line += imine + "\t" + "UP" + "\n";
    } else if (com < imine) {
      line += imine + "\t" + "DOWN" + "\n";
    } else {
      line += imine + "\t" + "정답입니다." + "\n";
    }
    txt += line;

    document.querySelector("#it").value = "";
    document.querySelector("#it").focus();

  }

  const myran = () => {
    com = parseInt(Math.random() * 99 + "") + 1;
    console.log("com", com);
  }


  onMount(async () => {
    myran();
    console.log('child onMount')
  })

  onDestroy(async () => {
    console.log('child onDestroy')
  })

  beforeUpdate(async () => {
    console.log('child beforeUpdate')
  })

  afterUpdate(async () => {
    console.log('child afterUpdate')
  })


</script>

<table border="1">
  <tr>
    <td>맞출수</td>
    <td>
      <input type="text" id="it">
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="button" value="맞춰보기" on:click={myclick}>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <textarea id="ta" value="{txt}"/>
    </td>
  </tr>

</table>

<style>
  #it {
    width: 30px;
  }

  #ta {
    height: 150px;
  }

</style>