잡지식창고

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)

캐릭터 장비 데이터를 모두 불러왔으니 이제 장비 정보창을 만들어보자.

api에서 캐릭터 장비 정보를 불러올 때 해당 캐릭터가 장착하지 않은 장비는 장비칸 정보가 아예 누락되어 오기 때문에 미리 캐릭터가 장비할 수 있는 장비 객체를 만들어 정보를 정리했다.

그리고 해당 정보를 GearSlot 컴포넌트에 prop으로 넘겨주었다.

자꾸 실수하는 부분이 있는데, 변수안의 정보가 바뀔 수 있는 경우에는 computed로 관리해주어야하는데, 자꾸 data에 넣어놓는다... data에 들어간 변수는 페이지에서 다른 캐릭터를 검색했을 경우 해당 정보가 바뀌질 않는다. 주의하자.

장착한 장비의 등급과 아이템 레벨에 따라 표기를 다르게 해주었다.

장비 8가지 정도 다른 등급이 있는데, 다른 컴포넌트에서도 사용될 예정이기 때문에 state에 저장해두었다.

장비칸에 마우스를 호버링해 장비의 세부 정보를 볼 수 있게 만들었다. 해당 기능은 v-tooltip을 이용했다.

아이템의 세부 정보와 착용효과 등 모든 정보는 장비 데이터를 가져올때 함께 가져왔기 떄문에 그대로 넣어주기만 하면 된다. 

이것으로 캐릭터 장비 정보창을 마무리했다.

이번에는 해당 캐릭터의 착용 아이템을 나타내는 컴포넌트를 만들어보겠다.

우선, 검색한 캐릭터의 착용 아이템 정보를 가져온다.

api에서 불러올 때 착용하지 않은 아이템의 부위는 아예 정보가 누락되어서 기본 틀이 되어주는 객체를 만들어 그 안에 채우는 식으로 진행하였다.

그 다음, 위에서 가져온 데이터에 포함된 각 아이템의 ID를 이용해 아이템의 이미지를 가져온다.

불러온 이미지는 기존에 불러온 장비 데이터 객체에 넣어줄것이다.

해당 코드 작업중에 I/O함수때문에 자꾸 에러가 나서... 모든 액션을 waterfall과 auto로 교통정리를 했다.

불필요하게 별도 파일로 구분해놓았던 액션들을 통합했다.

기존에 파일단위로 분리되어있던 액션들을 실행 시점에 따라 모아주었다. 

waterfall중간에 for문으로 io함수를 처리할때 every를 사용해 해당 반복문이 모두 끝나고 다음 콜백을 넘길수 있도록 했다.