Vue.js 및 Axios를 사용하여 API에서 데이터를 표시하는 방법

소개

Vue.js는 사용자 인터페이스 구축을 위한 프런트 엔드 JavaScript 프레임워크입니다. 처음부터 점진적으로 채택할 수 있도록 설계되었으며 다른 라이브러리 또는 기존 프로젝트와 잘 통합됩니다. 이 접근 방식은 다른 도구 및 라이브러리와 함께 사용할 때 소규모 프로젝트는 물론 정교한 단일 페이지 애플리케이션에 적합합니다.

API 또는 응용 프로그램 프로그래밍 인터페이스는 두 개의 응용 프로그램이 서로 통신할 수 있도록 하는 소프트웨어 중개자입니다. API는 종종 다른 개발자가 데이터베이스나 프로그래밍 언어의 차이에 대해 걱정하지 않고 자신의 앱에서 사용할 수 있는 데이터를 노출합니다. 개발자는 프런트 엔드 애플리케이션에 통합하는 JSON 형식으로 데이터를 반환하는 API에서 데이터를 자주 가져옵니다. Vue.js는 이러한 종류의 API를 사용하는 데 매우 적합합니다.

이 튜토리얼에서는 Foundation CSS 프레임워크를 사용하는 Vue 애플리케이션을 생성합니다.

참고: Cryptocompare API는 비상업적 용도로만 라이선스가 부여됩니다. 상용 프로젝트에서 사용하려면 라이센스 조건을 참조하십시오.

전제 조건

이 튜토리얼을 시작하기 전에 다음이 필요합니다.

Sublime Text와 같은 JavaScript 구문 강조를 지원하는 텍스트 편집기입니다. 이러한 편집기는 Windows, macOS 및 Linux에서 사용할 수 있습니다.
HTML과 JavaScript를 함께 사용하는 데 익숙합니다. HTML에 자바스크립트를 추가하는 방법에서 자세히 알아보세요.
자세한 내용은 JavaScript에서 JSON으로 작업하는 방법에서 배울 수 있는 JSON 데이터 형식에 익숙합니다.
API에 요청하는 데 익숙합니다. API 작업에 대한 포괄적인 자습서는 Python3에서 웹 API를 사용하는 방법을 살펴보십시오. Python용으로 작성되었지만 여전히 API 작업의 핵심 개념을 이해하는 데 도움이 됩니다.

1단계 — 기본 Vue 애플리케이션 생성

이 단계에서는 기본 Vue 애플리케이션을 만듭니다. 최종적으로 API의 라이브 데이터로 대체할 목업 데이터로 단일 HTML 페이지를 구축할 것입니다. 이 가상 데이터를 표시하기 위해 Vue.js를 사용할 것입니다. 이 첫 번째 단계에서는 모든 코드를 단일 파일에 보관합니다.

텍스트 편집기를 사용하여 index.html이라는 새 파일을 만듭니다.

이 파일에서 HTML 스켈레톤을 정의하고 CDN(Content Delivery Network)에서 Foundation CSS 프레임워크 및 Vue.js 라이브러리를 가져오는 다음 HTML 마크업을 추가합니다. CDN을 사용하면 앱 빌드를 시작하기 위해 다운로드해야 하는 추가 코드가 없습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
  <meta charset="utf-8">
  <title>Cryptocurrency Pricing Application</title>
</head>

  <body>
    <div class="container" id="app">
      <h3 class="text-center">Cryptocurrency Pricing</h3>
      <div class="columns medium-4" >
        <div class="card">
          <div class="card-section">
            <p> BTC in USD  </p>
          </div>
          <div class="card-divider">
            <p>{{ BTCinUSD }}</p>
          </div>
        </div>
      </div>
    </div>

    <script src="https://unpkg.com/vue@3"></script>
  </body>
</html>

{{ BTCinUSD }} 줄은 Vue.js가 제공할 데이터에 대한 자리 표시자입니다. Vue는 이를 통해 UI에서 데이터를 선언적으로 렌더링할 수 있습니다. 해당 데이터를 정의해 보겠습니다.

