[Vue] 로스트아크 오픈 API로 Vue 복습하기(1) - 우선 써보기

Vue를 배운지도 어언 한달이 지났다

평소에 좋아하는 로스트아크에 오픈 API가 있었던 것 같아서 공식문서를 참고해서 

일로아같은 사이트를 만드는게 프로젝트 목표!

 

 

우선 오늘은 간단하게 api로 정보 띄우는거만 해보기

---

첫번째로 공식문서에서 API키를 발급받아준다

로그인을 하고 GET ACCESS TO LOSTARK API를 누르면 나의 API 키를 확인할 수 있음

 

---

 

Vue 프로젝트를 생성해준다.

혹시 모르니까 Pinia랑 router 등등 다 넣어놨다..

 

기본적인 세팅을 완료한 후,

메인페이지를 위한 MainView.vue에

캐릭터를 검색하면 해당 캐릭터의 원정대에 있는 캐릭터를 다 가져오도록 해볼려고 한다.

 

<template>
    <div>
        <p>메인페이지</p>
        <input type="text" v-model="username">
        <button @click="search()">검색하기</button>
        <div v-if="isSearch">
            <div v-for="data in searchData" :key="data.CharacterName">
                {{ data }}
            </div>
        </div>
    </div>
</template>

 

검색과 결과를 보여주기 위해 v-model로 검색할 캐릭터 명을 저장하고,

검색하기를 누르면 axios 요청을 통해 검색할 수 있도록했다.

 

 

import axios from 'axios'
import {ref} from 'vue'

const username = ref('')	// 검색할 유저의 이름
const apiKey = '발급받은 API키'
const isSearch = ref(false)	// 검색이 진행되었는지를 판별하기 위해
const searchData = ref('')	// 검색 결과
const search = function () {
    axios({
        method: 'get',
        url: `https://developer-lostark.game.onstove.com/characters/${username.value}/siblings`,
        headers: {
            Authorization: `bearer ${apiKey}`,
        }      
    }). then((res) => {
        console.log(res)
        searchData.value = res.data	// 검색 결과를 저장
        isSearch.value = true	// 검색이 되었음을 저장
    }) .catch((err) => {console.log(err)})
}

 

공식문서를 보니까 authorization으로 apikey를 넣어야하는 것 같길래 해봤는데 바로되더라..

 

여튼 이런식으로 간단하게 오픈 api를 이용해서 데이터를 가져올 수 있음

---

서버에서 결과를 확인해보자

내 아이디를 검색하긴 부끄러우니까..

로머니 죠니니로 검색해보면

이런식으로 원정대 캐릭터를 다 조회할 수 있음

 

 

내일은 서버별로 정렬하고, 각각의 캐릭터를 누르면 상세페이지로 갈 수 있도록 해봐야겠다