🚨 RIOT API를 이용해서 롤 전적 검색 사이트 만들기 (4) - 코딩 & 화면 테스트

이번 포스트는 프로젝트 네번째 이슈에서 화면테스를 진행했다. 나는 라벨을 통해 미리 준비해야하는 부분을 Preparations로 개발부분을 feature로 구분하고있다.

---

유명한 리그오브레전드 전적 사이트를 클론코딩하여 프로젝트를 진행해보기로 했다. 혼자서 진행하는만큼 1차적인 목표는 간단히 아래와 같은 과정을 거치기로 했다.

• ✔️ Riot API를 인증
• ✔️ Jackson을 이용해서 Riot API 데이터 파싱
• 🔛 AWS RDS로 DB 설계 및 구축
• 🔛 Spring Boot를 이용해서 MVC 구조 만들기 (with mybatis)
• Vue를 이용해서 프론트를 구축
• EC2로 배포

🚨 RESTFUL Project 🚨 ⇢ RIOT API + Spring Boot + AWS EC2 & RDS

---

화면 테스트하기

테스트하기전에 지난 RIOT API를 이용해서 롤 전적 검색 사이트 만들기 (3)에서 화면에 들어가야하는 요소들을 뽑아보았다. 일단 처음에는 가장 기본이되는 다음 사항들을 테스트하기로했다.

1. 소환사 이름으로 검색하기
2. 검색 후 이름, 소환사 아이콘, 소환사 티어 띄우기

소환사 이름으로 검색하기

간단한 검색창을 만들어서 테스트해보았다. 우선 REST 통신이기 때문에 ajax를 이용했다. 소환사 이름으로 정보를 검색하는 일은 그저 GET으로 받아오면 되기때문에 간단하게 테스트를 완료했다.

검색 후 관련 정보 띄우기

소환사 이름으로 검색후에 띄어야할 정보들이 여러 있다. 그중에 먼저 이름, 소환사 아이콘, 소환사 티어를 띄어보기로했다.

이름

이름은 검색한 내용 그대로이며, summoner DTO 객체 안에 정보가 들어있기때문에 그냥 출력해주면된다.

소환사 아이콘

사실 앞에서 언급할 타이밍이 없어서 미루고있었던 것인데, RIOT에서는 API뿐만아니라 Data Dragon이라는 서버에서 일부 아이콘들을 제공해준다.

Data Dragon은 챔피언, 아이템, 룬, 소환사 주문 및 프로필 아이콘을 포함하여 League of Legends 게임 데이터 및 자산을 중앙 집중화하는 방법

위 서버에서 데이터를 얻어오기 위해서는 RIOT DATA DRAGON에서 정보를 얻을 수 있다. 간략하게 몇가지 예시 및 정보를 적어보겠다.

일단 기본적으로 정적 데이터 파일을 제공해준다. 그렇기때문에 다운로드 받아서 로컬에 넣어도 되지만 굳이 그렇게 하지않는 이유가 두가지가 있다.

1. 용량이 크며, 서버에서 제공해주는 것을 마다할 필요가 없다.
2. 패치마다 일부 데이터가 변경되므로 데이터 관리가 번거롭다.

데이터 드래곤은 URL을 통해 데이터를 받아올 수 있는데, 버전과 서버 두가지를 고려해야 한다. 현재 기준으로 10.11.1 버전이 가장 최신이고, 한국 서버는 ko_KR이다. 이 기준으로 내가 뽑으려 했던 소환사 아이콘을 뽑아보자.

http://ddragon.leagueoflegends.com/cdn/10.11.1/img/profileicon/{소환사 아이콘 넘버}.png

중간중간에 본인에게 해당되는 서버와 버전 정보로 치환하고, RIOT API를 통해 얻어온 정보를 통해서 소환사 아이콘 넘버를 채워 넣자. 이 이외에도 몇가지 정보를 알아보겠다.

• 아이템 이미지 (format + example)

https://ddragon.leagueoflegends.com/cdn/10.11.1/img/item/{아이템 코드}.png

• 챔피언 아이콘 이미지 (format + example)

https://ddragon.leagueoflegends.com/cdn/10.11.1/img/champion/{챔피언 이름}.png

• 특정 챔피언 정보 (format + example)

[http://ddragon.leagueoflegends.com/cdn/10.11.1/data/ko_KR/champion/{챔피언 이름}.json}(http://ddragon.leagueoflegends.com/cdn/10.11.1/data/ko_KR/champion/Aatrox.json)

그외 데이터는 RIOT DATA DRAGON에서 정보를 얻을 수 있다. 또한 https://shyunku.tistory.com/56 블로그에서 잘 정리해 놓아서 많은 참고가 되었다.

소환사 티어

소환사 티어는 Ranked Info에서 이미지 파일을 다운로드 받을 수 있다. 그런데 위 이미지 파일에 맞는 소환사 티어와 매칭을 시켜줘야하는데, 앞서 내가 리그 정보에 대해 파싱을 안해서 새로 DTO와 관련 파서를 만들었다.

파싱에 관한 내용은 여기서 확인 가능하다.

결과

정말 두서없이 결과가 나왔지만, 화면은 나중에 다시 구성할것이기 때문에 파싱해서 클라이언트에게 보여주는데까지 성공했다는 점을 말하고싶다.

다음 포스팅에 더 해야할 사항은 지난번에서 설계한 화면에 들어가는 정보들을 화면단에 뿌리는 것까지 테스트를 해야한다. 그런데 추가적으로 지금은 컨트롤러에서 임의로 모든 파서들을 호출해서 뿌려주고있는데, 사실 이 부분은 서비스에서 로직을 구성하는게 맞다고 판단된다. 그리고 소환사 정보 하나에 여러가지 딸려오는 정보들이기때문에 유사 트랜잭션 처리라고 생각된다. 따라서 다음 포스트는 스프링 부트를 이용해 트랜잭션 처리하는 법을 공부해서 적용시키는 포스팅을 해보도록 하겠다.

REF

• https://shyunku.tistory.com/56
• RIOT DATA DRAGON
• Ranked Info