잡지식창고

캐릭터 정보를 입력해 서버에 요청을 보내는 index페이지이다.

form으로 캐릭터 정보를 입력하는 페이지를 만들었다.

$(#characterData).serialize는 input의 name과 value를 묶어주는 jQuery 함수이다.

"characterName=젤리곰전사&server=azshara&level=10" 이런식으로 string형태로 묶인다.

이후 res.render함수를 실행해주면 페이지가 출력된다.

캐릭터의 프로필, 던전 진척도, 캐릭터 썸네일 이미지, 장비 데이터와 이미지 등을 불러올것이다.

해당 데이터를 request하는 함수를 작성한 후, waterfall로 정리를 해줄것이다.

post를 보낼때 기본 형태가 app.post('/', function (req, res) { res.send('POST request to the homepage') })이고, 두번째 인자로 들어가는 함수의 req에 클라이언트 페이지에서 요청할때 보낸 파라미터가 포함되어있다.(이 경우에는 캐릭터 이름, 서버, 레벨)

checkTimeStamp는 이미 검색한적 있는 캐릭터일 경우, 일정 시간이 지났을때만 다시 검색하게 하는 함수이다.

밀리초를 가지고 계산하기때문에 헷갈리기 쉬운데, day 변수에 할당된것처럼 원하는 시간의 계산식을 사용하는것이 편하다.

해당 함수에서는 검색한지 하루가 지나야 새로 검색하도록 설정했다.

getProfile부터 아래의 함수들은 이전 포스팅에서 만들었던 함수들을 수정한것이다.

이전 클라이언트에서 작성한 함수들은 axios를 이용한 통신이었지만, 이번에는 request를 이용한다.

통신에 이용되는 파라미터는 request의 첫번째 인자에 넣는다. 두번째 인자 함수의 body에 내가 요청한 데이터가 등록되어있다. 기본적으로 문자열로 되어있으므로 JSON.parse()를 이용해 json객체로 변환해준다.

나머지 함수들은 이전 포스팅에서 통신 부분만 수정한 형태이기 때문에 생략한다.

마지막으로 waterfall의 result를 DB에 저장하고, res.send()를 보내주면 끝이다.

DB는 아직 깊게 공부한적이 없어서 simle-json-db를 활용해 파일에 저장했다.

https://www.npmjs.com/package/simple-json-db

앞서 작성한 서버 초기화 글에서 일부 다루었듯이, 서버와 통신한 결과물을 파일 DB에 저장해두었다.

클라이언트에게 요청을 받기 전 미리 필요한 DB파일들을 생성해두었다.

DB는 서버를 초기화 세팅하는 과정에 함께 생성했다.

simple-json-db에서 제공하는 기본 메소드 set(), get(), JSON()등을 활용해 db를 생성하고 데이터를 입력했다.

db API를 구성하면서 자주 했던 실수 중 하나는 함수를 export 했을 경우에 발생했다.

getDB()함수처럼 return값이 있는 함수를 export해줄때, 해당 함수를 한번 더 return해주어야하는점이다.

생각해보면 당연한 논리지만 나도 모르게 자주 하고 찾기도 힘든 실수였으니 기억해두어야겠다.

이번에는 서버가 클라이언트에게서 받은 파라미터를 검증하는 미들웨어를 구성할것이다.

파라미터는 캐릭터명, 서버명, 레벨 세 가지다. 

검증을 거치는 이유는 에러 발생을 줄이고, 이는 서버 자원을 효율적으로 사용할 수 있게 한다.

(보안 이슈도 있지만, 해당 코드에는 작성하지 않았다.)

아래 코드는 각 파라미터를 검증하는 코드들이다.

캐릭터 레벨은 1~60의 양의 정수이기때문에 이외의 입력값들은 모두 배제해야한다.

특히 자바스크립트에서 숫자 검증은 복잡한면이 있다.

기본적으로 입력된 캐릭터 레벨은 string형태로 전달된다.

우선 입력값이 숫자인지 체크(isNAN())하고, string에서 number로 변환한 후(Number()), 해당 숫자가 정수인지 체크한다(isInteger()).

마지막으로 그 숫자가 1~60사이의 숫자인지 체크하면 된다.

캐릭터 이름은 string형태인것을 확인한다.

해당 서버명이 현재 DB에 등록된 서버 리스트에 있는 서버인지 확인한다.

각 데이터의 타입을 매칭해주는 코드이다. 

메인 페이지와 로그인 페이지는 검증 과정을 거칠 필요가 없으므로 다음 과정으로 패스하는 코드를 넣었다.(requestBodyCheck.js, 11번 라인)

이후 datakey에 있는 파라미터들을 순차적으로 검사 후 문제가 있으면 error메세지를 보내고 없으면 next()를 실행한다.

블리자드 api를 이용하는 백엔드를 구성해보았다.

api 서버는 node.js 의 express 프레임워크를 이용했고, db 부분은 json file db 를 이용해 구성했다.

클라이언트에서 api 호출이 이루어졌을 때 클라이언트로부터 받아온 데이터를 검증하는 미들웨어를 만들었다.

클라이언트에서 호출을 받기 전, 서버를 초기화한다. 

우선 블리자드 api 서버에 토큰을 요청하고, 현재 존재하는 서버 리스트, 이미지 파일 등을 요청한다.

여러 파일에서 공통적으로 자주 사용되는 몇가지 함수들은 common파일에 따로 정리를 해놓았다.

클라이언트에서 작업했던 이전과는 달리, 백엔드에서 요청을 보낼때 axios 대신 request를 사용한다.

request를 보내면 body에 요청한 내용이 들어오는데, 모두 string으로 오기 때문에 필요한경우 JSON.parse()를 통해 객체로 변환해주면 된다.

앞서 받아온 토큰으로 서버 리스트와 이미지도 받아오고, 해당 데이터를 통해 DB를 생성할것이다.

추후 캐릭터 정보를 DB에 저장할때 서버별로 캐릭터 정보를 정리할것이기 때문에 서버별로 DB 파일을 생성해주었다.

이것으로 서버 초기화 작업이 완료되었다. 이제 클라이언트에서 호출을 받았을때 블리자드 api에서 요청해온 데이터들을 DB에 저장할 준비가 되었다.

개발 기간) 2020/04/02 ~ 2021/01/05

블리자드의 오픈 api를 이용한 캐릭터 아이템 착용상태와 확장팩별 레이드 진행도를 알 수 있게 해주는 웹 어플리케이션이다.

사용한 프로그램, 라이브러리 및 프레임워크

• Jetbrain Webstorm
• github
• github-desktop
• vue.js
• vuetify
• vuex
• nuxt
• async.io

결과물

git - https://github.com/woohyun95/WOW_api_tutorial_nuxt

레이드 진행도 페이지

캐릭터 장비 페이지

구현 과정

1. 블리자드 오픈 api 토큰 생성
2. 계정 정보 받아오기
3. 캐릭터 이미지 받아오기
4. 레이드 진척도 컴포넌트 제작
5. 캐릭터 장비 컴포넌트 제작(1)
6. 캐릭터 장비 컴포넌트 제작(2)