Vue의 <script> 태그 바로 아래에 이 코드를 추가하여 새 Vue 애플리케이션을 만들고 페이지에 표시할 데이터 구조를 정의합니다.

...
   <script> 
        const { createApp } = Vue
        
        createApp({    
          data() {
            return {
              BTCinUSD: 3759.91
            }
          }  
        }).mount('#app')
    </script>
...

이 코드는 새 Vue 앱 인스턴스를 만들고 id가 app인 요소에 인스턴스를 연결합니다. Vue는 이 프로세스를 애플리케이션 마운팅이라고 합니다. 새로운 Vue 인스턴스를 정의하고 구성 객체를 전달하여 구성합니다.

이 예에서 데이터 모델에는 비트코인 가격에 대한 모의 값을 보유하는 단일 키-값 쌍이 포함되어 있습니다: { BTCinUSD: 3759.91}. 이 데이터는 다음과 같이 이중 중괄호로 키를 묶은 HTML 페이지 또는 보기에 표시됩니다.

<div class="card-divider">
  <p>{{ BTCinUSD }}</p>
</div>

우리는 결국 이 하드 코딩된 값을 API의 라이브 데이터로 대체할 것입니다.

브라우저에서 이 파일을 엽니다. 모의 데이터를 표시하는 화면에 다음 출력이 표시됩니다.

미국 달러로 가격을 표시하고 있습니다. 유로와 같은 추가 통화로 표시하기 위해 데이터 모델에 다른 키-값 쌍을 추가하고 마크업에 다른 열을 추가합니다. 먼저 유로 라인을 데이터 모델에 추가합니다.

  <script> 
        const { createApp } = Vue
        
        createApp({    
          data() {
            return { 
              BTCinUSD: 3759.91, 
              BTCinEURO: 3166.21
            }
          }  
        }).mount('#app')
    </script>

그런 다음 기존

섹션을 다음 줄로 바꿉니다.

  <div class="container" id="app">
      <h3 class="text-center">Cryptocurrency Pricing</h3>
      <div class="columns medium-4" >
        <div class="card">
          <div class="card-section">
            <p> BTC in USD  </p>
          </div>
          <div class="card-divider">
            <p>{{ BTCinUSD }}</p>
          </div>
        </div>
      </div>
      <div class="columns medium-4" >
        <div class="card">
          <div class="card-section">
            <p> BTC in EURO  </p>
          </div>
          <div class="card-divider">
            <p>{{ BTCinEURO }}</p>
          </div>
        </div>
      </div>
    </div>

이제 파일을 저장하고 브라우저에서 다시 로드합니다. 이제 이 앱은 비트코인 가격을 유로와 미국 달러로 표시합니다.

이 단계에서는 몇 가지 샘플 데이터로 Vue 앱을 생성하여 로드되었는지 확인했습니다. 지금까지 단일 파일에서 모든 작업을 수행했으므로 이제 유지 관리를 개선하기 위해 개별 파일로 분할합니다.

2단계 — 명확성을 위해 JavaScript와 HTML 분리

작동 방식을 알아보기 위해 모든 코드를 단일 파일에 배치했습니다. 이 단계에서는 애플리케이션 코드를 index.html 및 vueApp.js라는 두 개의 개별 파일로 분리합니다. index.html 파일은 마크업을 처리하고 JavaScript 파일은 애플리케이션 로직을 포함합니다. 두 파일을 같은 디렉토리에 보관합니다.

먼저 index.html 파일을 수정하고 JavaScript 코드를 제거하여 vueApp.js 파일에 대한 링크로 바꿉니다.

파일의 이 섹션을 찾습니다.

...
    <script src="https://unpkg.com/vue@3"></script>
    <script> 
        const { createApp } = Vue
        
        createApp({    
          data() {
            return {
              BTCinUSD: 3759.91,
              BTCinEURO: 3166.21
            }
          }             
        }).mount('#app')
    </script>
