Svelte에서 RESTAPI 사용

작성자 Abdulazeez Abdulazeez Adeshina✏️
최신호의 연간 잡지를 보면 현대적인 스타일과 간결성을 바탕으로 Svelte는 2020년 볼 만한 전단 도서관이다.
Svelte는 현대적인 반응식 구성 요소 프레임워크로 구축할 때 실행되며 구성 요소를 효율적인 명령식 코드로 변환하고 외과 수술을 통해 DOM을 업데이트합니다.

뭐 공부 해요?

본고에서 우리는 간단한 응용 프로그램을 구축하여 Svelte가 API의 데이터를 어떻게 사용하고 나타내는지 탐색할 것이다.우리는 먼저 간단한 백엔드를 만들어서 데이터를 저장한 다음에 날씬한 구성 요소를 작성할 것이다.
JavaScript, CSS 및 Node에 대해 알고 있다고 가정합니다.그리고 Svelte 자체의 작업 원리.만약 네가 완전히 날씬하다면, 너는 반드시 보기 전에 계속해야 한다.또한 this GitHub repo 에서 이 문서에 사용된 코드를 찾을 수 있습니다.

설치 프로그램

우리가 해야 할 첫 번째 일은 응용 프로그램의 코드를 저장할 작업 디렉터리를 만드는 것이다.날씬한 프로젝트를 시작하고 실행할 수 있는 방법은 매우 많다. 왜냐하면 이것은 날씬한 입문 강좌가 아니기 때문이다. 우리는 degit, 비계 도구를 사용하여 날씬한 템플릿을 복제할 것이다.
응용 프로그램을 구축하려면 기본 설정 작업 디렉토리에서 터미널에서 다음 명령을 실행합니다.

npx degit sveltejs/template continent-app

다음은 새로 만든 디렉터리로 이동하여 의존 항목을 설치하는 것입니다.

cd continent-app && npm install

의존 항목 설치가 완료되면 두 개의 구성 요소 파일 continent-app 과 Continents 을 만들고 응용 프로그램을 시작합니다.

touch src/{Continent,Continents}.svelte
npm run dev

다음 화면이 표시됩니다.

API 구축

현재 우리는 슬림한 응용 프로그램을 시작하고 실행했습니다. 우리는 슬림한 응용 프로그램의 구성 요소를 작성하기 전에 API를 구축하려고 합니다.우리의 API는 간단한 API로 7대륙에 대한 하드코딩 정보를 저장하고 호출되면 이 정보를 검색할 수 있다.
다음은 응용 프로그램의 디렉터리에 새 폴더Continent를 만들고 다음 의존 항목을 설치합니다.

mkdir api && cd api
npm init -y // Quick initialisation of directory
npm install express cors body-parser

설치 후 간단한 백엔드를 저장하고 아래에 첨부된 코드를 복사하는 새 파일api을 만듭니다.

touch app.js

응용 프로그램.회사 명

우선 종속 항목을 가져오고 초기화합니다.

const express = require("express");
const bodyParser = require("body-parser");
const cors = require('cors')

const app = express();
app.use(bodyParser.json());
app.use(cors())

다음으로 우리는 JSON 형식으로 아프리카 대륙의 명칭, 인구, 국가 수량과 킬로미터 단위의 면적을 포함하는 데이터 그룹을 만들었다

const continents = [
  {
    id: 1,
    name: "Asia",
    population: "4,624,520,000",
    no_of_countries: 50,
    area: "44,579,000"
  },
  {
    id: 2,
    name: "Africa",
    population: "1,327,042,300",
    no_of_countries: 54,
    area: "30,370,000"
  },
  {
    id: 3,
    name: "North America",
    population: "590,176,500",
    no_of_countries: 23,
    area: "24,709,000"
  },
  {
    id: 4,
    name: "South America",
    population: "429,276,300",
    no_of_countries: 12,
    area: "17,840,000"
  },
  {
    id: 5,
    name: "Antartica",
    population: "No real data on populants",
    no_of_countries: 0,
    area: "14,000,000"
  },
  {
    id: 6,
    name: "Europe",
    population: "747,447,200",
    no_of_countries: 51,
    area: "10,180,000"
  },
  {
    id: 7,
    name: "Australia",
    population: "42,448,700",
    no_of_countries: 14,
    area: "8,600,000"
  }
]

