오늘의 삽질(Nintendo Switch 북미 할인중인 타이틀 확인)

@Markdown

>일본 eShop의 API는 파악을 못했지만, 북미 API는 검색 페이지를 참조하니 쉽게 파악할 수 있었다. 아무래도 국가별로 홈페이지 구조가 조금씩 달라서, 국가별로 세일중인 데이터를 수집하려면 크롤링을 하는게 나을 듯 했다. 아직 서버비용을 댈 돈이 없으니 이건 패스.

front-end단에서 api 호출시 CORS 이슈가 발생할 줄 알았는데, 닌텐도의 북미 홈페이지에서는 발생하지 않았다. node.js로 진행하고 있던 서버쪽 작업은 멈추고, Vue.js를 이용해서 레이아웃을 작성했다.

template
<template>
  <div class="hello">
    <b-card-group deck v-for="idx in (games_usa.game.length/4)" :key="idx" style="max-width:1024px">
      <b-card class="mb-2"
              v-link="'https://www.nintendo.com/games/detail/'+game.id"
              v-for="(game, index) in games_usa.game"
              v-if="((idx-1)*4)<=index && index<((idx-1)*4)+4"
              :key="game['.key']" :index="index">
        <div>
          <b-card-img :src="game.front_box_art" top fluid></b-card-img>
        </div>
        <a :href="'https://www.nintendo.com/games/detail/'+game.id">
          <div>{{game.title}}</div>
        </a>
          <div>Release: {{game.release_date_display || game.release_date}}</div>
          <div v-if="game.ca_price && game.ca_price>game.eshop_price" :class="{onSale: game.ca_price>game.eshop_price}">${{game.ca_price}}</div>
          <div v-if="game.eshop_price">${{game.eshop_price}}</div>
          <b-card-footer>
            {{game.categories.category.toString()}}
          </b-card-footer>
      </b-card>
    </b-card-group>
  </div>
</template>

>bootstrap을 적용해놓은 상태다. vuetify나 bootstrap이나 안익숙한건 도찐개찐이지만, 그나마 bootstrap으로 가로정렬을 해본 적 있기에 bootstrap을 선택했다. vuetify가 더 이뻐서 아쉽긴하다.

v-for의 range를 사용하여 games_usa.game의 길이를 4로 나눈 값만큼 루프를 돈다. 열당 4개의 카드를 배치하기 위함이다. 약자를 쓰는게 내키지는 않았지만, 각 열의 번호는 idx가 된다.

내부에서 b-card를 v-for로 배치하는데, (열 번호-1)*4를 하면 시작번호가 된다. (열 번호-1)*4+4를 하면 열의 마지막 번호+1이 된다.

https://www.nintendo.com/games/detail/ 뒤에 게임의 id를 붙이면, 해당 게임의 상세 페이지로 이동한다. 앵커를 이용해서 링크가 걸리도록 적용했다.

script
<script>
export default {
  name: 'HelloWorld',
  created () {
    this.axios.get('https://www.nintendo.com/json/content/get/filter/game?limit=40&offset=0&system=switch&sort=featured&direction=des&sale=true')
      .then((response) => {
        this.games_usa = response.data.games
      })
  },
  data () {
    return {
      games_usa: {}
    }
  }
}
</script>

>귀찮은 관계로 HelloWorld를 그대로 사용했더니, name값이...

axios를 이용해서 미국 아마존에서 사용하는 API를 호출했다. 응답은 json형태로 반환되며, 열어보면 적용된 필터의 정보와 걸러진 게임이 들어있다. 호출한 API는 세일중인 게임을 40개만 가져오는 API이다.

일단은 40개를 가져와서 뿌려주도록 작성해봤다. 페이지네이션을 추가하고 다른 국가의 데이터도 긁을 수 있는지 확인하고 진행여부를 결정해야 할 듯 하다.