...

그리고 다음과 같이 수정합니다.

...
    <script src="https://unpkg.com/vue@3"></script>
    <script src="vueApp.js"></script>
...

그런 다음 index.html 파일과 동일한 디렉토리에 vueApp.js 파일을 만듭니다.

이 새 파일에서 원래 <script> 태그 없이 index.html 파일에 있던 것과 동일한 JavaScript 코드를 배치합니다.

 const { createApp } = Vue
        
createApp({    
  data() {
    return {
      BTCinUSD: 3759.91,
      BTCinEURO: 3166.21
    }
  }  
}).mount('#app')

파일을 저장하고 브라우저에서 index.html을 다시 로드합니다. 이전에 본 것과 동일한 결과가 표시됩니다.

여기서 마크업에서 앱을 분리했습니다. 다음으로 비트코인보다 더 많은 암호화폐를 지원하기 위해 더 많은 데이터를 추가합니다.

3단계 — Vue를 사용하여 데이터 반복

이 단계에서는 데이터를 재구성하고 보기를 수정하여 비트코인과 이더리움의 가격을 모두 표시합니다.

vueApp.js 파일을 열고 데이터 모델의 return 부분을 다음과 같이 수정합니다.

const { createApp } = Vue
      
createApp({
  data() {
    return { 
        results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}}
    }
  }
}).mount('#app')

우리의 데이터 모델은 중첩된 데이터 구조로 조금 더 복잡해졌습니다. 이제 두 개의 레코드가 포함된 results라는 키가 있습니다. 하나는 비트코인 가격이고 다른 하나는 이더리움 가격입니다. 이 새로운 구조를 통해 우리의 관점에서 일부 중복을 줄일 수 있습니다. 또한 Cryptocompare API에서 얻을 데이터와 유사합니다.

파일을 저장합니다.

이제 보다 프로그래밍 방식으로 데이터를 처리하도록 마크업을 수정해 보겠습니다.

index.html 파일을 열고 비트코인 가격을 표시하는 파일 섹션을 찾습니다.

...
    <div class="columns medium-4" >
      <div class="card">
        <div class="card-section">
          <p> BTC in USD  </p>
        </div>
        <div class="card-divider">
          {{BTCinUSD}}
        </div>
      </div>
    </div>

    <div class="columns medium-4" >
      <div class="card">
        <div class="card-section">
          <p> BTC in EURO  </p>
        </div>
        <div class="card-divider">
          {{BTCinEURO}}
        </div>
      </div>
    </div>

  </div>
...

정의한 데이터 세트를 반복하는 이 코드로 바꿉니다.

...
  <div class="columns medium-4" v-for="(result, index) in results">
    <div class="card">
      <div class="card-section">
        <p> {{ index }} </p>
      </div>
      <div class="card-divider">
        <p>$ {{ result.USD }}</p>
      </div>
      <div class="card-section">
        <p> &#8364 {{ result.EUR }}</p>
      </div>
    </div>
  </div>
...

이 코드는 for-loop처럼 작동하는 v-for 지시문을 사용합니다. 데이터 모델의 모든 키-값 쌍을 반복하고 각각의 데이터를 표시합니다.

브라우저를 다시 로드하면 모의 가격이 표시됩니다.

이 수정을 통해 vueApp.js의 results 데이터에 새 통화를 추가하고 추가 변경 없이 페이지에 표시할 수 있습니다.

강조 표시된 정보가 있는 데이터 세트에 또 다른 모의 항목을 추가하여 시도해 보십시오.

const { createApp } = Vue
      
createApp({
  data() {
    return {
        results: {"BTC": {"USD":3759.91,"EUR":3166.21}, 
        "ETH": {"USD":281.7,"EUR":236.25},
        "NEW Currency":{"USD":5.60,"EUR":4.70}}
    }
  }
}).mount('#app')

Ethereum 항목 뒤에 후행 쉼표를 포함합니다. 파일을 저장합니다.

