[vue.js] axios 사용 및 data 처리 - 공공데이터 주가지수 가져오기

0. 목적

-. SPA의 기본이 되는 비동기 데이터 처리를 axios모듈을 이용해 구현한다.

1. axios 의존성(dependency) 설치

-. vue ui에서 axios를 선택해 설치한다.

-. '의존성' 탭에 axios 추가된 것을 확인할 수 있다.

2. axios 사용해보기

1) 준비

-. 우선 베이스가, 임의로 주식 값을 입력한 페이지를 준비했다. 링크

-. StockCard라는 각 오브젝트가 정의되어 있다.

-. 각 카드들의 데이터는 아래와 같이 정의된다.

{id: 1,
basDt: "20220118",
idxNm: "KRX 100",
idxCsf: "KRX시리즈",
epyItmsCnt: "101",
clpr: "5959.5",
vs: "-38.9",
fltRt: "-0.65",
mkp: "6020.74",
hipr: "6032.52",
lopr: "5939.65",
trqu: "85047817",
trPrc: "6473637105553",
lstgMrktTotAmt: "1679922704108410",
lsYrEdVsFltRg: "-248",
lsYrEdVsFltRt: "-4",
yrWRcrdHgst: "6227.25",
yrWRcrdHgstDt: "20220103",
yrWRcrdLwst: "5959.5",
yrWRcrdLwstDt: "20220118",
basPntm: "20010102",
basIdx: "1000"
}

-. 해당 데이터는 공공데이터포탈 지수정보에서 가져온 것이다.

2) axios 테스트

-. vue-cli에서 axios 사용은, 마치 파이썬에서 모듈 사용하듯이 import를 하듯이 아주 간단하다.

import axios from 'axios'

-. component가 생성 (create) 된 이후에 동작하도록, created() 부분에 코드를 넣어준다.

export default {
  name: 'StockList',
  components: {
    StockCard
  },
  data() {
    return {
      stocks: null

    }
  },
  mounted(){
  },
  created() { 
    axios.get(process.env.VUE_APP_URL_GONGGONG)
    .then(response => {
      console.log('stocks:', response.data)
    })
    .catch(error => {
      console.log(error)
    })
  }
}

-. 우선 크롬 개발자 창의 console에 출력하도록 했고 정상 출력되는 것을 확인했다.

 

3) 비동기 데이터 처리

-. 위 그림의 데이터를 잘 보면, response.data로 출력한 내에 다시 response -> body -> items ->item 순으로 키값이 정의된 json 파일이란 것을 알 수 있다. 그러니, 해당 데이터를 넘겨주도록 하자.

export default {
  name: 'StockList',
  components: {
    StockCard
  },
  data() {
    return {
      stocks: null

    }
  },
  mounted(){
  },
  created() { 
    axios.get(process.env.VUE_APP_URL_GONGGONG)
    .then(response => {
      console.log('stocks:', response.data);
      this.stocks = response.data.response.body.items.item;
    })
    .catch(error => {
      console.log(error)
    })
  }
}

-. 그럼 이제 각 지수들이 성공적으로 출력되는 것을 볼 수 있다.

-. 해당 코드를 깃헙에 올려둠. 링크