Svelte - Simple test

Svelte kit으로 간단한 반응형 페이지 및 간단한 fetch 테스트를 해봤습니다

 

먼저 Flutter 예제와 동일하게 JsonPlaceholder에서 간단한 Get 호출 및 처리

 

그리고 간단하게 html이랑 css로 화면에 표현 하는 부분만 다뤄봤습니다

 

먼저 폴더구조는 아래 이미지처럼 api, routes로 간단하게 나누었고 

< svelte kit으로 만든 구조 >

api/common.js

const getPosts = async (index) => {
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${index}`)

    const posts = await res.json()

    return {
        body: {
            posts
        }
    }
}

export {getPosts}

routes/index

<script>
    import {getPosts} from "../api/common"
    import {onMount} from "svelte"
    import { goto } from "$app/navigation";

    let posts

    onMount(async () => {
      const result = await getPosts("")
      posts = result.body.posts
    });
  
    function onTapCard(index){
      goto(`/post/${index}`)
    }
</script>

{#if posts}
<div class="div_main">
  {#each posts as post, index}
  <div class="div_card" on:click={() => onTapCard(index+1)}>
    <div>
      {post.title}
    </div>
    <div class="div_divider"/>
    <div>
      {post.body}
    </div>
  </div>

  {/each}
</div>
{/if}

<style>
  .div_main {
    text-align: center;
    display: inline-block;
  }

  .div_card {
    display: inline-table;
    height: 180px;
    width: 400px;
    margin: 10px 0 0 10px;
    padding: 5px 0 5px 0;
    box-shadow: 0 1px 3px grey, 0 2px 2px grey;
    border-radius: 12px;
    cursor: pointer;
  }

  .div_divider {
    height: 1px;
    margin: 5px 0 5px 0;
    background-color: grey;
  }

  .div_card div:nth-child(1){
    width: 90%;
    margin: auto;
    padding: 10px;
    font-weight: bold;
  }

  @media screen and (max-width: 600px){
    .div_card {
      display: inline-table;
      height: 200px;
      width: 90%;
      margin: 10px 5px 0 5px;
      padding: 5px 0 5px 0;
      box-shadow: 0 1px 3px grey, 0 2px 2px grey;
      border-radius: 12px;
      cursor: pointer;
    }
  }
</style>

post/[id]

<script>
import { page } from "$app/stores";
import { onMount } from "svelte";
import {getPosts} from "../../api/common"

    let pageIndex
    let post

    onMount(async () => {
        pageIndex = $page.params.id
        const res = await getPosts(pageIndex)

        post = res.body.posts
    })

    function onBackClick() {
        window.history.back();
    }
</script>

{#if  post}
    <div class="div_card">
        <div>
            Title : {post.title}
        </div>
        <div>
            <p>Detail</p>
            {post.body}
        </div>
        <div class="div_button" on:click={onBackClick}>Back</div>
    </div>
{/if}

<style>
    .div_card {
        display: block;
        margin: auto;
        padding: 20px;
        height: 400px;
        width: 400px;
        border: 1px solid;
        border-radius: 20px;
    }

    .div_card div:nth-child(1){
        font-size: 20px;
        font-weight: bold;
        height: 20%;
    }

    .div_card div:nth-child(2){
        height: 70%;
    }

    .div_card div p{
        font-size: 16px;
        text-align: center;
        font-weight: 600;
    }

    .div_button{
        position: relative;
        width: 100px;
        height: 25px;
        margin: 0 auto 0 auto;
        text-align: center;
        background-color: grey;
        color: white;
        border-radius: 8px;
        border: 1px solid grey;
        font-weight: 700;
        cursor: pointer;
    }

    @media screen and (max-width: 600px){
        .div_card {
            display: block;
            margin: auto;
            padding: 20px;
            height: 400px;
            width: 80%;
            border: 1px solid;
            border-radius: 20px;
        }
    }
</style>

< 간단한 테스트 화면 >

 

먼저 Javascript의 fetch를 이용해서 api 콜을 하는데

 

이 과정을 개발자 툴의 network의 Request header부분에서 보면

&amp;amp;lt; Request Header &amp;amp;gt;

원하는대로 호출이 잘 된것을 확인할 수 있고

(Get https://jsonplaceholder.typicode.com/posts)

 

받아온 데이터를 json()메소드를 이용해서 parse를 합니다

 

그리고 화면단에서 onMount부분에서 api콜을 해서 데이터를 가져옵니다

(onMount는 Flutter로 치면 initState랑 비슷..?)

 

그 후 posts값이 들어온 시점에 if문이 true가 되어

 

해당 페이지 부분을 그리게 됩니다

 

그리고 onclick 이벤트로 해당 카드의 index값을 넘기고

 

/post/index 로 이동하고 필요한 index부분만 api콜을 다시해서 화면에 그려줍니다

 

Flutter처럼 parameter를 넘기는 부분이 간단하면 굳이 api 콜을 두 번 안해도 될것 같은데

 

아직 필자의 경험이 부족해서 일단은 이렇게 구현을 했습니다

 

추가로 mediaquery를 이용해서 반응형도 간단하게 구현을 해봤는데

 

앱에 비해 화면 크기별로 대응하기에 조금더 수월한것 같다는 생각이 들었습니다

 

 

 

-- 이하 필자의 헛소리 타임이 시작될 예정이니 예제만 확인하실 분들은 스킵하시면 됩니다

 

 

 

먼저 이걸 Web부분에 포스팅 해야될지 아니면 삽질에 해야될지 고민이 많이 되었는데

 

필자의 헛소리가 들어간부분은 전부 삽질로 들어가기에 일단 삽질 카테고리에 포스팅 되었습니다

 

테스트 하면서 느낀게 Svelte는 진짜 진입장벽이 낮은거 같습니다

 

html, css, js 거의다 까먹기도 했고 알던 부분도 애매하게 알고 있었는데

 

이미 그럴사한 페이지를 여러개 찍어 낼 수 있었습니다

< 아.. 안돼! 돼! >

프로그래밍을 처음 접할때보다는 감각(?)이랑 잔재주(?)가 조금 늘었다고는 하지만

 

이렇게 빠르게 가능할지는 솔직히 상상도 못했습니다

 

근데.. CSS Align은 왜이렇게 어려운지 모르겠습니다

 

그냥 감으로 때려 맞추는 듯한 코딩으로 대충(?) 맞추고 있는데..

 

한번 날잡아서 싹 정리하고 넘어가던가 해야될것 같습니다..

 

그리고 JS는 파면 팔수록 뭔가 산으로 가는듯한 느낌을 많이 받는것 같습니다

 

아직 경험 부족인거 같으니 더 열심히 해봐야될 거 같습니다