이제 대륙의 데이터를 대륙 변수에 저장했습니다. API를 위한 프로세서를 작성합니다. 이 프로세서는 데이터를 검색하고 백엔드를 시작할 수 있도록 합니다.

app.get("/", (req, res) => {
  res.send(continents);
});

app.listen(8081, () => {
  console.log("App's running on port 8081");
});

우리는 백엔드 응용 프로그램을 성공적으로 완성했습니다!우리는 다음 명령을 통해 그것을 시작할 수 있다.

node app.js

urlapp.js로 이동하면 대륙과 그 데이터의 목록으로 돌아갈 수 있다는 메시지를 받았습니다.
다음은 슬림한 응용 프로그램의 구성 요소를 작성하여 데이터를 검색하고 렌더링할 것입니다.

슬림한 구성 요소 작성

위에서 보듯이 날씬한 프로그램은 기본 로그인 페이지를 보여 줍니다. 우리는 백엔드를 완성했습니다.다음 단계는 우리의 슬림한 구성 요소를 작성하고 응용 프로그램을 다시 설계하여 우리의 대륙 데이터를 보여주는 것이다.우리는 두 부분을 작성할 것이다.

localhost:8081: 이 구성 요소는 도구로 Continent 구성 요소

에서 대륙 데이터로 전달됨

Continents: 이 구성 요소는 백엔드에서 대륙 목록을 검색하고 Continents 구성 요소

를 통해 보여줍니다
우리는 먼저 Continent 구성 요소를 작성할 것이다. 이 구성 요소는 Continent 구성 요소에서 대륙 데이터로 전달된다.

대륙

우리는 우선 구성 요소의 Continents.svelte 부분에 도구continent를 만듭니다.

<script>
  // create a prop
  export let continent;
</script>

<script> 도구는 React와 Vue 같은 다른 라이브러리에서 데이터를 렌더링하는 데 사용됩니다.
다음은 도구에서 데이터를 렌더링합니다.API에서 이름, 인구, 국가 수 및 지역에 대한 데이터는 다음과 같습니다.이 내용은 스크립트 태그 아래에 표시됩니다.

<article>
    <h1>{continent.name}</h1>
    <small>
      Population: <b>{continent.population}</b>   
    </small><br/>
    <small>
      Number of countries: <b>{continent.no_of_countries}</b>
    </small><br/>
    <small>
      Continent's size: <b>{continent.area}</b>
    </small>
</article>

너무 좋아요.다음은 다음과 같은 스타일을 추가합니다.

<style>
  article {
    margin: 0 0 1em 0;
  }
  h1 {
    font-size: 1.4em;
    margin: 0;
    display: block;
  }
</style>

우리는 이미 우리의 대륙 구성 요소를 성공적으로 완성했다. 이것은 다른 라이브러리에서 구성 요소를 위해 대량의 코드를 작성해야 하는 라이브러리보다 훨씬 간단하다.이어서 우리는 대륙 부분을 썼다.

대륙

이 구성 요소에서 우리는 백엔드에서 대륙 목록을 검색하여 교체하고 각 대륙을 도구로 Continents.svelte 구성 요소에 전달하여 렌더링합니다.우리는 먼저 Continent 방법과 onMount() 구성 요소를 가져올 것이다.

<script>
  import { onMount } from "svelte";
  import Continent from "./Continent.svelte";
  // define the data holding variable
  let continents;

다음은 Continent 방법을 정의합니다. 이 방법은 onMount 구성 요소를 렌더링할 때 바로 실행됩니다.

onMount(async () => {
    await fetch(`http://localhost:8081/`)
      .then(r => r.json())
      .then(data => {
        continents = data;
      });
  })

</script>

다음 단계는 반복적으로 검색된 대륙 데이터를 도구로 전달하는 것이다Continents.이것은 Svelte의 내장 조건 지원을 통해 이루어진 것이다.

