[vue.js] 동적 라우팅 - 공공데이터 지수 상세정보

0. 목적

-. vue의 동적 라우팅 (dynamic routing) 기능을 이용해, 개별 주식의 상세 페이지를 만들어본다.

-. 앞 포스팅에서 만든 주가지수 카드 목록에 각각 링크를 삽입하여 개별 지수의 상세 정보를 출력하는 페이지를 만든다.

1. 동적 라우팅 (Dynamic routing)

-. 동적 라우팅은 다양한 데이터 (여기서는 서버에서 보내주는 지수 목록)에 대해 능동적으로 상세 uri를 만들어 줄 수 있게 한다. 구글 검색하면 아래와 같이 개념도를 볼 수 있다.

2. 실습

-. vue 에서도 당연히 동적 라우팅을 구현할 수 있는데, 우선은 개별 지수에 대한 정보 페이지를 꾸려보자.

1) 우선은 정적 라우팅 연습

-. 개별 지수 페이지는 'StockDetail.vue'파일에 만들었다.

<template>
  <div>
    <h4>{{ stockDetail.idxNm }} ({{ stockDetail.basIdx }})</h4>
    <h5>{{ stockDetail.basDt }}</h5>
    <h4>{{ stockDetail.clpr }} ({{ stockDetail.vs }}, {{ stockDetail.fltRt}}%) </h4>
  </div>
</template>

<script>
import StockService from '@/services/StockService.js'


export default ({
    data() {
        return {
            stockDetail: null,
            params: {
                idxNm: 'IT H/W',
            }
        }
    },
    created() {
        StockService.getMarketIndex(this.params)
        .then(response => {
            this.stockDetail = response.data.response.body.items.item[0];
        })
        .catch(error => {
        console.log(error)
        })
    }
})
</script>

-. IT H/W 지수에 대해 우선 예시로 만들었고, 개별 지수 대상 (idxNm 지정) 공공API 조회를 해보니 최근 일주일 간의 지수 추이가 나오길래, 우선은 간단하게 표기할 목적으로  stockDetail에 전달해 주는 것은 item[0]으로 제약을 걸었다. 출력 결과는 아래 그림과 같다.

-. 해당 페이지의 주소는 마찬가지로 하드코딩 하여 router/index.js에 넣어놨고, 앞 포스팅에서 만든 주가지수 카듯 ㅏㅇ단에 해당 주소로의 router-link를 추가하여 카드를 클릭하면 해당 페이지로 이동하게 설정해 놨다. (특수문자가 있어서 좀 거지같다)

router/index.js
  {
    path: '/stock/IT%20H%2FW',
    name: 'StockDetail',
    component: StockDetail
  },

StockCard.vue의 router-link
<router-link to="/stock/IT%20H%2FW">

-. 카드 자체에 하드코딩을 했기에 지수 목록 페이지에서는 모든 카드에 링크가 설정된 것을 볼 수 있다. 누르면 잘 이동한다.

 

2) 동적 라우팅으로 다양한 지수에 대해 대응

-. 정적 라우팅을 구성해두면, 동적 라우팅으로 바꾸는건 일도 아니다.

router/index.js
  {
    path: '/stock/IT%20H%2FW', -->     path: '/stock/:idxNm',
    name: 'StockDetail',
    component: StockDetail
  },

StockCard.vue의 router-link
<router-link to="/stock/IT%20H%2FW"> -->     <router-link :to="{ name:'StockDetail', params: {'idxNm': stock.idxNm} }">

-.  하드코딩 되었던 path와 router를 바꿔주면 바로 적용이 된다. (그 사이에 잡다한 삽질이 있는데, 이건 다음 포스팅에서..)

-. 하지만 여전히, 개별 지수 페이지는 IT H/W가 뜬다. 이제 이 부분을 수정해야겠다.

3) 동적 라우팅에서 변수 전달

-. 우선, 앞에서 다룬 property 전달을 통해 새 페이지 생성 시 vue가 스스로 어떤 페이지인지 알 수 있게 구성한다.

  {
    path: '/stock/:idxNm',
    name: 'StockDetail',
    props: true,  <-- 추가
    component: StockDetail
  },

-. 그리고 StockDetail.vue의 스크립트 영역에 props에 idxNm을 정의 내려주자.

export default ({
    // add props for dynamic routing
    props: ['idxNm'],
    data() {
        return {
            stockDetail: null,
            params: {
                'idxNm': this.idxNm,
            }
        }
    },
    created() {
        StockService.getMarketIndex(this.params)
        .then(response => {
            this.stockDetail = response.data.response.body.items.item[0];
        })
        .catch(error => {
        console.log(error)
        })
    }
})

-. 위 코드는, 각 페이지에서 idxNm이 하드코딩 된 것이 아니라, 동적으로 받아올 수 있도록 개선한 것이다. 실행 결과, 의도한 대로 각 지수에 대한 정보가 표기된다.

3. 마무리

-. 아직 한가지 문제가 있다. 동적 로딩으로 바꿨더니 콘솔 페이지에 에러가 뜬다.

-. 기존 카드 템플릿을 그대로 가져왔더니 없는 변수를 로딩하려고 삽질하면서 에러가 뜨는 현상이다. v-if로, 데이터가 있을 때에만 출력되게 하자.

-. 여기까지 작업한 깃헙 링크