이제 웹 브라우저에서 페이지를 로드하면 새 항목이 표시되는 것을 볼 수 있습니다.

프로그래밍 방식으로 데이터를 처리하고 나면 마크업에 새 열을 수동으로 추가할 필요가 없습니다.

여기서 샘플 데이터를 사용하여 여러 통화에 대한 가격을 확인했습니다. 이제 Cryptocompare API를 사용하여 실제 데이터를 가져옵니다.

4단계 - API에서 데이터 가져오기

이 단계에서는 모의 데이터를 Cryptocompare API의 라이브 데이터로 대체하여 웹 페이지에 비트코인과 이더리움의 가격을 미국 달러와 유로로 표시합니다.

페이지에 대한 데이터를 가져오기 위해 https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR에 요청합니다. 미국 달러와 유로로 표시된 비트코인과 이더리움.

터미널 세션에서 응답을 보려면 curl을 사용하여 API에 요청하십시오.

curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'

다음과 같은 출력이 표시됩니다.

Output{"BTC":{"USD":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}

이 결과는 이전 단계에서 사용한 하드 코딩된 데이터 모델과 유사하지만 비트코인 및 이더리움의 현재 값을 사용합니다. 이제 해야 할 일은 앱에서 이 URL에 대한 요청을 만들어 데이터를 전환하는 것입니다.

요청을 하기 위해 Axios 라이브러리의 GET 함수와 함께 Vue의 mounted() 함수를 사용하여 데이터를 가져와서 <results 데이터 모델의 배열. Vue 앱이 요소에 마운트되면 mounted 함수가 호출됩니다. Vue 앱이 마운트되면 API에 요청하고 결과를 저장합니다. 웹 페이지에 변경 사항이 통보되고 해당 값이 페이지에 표시됩니다.

먼저 index.html을 열고 Vue를 포함한 줄 아래에 스크립트를 추가하여 Axios 라이브러리를 로드합니다.

...
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="vueApp.js"></script>
...

파일을 저장한 다음 vueApp.js를 엽니다.

vueApp.js를 수정 및 업데이트하여 API에 요청하고 데이터 모델을 결과로 채웁니다.

const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";
const { createApp } = Vue
      
createApp({    
  data() {
    return {
        results:[]
    }
},
    mounted() {
        axios.get(url).then(response => {
            this.results = response.data
        })
  }
}).mount('#app')

results의 기본값을 제거하고 빈 배열로 대체했습니다. 앱이 처음 로드될 때 데이터가 없지만 HTML 보기는 로드될 때 일부 데이터가 반복될 것으로 예상합니다.

axios.get 함수는 Promise를 사용합니다. API가 데이터를 성공적으로 반환하면 then 블록 내의 코드가 실행되고 데이터가 results 변수에 저장됩니다.

파일을 저장하고 웹 브라우저에서 index.html 페이지를 다시 로드합니다. 이번에는 암호화폐의 현재 가격이 표시됩니다.

아무 것도 표시되지 않으면 JavaScript 개발자 콘솔을 사용하는 방법을 검토하고 JavaScript 콘솔을 사용하여 코드를 디버깅할 수 있습니다. API의 데이터로 페이지를 새로고침하는 데 1분 정도 걸릴 수 있습니다.

이 저장소를 볼 수도 있습니다.

이 단계에서는 검토를 위해 실시간 데이터를 호출하도록 앱을 수정했습니다.

결론

50줄 미만으로 Vue.js, Axios 및 Cryptocompare API의 세 가지 도구만 사용하여 API를 사용하는 애플리케이션을 만들었습니다. 페이지에 데이터를 표시하고, 결과를 반복하고, 정적 데이터를 API의 결과로 바꾸는 방법을 배웠습니다.

이제 기본 사항을 이해했으므로 응용 프로그램에 다른 기능을 추가할 수 있습니다. 이 응용 프로그램을 수정하여 추가 통화를 표시하거나 이 자습서에서 배운 기술을 사용하여 다른 API를 사용하는 다른 웹 응용 프로그램을 만듭니다.