이전에 Java를 통해 API를 호출하는 방법을 공부한적이 있었다. 이번에는 js를 통해 호출을 해보았다.
API Key 받기
넥슨에서는 회원이라면 무료로 API Key를 발급해준다. 여러가지 API가이드가 포함되어있어
쉽게 접근할수 있었다. 또한 호출중 에러가 발생하면 에러내용에 대한 정리도 되어있어 쉽게 수정도 가능했다
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메이플 캐릭터 검색</title>
<script type="text/javaScript" src="js/api.js"></script>
<link rel="styleSheet" href="css/api.css">
</head>
<body>
<div id="container">
<div id="search">
<label for="input">캐릭터명 : </label>
<input id="input" type="text">
<button id="search">검색</button>
</div>
<div id="inner">
</div>
</div>
</body>
</html>Nexon API를 통해 MapleStory의 API를 받아 올수 있도록 간단하게 HTML를 작성하였다.
JS
선언부
const API_KEY = ""
const btn_search = document.querySelector("button#search");
const out = document.querySelector("div#inner");
let characterName;
let ocid;API_KEY부분은 직접 발급받은 KEY를 입력하였다. 간단하게 검색버튼과 결과가 보여질 태그에 함수를 선언하였다. 넥슨은 해당 케릭터의 정보를 검색할때 케릭터 이름이 아닌 고유번호인 OCID를 사용한다. 따라서 캐릭터명을 API를 통해 고유의 OCID값으로 변환해주어야 하며 받은 OCID값을 통해 각 원하는 정보를 호출해야 한다. Java에서는 캐릭터 이름을 URL에 입력할때 Encoder를 해주어야 했지만 JS는 그럴 필요가 없어 편리하였다.
Function
getOcid
async function getOcid(characterName, API_KEY) {
const urlString = `https://open.api.nexon.com/maplestory/v1/id?character_name=${characterName}`;
try {
const response = await fetch(urlString, {
headers: {
"x-nxopen-api-key": API_KEY
}
});
const data = await response.json();
return data.ocid;
} catch (error) {
console.error(error);
return undefined;
}
}API 서버에 값을 온전히 전달받기 위해 await를 사용하여만 했다. 처음에는 전환받은 값이 undefine이 계속 발생하여 이유를 찾아봤는데 전달받은속도보다 브라우저에서 코드 처리 속도가 더 빠르기때문에 Promise를 전달받을때까지 기다려야 한다는것을 알았다. await를 통해 fetch(호출)될때까지 대기하였고 await를 사용하려면 함수에 async를 같이 사용해야 했다. 이 과정을 통해 Json형식인 data를 ocid만 뽑아 return하였다.
getInfo
async function getInfo(ocid,API_KEY){
const urlString = `https://open.api.nexon.com/maplestory/v1/character/basic?ocid=${ocid}`;
try {
const response = await fetch(urlString, {
headers: {
"x-nxopen-api-key": API_KEY
}
});
const data = await response.json();
return data;
} catch (error) {
console.error(error);
return undefined;
}
}url만 달라질뿐 형식은 ocid와 동일하다.
넥슨은 각 캐릭터의 PK를 캐릭터명이아닌 넥슨이 부여한 ocid를 사용한다.
캐릭터검색 Event Function
btn_search.addEventListener("click", async () => {
characterName = document.querySelector("input#input").value;
ocid = await getOcid(characterName, API_KEY);
const info = await getInfo(ocid,API_KEY);
const html = wirteHTML(info);
out.innerHTML = html;
});사실 간단하다 위에 만들어진 함수에 알맞은 파라미터를 넣어 만든것 뿐이다.
wirteHTML
function wirteHTML(info){
let html = `<div id="img"> <img src = "${info.character_image}"></div>`;
html += `<span>직업 : ${info.character_class}</span><br>`;
html += `<span>레벨 : ${info.character_level} (${info.character_exp_rate}%)</span><br>`;
html += `<span>길드 : ${info.character_guild_name}</span><br>`;
html += `<span>월드 : ${info.world_name}</span>`;
return html;
}getInfo를 통해 받아온 info(Json)를 HTML로 변환하였다. 각 item 이름은 API 가이드를 참고하거나 브라우저 콘솔을 통해 확인할수 있다.
