20240507 Svelte

스벨트 프로젝트 만들기

svelte 폴더는 C에 만들자

mkdir svelte
cd svelte
npm init vite may07
스벨트, 자바스크립트 고름
그 다음엔 시키는대로 하기

npm install axios
npm install tinro // 라우팅

=> pacakage.json에 가서 보면 있다.

axios 불러오기

2가지 모양

<script>
import axios from 'axios';
let board = [];
axios.get('http://172.30.1.59:3000/board')
.then(response => board = response.data.list)
.catch(error => error.console.log(error));
</script>
<div>
<table border="1">
<tr>
<th>번호</th>
<th>제목</th>
<th>날짜</th>
<th>글쓴이</th>
</tr>
{#each board as i}
<tr>
<td>{i.board_no}</td>
<td>{i.board_title}</td>
<td>{i.board_date}</td>
<td>{i.mno}</td>
</tr>
{/each}
</table>
</div>
<style>
</style>

<script>
  import axios from 'axios'
  //let board = [];
  $:items = axios.get('http://172.30.1.59:3000/board')
  .then(response => response.data.list)
  .catch(error => alert('문제가 발생했습니다.' + error))
</script>
<div>
  {#await items}
    <div>잠시만 기다려주세요.</div>
  {:then items} 
  <table border="1">
    <tr>
    <th>번호</th>
    <th>제목</th>
    <th>날짜</th>
    <th>글쓴이</th>
    <th>읽음수</th>
    </tr>
    {#each items as {board_no, board_title, board_date, mno, board_del}}
    <tr>
    <td>{board_no}</td>
    <td>{board_title}</td>
    <td>{board_date}</td>
    <td>{mno}</td>
    <td>{board_del}</td>
    </tr>
    {/each}
    </table>
  {:catch error}
    <div>문제가 발생했습니다.</div>
  {/await}
  
</div>

<style>


</style>