Nuxt.js의 axios-module에서 GitHub Trending 데이터보기

소개

조금 Nuxt.js를 터치하기 시작합니다. 이번에는 시험에 API로 취득한 데이터를 화면에 표시한다는 것을 시도해 보았습니다.

환경 전제

Vue 3.1.3

Nuxt.js 2.3.4

node 9.11.2

Max OS X 10.13.6

Yarn 1.9.4

tl;dr

nuxt community가 제공하는 axios-module 소개

asyncData 메서드를 사용하여 서버 측 렌더링

확인 절차

초기 애플리케이션 준비

다음 명령을 사용하여 Nuxt.js 응용 프로그램의 편지지를 만듭니다.

$ yarn create nuxt-app github-trending-sample

몇 가지 프롬프트에서 질문이 있지만 Choose a package manager 만 yarn로 설정하고 나머지는 기본값을 선택하여 만듭니다.

완료되면 로컬 서버를 시작하고 http://localhost:3000/에 액세스할 수 있는지 확인합니다.

$ yarn dev

axios-module 설치 및 설정

Nuxt.js 애플리케이션에서 API에 요청할 수 있도록 axios-module을 설치하십시오.

설치 절차는 axios-module 설명서를 참조하십시오.

$ yarn add @nuxtjs/axios

설치가 완료되면 nuxt.config.js 에 axios-module 를 사용하는 설정을 추가합니다.

nuxt.config.js

module.exports = {
  //中略
  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
  },
  //中略
}

GitHub Trending 데이터 보기

pages/github_trending.vue 에 다음과 같은 코드를 구현합니다.

pages/github_trending.vue

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <h3><a :href="item.url" target="_blank">{{item.name}}</a></h3>
        <span>Stars:{{item.stars}}</span>
        <p>{{item.description}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ app }) {
    const items = await app.$axios.$get('https://github-trending-api.now.sh/repositories?language=javascript&since=weekly');
    console.log(await items);
    return { items };
  }
}
</script>

http://localhost:3000/github_trending 에 액세스하면, 결과는 다음과 같은 형태가 됩니다.

GitHub Trending 데이터 검색 소스

GitHub Trending의 데이터이지만, JSON 형식의 응답을 반환해 주는 github-trending-api 라는 멋진 프로젝트를 발견했으므로, 그쪽을 이용하고 있습니다.

다음과 같은 URL에서 GET 요청을 던지면 다음과 같은 JSON 응답을 반환합니다.

 {
    "username": "vuejs",
    "name": "vuejs",
    "url": "https://github.com/vuejs",
    "avatar": "https://avatars0.githubusercontent.com/u/6128107",
    "repo": {
      "name": "vue",
      "description": "🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.",
      "url": "https://github.com/vuejs/vue"
    }
  },
  {
    "username": "agalwood",
    "name": "Dr_rOot",
    "url": "https://github.com/agalwood",
    "avatar": "https://avatars3.githubusercontent.com/u/1032175",
    "repo": {
      "name": "Motrix",
      "description": "A full-featured download manager.",
      "url": "https://github.com/agalwood/Motrix"
    }
  },

asyncData 메서드로 데이터 검색

GitHub Trading 데이터 검색을 위한 API 요청을 asyncData 함수 내에서 실행 중입니다.

asyncData 메서드는 페이지 구성 요소가 호출되기 전에 실행됩니다. 또 서버측에서 데이터를 취득, 렌더링까지 하고 싶은 경우에 이용할 수 있습니다.

그리고 await app.$axios.$get 의 처리에 의해, axios-module 를 사용한 API 리퀘스트를 실행해, 결과를 items 변수에 격납하고 있습니다. await 를 작성하여 API 요청을 받을 때까지 기다리십시오.
console.log 는 디버깅을 위해 JSON 키의 값을 확인하기 위해 포함되어 있습니다. 확인이 완료되면 삭제해 OK입니다.

데이터 표시

마지막으로 <template> 내에서 취득한 데이터를 표시하고 있습니다. v-for 에서 items 마다 루프하고 있거나, 키의 값을 그대로 표시하면, 특히 어려운 일은 하지 않습니다.

결론

시도에 Nuxt.js에서 API의 데이터 표시를 확인해 보았지만 꽤 쉽게 구현할 수 있다는 인상이있었습니다.

아직 최소한의 것 밖에 시도하고 있지 않기 때문에, 여기로부터 여러가지 것을 시험해 가고 싶습니다.

참고

Nuxt.js 문서