Vue3 에서 카카오 Rest API 사용하기
자세한 설명은 향후에 추가하고 샘플코드로 설명드립니다
기본 구조
- 부모컴포넌트에서 검색어를 입력하면 KakaoGeocode 컴포넌트에서 결과를 조회하여 출력한다.
- KakaoGeocode Header 값 중 'KakaoAK 키값' 만 대체해서 사용하시면 됩니다.
부모 컴포넌트
<template>
<q-list>
<q-form>
<q-input v-model="keyword" />
<q-btn label="Submit" type="submit" color="primary" />
<q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
</q-form>
</q-list>
<q-list>
<KakaoGeocode :keyword="keyword" ref="searchComponent" />
</q-list>
</template>
<script>
import { useQuasar } from 'quasar'
import { ref, inject, provide } from 'vue'
import KakaoGeocode from '/@contents/KakaoGeocode.vue'
export default {
setup() {
const $q = useQuasar()
const searchComponent = ref(null)
const keyword = ref(null)
const isSearched = ref(false)
provide('isSearched', isSearched)
const searchComponent_call = (keyword) => {
searchComponent.value.searchResult(keyword)
}
return {
api,
keyword,
searchPanelOpen,
searchComponent,
isSearched,
onSubmit() {
searchComponent_call(keyword.value)
console.log(keyword.value)
},
onReset() {
keyword.value = null
isSearched.value = false
}
}
}, components: {
KakaoGeocode,
}
}
</script>자식 컴포넌트 KakaoGeocode
<script>
import { ref, inject } from 'vue'
import useAxios from '/@compositions/axios.js'
export default {
name: 'KakaoGeocode',
props: {
keyword: String,
},
setup(props,) {
const { axiosRestAPI } = useAxios()
console.log('start...axios')
const isSearched = inject('isSearched')
const columns = [
{ name: 'type', label: 'Type', field: 'type', sortable: true },
{
name: 'name',
required: true,
label: 'Name',
align: 'left',
field: row => row.name,
format: val => `${val}`,
sortable: true
},
{ name: 'address', align: 'left', label: 'Address', field: 'address', sortable: true },
{ name: 'category', align: 'left', label: 'Category', field: 'category', sortable: true },
{ name: 'place_name', align: 'left', label: 'Name', field: 'place_name', sortable: true },
{ name: 'place_url', align: 'left', label: 'Url', field: 'place_url', sortable: true },
{ name: 'road_address', align: 'left', label: 'Road Address', field: 'road_address', sortable: true },
{ name: 'province', align: 'center', label: 'Province', field: 'province', sortable: true },
{ name: 'city', label: 'City', field: 'city', sortable: true },
{ name: 'street', label: 'Street', field: 'street' },
{ name: 'latitude', label: 'Latitude(y)', field: 'latitude' },
{ name: 'longitude', label: 'Longitude(x)', field: 'longitude' },
]
const rows = ref([])
const searchResult = (keyword) => {
let addressUrl = 'https://dapi.kakao.com/v2/local/search/address.json'
let keywordUrl = 'https://dapi.kakao.com/v2/local/search/keyword.json'
let Method = 'get'
let addressHeader = {
'Authorization': 'KakaoAK **REST API 키 넣는 곳**',
//예시 'KakaoAK 12345690' <= KakaoAK뒤에 공백 한칸
}
let keywordHeader = {
'Authorization': 'KakaoAK **REST API 키 넣는 곳**'
}
let addressParams = {
'analyze_type': 'similar',
'page': 1,
'size': 30,
'query': keyword,
}
let keywordParams = {
'page': 1,
'query': keyword,
}
console.log('searchResult...call... ')
axiosRestAPI(Method, addressUrl, addressHeader, addressParams, onSuccessAddress, onFailed)
axiosRestAPI(Method, keywordUrl, keywordHeader, keywordParams, onSuccessKeyword, onFailed)
}
const onFailed = (result) => {
console.log(result)
message.value = result
}
let array = []
let addrArry = []
let keyArry = []
const onSuccessAddress = (result) => {
console.log('Address axiosRestAPI.... length : ' + result.documents.length)
if (result.documents.length > 0) {
result.documents.forEach((item) => {
let jsonData = {}
jsonData.name = item.address_name
jsonData.type = item.address_type
jsonData.province = item.address.region_1depth_name
jsonData.city = item.address.region_2depth_name
jsonData.street = item.address.region_3depth_name
jsonData.longitude = item.x
jsonData.latitude = item.y
addrArry.push(jsonData)
})
console.log(addrArry)
console.log(keyArry)
array = [...addrArry, ...keyArry]
isSearched.value = true
addrArry = []
console.log('Address axiosRestAPI.... array : ')
console.log(array)
rows.value = array
}
}
const onSuccessKeyword = (result) => {
console.log('Keyword axiosRestAPI.... length : ' + result.documents.length)
if (result.documents.length > 0) {
result.documents.forEach((item) => {
let jsonData = {}
jsonData.name = item.place_name
jsonData.type = 'KEYWORD'
jsonData.category = item.category_name
jsonData.place_name = item.place_name
jsonData.address = item.address_name
jsonData.place_url = item.place_url
jsonData.road_address = item.road_address_name
let addressArray = item.address_name.split(' ')
jsonData.province = addressArray[0]
jsonData.city = addressArray[1]
jsonData.street = addressArray[3]
jsonData.longitude = item.x
jsonData.latitude = item.y
keyArry.push(jsonData)
})
console.log(addrArry)
console.log(keyArry)
array = [...addrArry, ...keyArry]
keyArry = []
isSearched.value = true
console.log('Keyword axiosRestAPI.... array : ')
console.log(array)
rows.value = array
}
}
return {
isSearched,
searchResult,
onFailed,
onSuccessAddress,
onSuccessKeyword,
message,
filter: ref(''),
selected: ref([]),
columns,
rows
}
},
components: {
}
}
</script>axios 통신 코드
import { axios } from '@bundled-es-modules/axios'
import { ref } from 'vue'
export default function () {
const communicating = ref(false)
const BASE_URL = 'http://localhost:8000'
const createURL = (url) => {
return url.startsWith('http') ? url : BASE_URL + url
}
axios.defaults.headers.common = {
'Content-Type': 'application/json',
}
const checkResult = (resp, onSuccess, onFailed) => {
communicating.value = false
if (resp.status === 200 || resp.data.rsp === 'ok') {
if (onSuccess) {
//console.log('onSuccess')
onSuccess(resp.data)
}
} else {
if (onFailed) {
//console.log('onFailed')
onFailed(resp.data)
}
}
}
const axiosRestAPI = async (Method, Url, Headers, Params, onSuccess = null, onFailed = null) => {
communicating.value = true
if (Method.toLowerCase() == 'get') {
let getConfig = {
'params' :Params,
headers: Headers
}
axios.get(Url, getConfig ).then((resp) => {
checkResult(resp, onSuccess, onFailed)
})
} else if (Method.toLowerCase() == 'post') {
let postConfig = {
headers: Headers,
params: Data,
}
axios.post(createURL(Url), Data, postConfig).then((resp) => {
checkResult(resp, onSuccess, onFailed)
})
} else {
console.log('check...method.. ')
}
}
return {
communicating,
axiosRestAPI,
}
}
vue, spring boot