{#if continents}
  {#each continents as continent }
    <ul>
      <li>    
        <Continent {continent} />
      </li>
    </ul>
  {/each}
{:else}
  <p class="loading">loading...</p>
{/if}

위의 코드에서, 우리는 먼저 데이터를 검색했는지 확인합니다.만약 그렇다면 Continent 구성 요소를 통해 데이터를 교체하고 나타낸다. 예를 들어 2-8행과 같다.그렇지 않으면 로드 메시지가 표시됩니다.

대륙성분법

React에 onMount()가 있는 것처럼 Svelte에도 componentDidMount() 방법이 있습니다.
이 메서드는 어셈블리를 렌더링할 때 수행되는 함수입니다.이것은 미리 정의된 함수를 매개 변수로 삼을 수도 있고, 그 중에서 함수를 정의할 수도 있다. 위와 같다.
다음은 다음과 같은 스타일을 추가했습니다.

<style>
  .loading {
    opacity: 0;
    animation: 0.4s 0.8s forwards fade-in;
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  li {
    list-style-type: georgian;
  }
</style>

렌더링 응용 프로그램

우리는 이미 구성 요소를 성공적으로 작성했는데, 다음 단계는 응용 프로그램의 메인 구성 요소를 통해 데이터를 보여주는 것이다.우리는 onMount() 구성 요소를 다시 쓸 것입니다.

<script>
  import { onMount } from "svelte";
  import Continent from "./Continent.svelte";
  import Continents from "./Continents.svelte";
  let continents;
  let continent;
</script>

<h1>The Seven Continents Svelte App</h1>
<main>
    <Continents {continents} />
</main>

Svelte는 미리 구축된 열 재부팅 기능이 있기 때문에 App 응용 프로그램을 탐색하면 다음과 같은 화면을 얻을 수 있습니다.

다음으로, 우리는 우리의 응용 프로그램 제목을 변경하고, 응용 프로그램의 스타일을 약간 조정할 것이다. (만약 흑백을 유지하고 싶다면, 이것을 건너뛸 수 있다😊).

<svelte:head>
  <title>Svelte Continent App</title>
</svelte:head>


<style>
  main {
    background-color: lavenderblush;
    font-size: 15px;
  }
  h1 {
    font-size: 25px;
  }
</style>

저장하면 응용 프로그램이 다시 불러옵니다. 이 화면을 볼 수 있습니다.

결론

본고에서 우리는 Svelte에서 백엔드 데이터를 어떻게 사용하고 나타내는지, 도구를 정의하고 내보내는지, 그리고 도구를 구성 요소에 전달하는지 연구했다.우리는 또 간략하게 http://localhost:5000 방법이 무엇인지 소개했다.
내장된 템플릿 시스템은 간단한 응용 프로그램을 구축하는 데도 큰 장점이 있다. 왜냐하면 이 기능은 우리가 통상적으로 React에서 필요로 하는 과도한 자바스크립트 조건의 수요를 없애기 때문이다.이 강좌를 읽고 나면 구성 요소를 작성하고 API에 사용되는 데이터-keep 인코딩을 사용하고 표현할 수 있을 거라고 믿습니다. 마찬가지로 본고에서 사용하는 코드here를 찾을 수 있습니다.

플러그인: 네트워크 어플리케이션용 DVR용 LogRocket

 

 
LogRocket는 프런트엔드 로그 기록 도구로 자신의 브라우저에서처럼 문제를 재생할 수 있다.LogRocket은 오류가 발생한 원인을 추측하거나 화면 캡처와 로그 저장을 물어보지 않고 세션을 다시 재생할 수 있도록 합니다.프레임워크가 어떻든지 간에 모든 응용 프로그램과 완벽하게 어울릴 수 있으며, 플러그인은 Redux, Vuex, @ngrx/store의 추가 상하문을 기록합니다.
 
LogRocket은 Redux 작업과 상태를 기록하는 것 외에도 콘솔 로그, JavaScript 오류, 스택 추적, 헤더+본문이 있는 네트워크 요청/응답, 브라우저 메타데이터와 사용자 정의 로그를 기록합니다.또한 DOM을 사용하여 페이지에 HTML과 CSS를 기록하여 가장 복잡한 단일 페이지 응용 프로그램이라도 픽셀 수준의 비디오를 재구성합니다.
 
Try it for free .
게시물Consuming REST APIs in Svelte이 먼저 LogRocket Blog에 올라왔다.