최소한의 UI를 갖춘 오늘의 Svelte 앱!

7459 단어 javascript vercel svelte beginners

시작하기

다음 명령을 사용하여 로컬 디렉터리 내에 새 svelte 프로젝트를 만듭니다.

# Creating a new project
npx degit sveltejs/template 

# Install the dependencies...
npm install

...그런 다음 롤업을 시작합니다.

npm run dev

localhost:8080으로 이동합니다. 앱이 실행되는 것을 볼 수 있습니다. src에서 구성 요소 파일을 편집하고 저장한 다음 페이지를 새로고침하여 변경 사항을 확인하세요.

부트스트랩 추가

다음 방법 중 하나를 사용하여 Sveltstrap을 추가합니다.

# Method One: Install sveltestrap and peer dependencies via NPM

 npm install sveltestrap 

# Method Two: Include CDN within Static HTML layout

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

폴더 구조

루트 수준에서 다음 파일을 생성합니다.

농담.svelte

전환.svelte

Api.js

API에서 데이터 추출

API.js로 이동하고 다음 코드를 추가하여 getJodeData 함수를 사용하여 API에서 데이터를 가져옵니다.

export const getJokeData = async () => {
    const response = await fetch('https://icanhazdadjoke.com', {
        headers: {
            Accept: 'application/json',
        },
    });

    const json = await response.json();

    return json.joke;
};

구성 요소 만들기

이 프로젝트에는 두 가지 구성 요소가 있는데 하나는 애니메이션용이고 다른 하나는 농담 텍스트를 표시하기 위한 것입니다.

이제 Joke.svelte 파일에 다음 코드를 추가합니다.

<script>
  import { Card } from "sveltestrap";
  export let joke;
</script>

<style>
  :global(.joke-text){
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  text-align: center;
  }
</style>

<Card class="joke-text" body>{joke}</Card>

그리고 Transition.svelte 파일 내에 fly 전환을 생성합니다.

<script>
  import { fly } from "svelte/transition";
  export let duration = 1000;
  export let distance = 200;
</script>

<div in:fly={{ y: distance, duration }} out:fly={{ x: distance, distance }}>
  <slot />
</div>

App.Svelte 완성

우리의 App.Svelte 구조는 이제 다음과 같아야 합니다.

<script>
 // JavaScript Logic
</script>

<style>
 // CSS Styles
</style>

<main>
 // HTML Markup
</main>

이제 sveltestrap에서 스크립트로 다음 부트스트랩 구성 요소를 가져와야 합니다.

import { Col, Container, Row, Button} from "sveltestrap";

다음으로 방금 정의한 다음 구성 요소를 사용하여 컨테이너를 만들 수 있습니다.

<Container class="joke-container">
    <Row>
        <Col>
            <h1>The Best Dad Jokes!</h1>
        </Col>
    </Row>
    <Row>
    <Col>
      <Button class="random-joke" color="danger">
        Random Joke
      </Button>
    </Col>
    </Row>
</Container>

이것은 앱의 재미있는 부분이므로 컨테이너의 스타일을 지정해 보겠습니다.

<style>
  :global(.random-joke) {
    width: 100%;
  }
  :global(h1){
    color: white;
  }
  :global(.row) {
    margin-top: 10px;
    padding: 10px;
  }
  :global(.joke-container){
  border-radius: 10px;
  background-color: #00092C;
  }  
</style>

그런 다음 네트워크를 통해 Joke 데이터를 로드하기 위해 onMount을 사용하여 방금 생성한 다음 구성 요소를 가져오도록 App.svelte를 수정해야 합니다.

<script>
import { onMount } from "svelte";
import { Col, Container, Row, Button} from "sveltestrap";
import { getJokeData } from "./api.js";
import Transition from "./transition.svelte";
import Joke from "./joke.svelte";
</script>

API의 get 요청으로 onMount 핸들러를 생성하고 App.Svelte 파일을 완성해 봅시다.

<script>
import { onMount } from "svelte";
import { Col, Container, Row, Button} from "sveltestrap";
import { getJokeData } from "./api/api.js";
import Transition from "./components/transition.svelte";
import Joke from "./components/joke.svelte";
let randomJoke;
let jokes = [];
let mode = "loading";
onMount(async () => {
    await onRandomJoke();
  });
async function onRandomJoke() {
    try {
      mode = "loading";
      await sleep(500);
      randomJoke = await getJokeData();
      await sleep(500);
      mode = "random";
    } catch (e) {
      alert("Oops! You've Encountered An Error.");
    }
  }
  const sleep = delayMS => new Promise(res => setTimeout(res, delayMS));
</script>

<style>
  :global(.random-joke) {
    width: 100%;
  }
  :global(h1){
    color: white;
  }
  :global(.row) {
    margin-top: 10px;
    padding: 10px;
  }
  :global(.joke-container){
  border-radius: 10px;
  background-color: #00092C;
  }  
</style>

<Container class="joke-container">
    <Row>
        <Col>
            <h1>The Best Dad Jokes!</h1>
        </Col>
    </Row>
    <Row>
    <Col>
      <Button on:click={onRandomJoke} class="random-joke" color="danger">
        Random Joke
      </Button>
    </Col>
    </Row>
    {#if mode === 'random'}
    <Transition>
      <Row>
        <Col>
          <Joke joke={randomJoke}/>
        </Col>
      </Row>
    </Transition>
  {/if}
</Container>