[Vue.js] SPA 튜토리얼 — Part2
Axios를 활용한 API 데이터 호출- Ratio, News
Step 1: Ratio
Part1에서 구현한 내용에 이어서 24시간 거래량 데이터를 추가해보도록 하겠습니다.
API 응답 데이터의 24시간 변동률(CHANGEPCT24HOUR) 데이터와 가격(PRICE) 데이터가 같은 노드에 위치해 있으므로, PRICE 구현 코드를 참고하여 코드를 추가합니다.
복잡한 JSON Path를 시각화하고 탐색하기위해 Finder를 이용하면 코드 작업이 조금 더 수월합니다.
Cryptocurrency.vue 주요 구문
// ① HTML 템플릿 구문
<tr>
<td>{{cryptoPrice.BTC}}</td>
<td>{{cryptoPrice.ETH}}</td>
<td>{{cryptoPrice.XRP}}</td>
</tr>
<tr>
<td>{{cryptoRatio.BTC}}</td>
<td>{{cryptoRatio.ETH}}</td>
<td>{{cryptoRatio.XRP}}</td>
</tr>// ② 데이터 객체
data() {
return {
cryptoPrice: {
BTC: 0,
ETH: 0,
XRP: 0
},
cryptoRatio: {
BTC: 0,
ETH: 0,
XRP: 0
}
}
},
// ③ Vue 인스턴스에 추가할 메소드
methods: {
// 암호 화폐 가격 정보 처리
bindData() {
axios
.get(API Request URL)
.then(res => {
const obj = Object.keys(this.cryptoPrice)
for (var i = 0; i < obj.length; i++) {
this.cryptoPrice[obj[i]] =
res.data.DISPLAY[obj[i]].KRW.PRICE
this.cryptoRatio[obj[i]] =
res.data.DISPLAY[obj[i]].KRW.CHANGEPCT24HOUR+' %'
}
})
.catch(e => {
console.log(e);
})
})
}
},
//컴포넌트, 템플릿, 렌더링된 돔에 접근할 수 있는 상태 (인스턴스 라이프사이클에 속함)
mounted() {
this.bindData()
},
①, ②, ③ 에 24시간 변동률을 구현하기 위한 코드를 추가했다면 다음과 같은 결과 화면을 확인할 수 있습니다.
Step 2: News
가격과 변동률 데이터 구현이 완료되었으니, 이번에는 뉴스 API 를 활용해서 최근 뉴스 데이터를 처리해보도록 하겠습니다.
Request URL : https://min-api.cryptocompare.com/data/v2/news/?lang=EN
뉴스 API는 API Key 없이도 요청 가능합니다.
JSON Path를 확인하면서 필요한 데이터 범위를 다음과 같이 정의합니다.
- 기사 제목 - title
- 기사 본문 - body
- 발행 일시- published_on
- 섬네일 이미지 - imageurl
다른 데이터는 사용자 화면에 바로 출력할 수 있지만 기사 발행 시간(published_on)은 정수형 Unix 시간으로 저장되어있어서 Date 형식으로 변환이 필요합니다.
Unix > Date 변환에는 moment 모듈을 사용해보겠습니다.
npm 명령으로 모듈을 설치하고 Cryptocurrency.vue에 import 선언을 추가합니다.
npm install moment --saveCryptocurrency.vue 주요 구문
import moment from 'moment'// HTML 템플릿 구문
<article>
<div class="h_area">
<h2>Recent News</h2>
</div>
<ul>
<li v-for="item in news" :key="item.id">
<a :href="item.url">
<div class="bx_thumb">
<img :src="item.imageurl" width="60" height="60" :alt="item.body">
</div>
<dl>
<dt>[{{item.published_on | moment}}] {{item.title}} </dt>
<dd>
<p>{{item.body}}</p>
</dd>
</dl>
</a>
</li>
</ul>
</article>
// 데이터 객체
data() {
return {
cryptoPrice: {
BTC: 0,
ETH: 0,
XRP: 0
},
cryptoRatio: {
BTC: 0,
ETH: 0,
XRP: 0
},
news: {}
}
},
// 데이터 포멧 제어
filters: {
// Moment date filter
moment: function (date) {
return moment.unix(date).format('YY/MM/DD HH:mm')
}
},
// Vue 인스턴스에 추가할 메소드
methods: {
// 암호 화폐 뉴스 정보 처리
bindNews() {
axios.
get('https://min-api.cryptocompare.com/data/v2/news/?lang=EN')
.then(res => {
this.news = res.data.Data
})
.catch(e => {
console.log(e);
})
}
},
//컴포넌트, 템플릿, 렌더링된 돔에 접근할 수 있는 상태 (인스턴스 라이프사이클에 속함)
mounted() {
this.bindNews()
},<style lang="scss">
a {
color: #333;
text-decoration: none;
}p {
color: #999;
}.bx_thumb {
width: 60px;
height: 60px;
margin-right: 10px;
}ul {
overflow: hidden;
list-style-type: none;
padding: 0;
text-align: left;
font-size: 12px;
}ul li {
display: block;
min-height: 90px;
margin: 0;
}ul a {
display: flex;
color: #42b983;
}dl {
margin: 0;
text-align: left;
}dt {
color: #0870b0;
font-weight: 700;
}dd {
margin: 0;
}
</style>
[데이터 흐름]
- 데이터 객체에 news 속성을 선언하고 초기화
- 초기화된 news 속성은 HTML 템플릿의 <li> 와 연결
- Unix 시간을 Date 형식으로 변경하기 위해 filters: {} 영역에 moment 구문 추가
- published_on 이 선언된 이중 괄호 {{ }} 영역에 {{item.published_on | moment}} 형식으로 필터 선언
- bindNews() 함수에서는 Axios 로 API에 GET 요청을 보내고 결과값이 있으면 then 구문을 수행, 오류가 발생되면 catch 구문에서 오류 출력
then 구문에서는 데이터 객체의 news 속성에 Ajax 요청 결과값 업데이트
v-for 구문에 의해서 기사 데이터의 개수만큼 <li> 반복 출력
Part 3에서는 더보기 버튼(More) 기능 구현에 대해 다뤄보도록 하겠습니다.
완성된 결과물은 http://fe.hivelab.co.kr/spa 페이지에서 확인할 수 있습니다.
[Vue.js] SPA 튜토리얼 — Part1
프로젝트 세팅, Axios를 활용한 API 데이터 호출 — Price
[▣] [Vue.js] SPA 튜토리얼 — Part2
Axios를 활용한 API 데이터 호출- Ratio, News
