Arcane (4) - 개발

2-3. 프론트 구현 (React)

기본적인 서버의 기반이 마련된후엔 프론트 또한 기본 작업을 들어가준다. 우리는 이번 프로젝트에서 React를 사용하였기에 vsc의 터미널 창을 사용해서 create-react-app 명령어를 통해 react 프로젝트를 만들어줬다.

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

react 프로젝트를 생성하고 나서는 필요없는 파일들을 정리해주고 우리가 사용할 모듈들을 npm을 활용해 package.json에 다운 받았다.

• axios : 프론트에서 서버와의 통신을 위해서
• http-proxy-middleware : 서버와의 통신을 위한 프록시 설정
• dotenv : 환경변수 관리를 위해서

axios는 서버와의 통신 즉, 서버의 api를 호출해서 데이터를 주고 받기위한 수단으로 사용하였고 두번째인 프록시 미들웨어는 axios 사용시 계속해서 서버의 주소와 반복적인 url 입력을 줄이기 위해서 별도의 setupProxy.js 파일을 만들어 해당 파일 안에서 사용할 서버 api url과 서버 주소를 미리 정리해 두었다. 세 번째인 dotenv는 서버의 기본 url 즉, baseURL을 따로 환경변수로 저장해서 관리하기 위해서 다운받았다. 이를 위해 별도의 .env 파일을 만들어 해당 파일 내에서 사용할 환경변수를 관리하였다. (나중에 배포하고 나서도 해당 url만 변경해주면 되어서 편했다.)

 

위 기본 세팅을 마친후엔 앞서 미리 디자인을 해둔 화면별로 페이지를 나누어 주었고 생성된 페이지들은 메인 app.jsx에서 BrowserRouter를 활용해 라우터를 전환할 수 있도록 하였다 (.jsx는 페이지나 컴포넌트 개발시 좀 더 편리한 개발을 위해 바꿈, HashRouter도 있었지만 도메인에 '#'이 들어가는것과 현업에서는 잘 사용되지 않는점을 고려해서 나중에 배포시에 좀 어려울지라도 BrowserRouter를 사용했다.). 

 

페이지 분리 및 라우터 구성이 끝나면 작업에 들어갈 한 페이지에서 또 화면을 컴포넌트별로 구분해서 한 컴포넌트씩 개발을 하였다 (리엑트는 마치 레고 블럭마냥 하나씩 떼서 개발할 수 있어서 편리했던것 같다. 나중에 반복적으로 쓰이는 topbar나 footer같은건 다른 페이지에서도 재활용이 가능해서 좋았다.)

폴더와 파일들의 포함관계를 보면 아래와 같다.

• front
  • public
  • src
    • components
      • 각 페이지에 들어갈 컴포넌트 파일들
    • db
      • db.js (사실상 서버와 통신하는 함수들만 모아둔건데 이름을 잘못 지은듯)
    • network
      • riotAPI.js (라이엇 api를 사용하는 함수들을 모아둔 곳)
    • page
      • 각 페이지 파일들
    • App.jsx (여기서 router 관리를함)

 

2-4. 라이엇 API 정리 (Riot APIs)

기본적인 프론트와 서버가 모두 구현된후엔 우리 프로젝트의 핵심인 라이엇의 롤 api를 잘 가져오는지 확인해야한다.

우선 라이엇 개발자 사이트로 들어가준다.

Riot Developer Portal

로그인(본인 라이엇 계정으로 해주면됨)을 해주면 본인의 대쉬보드로 가는데 거기서 riot api key를 발급받을 수 있다. 라이엇의 api를 사용하기 위해서 반드시 이 api key가 필요하다.

riot api key

이 api key의 유효 기간은 하루이므로 하루마다 여기로와서 새롭운 key를 발급 받으면 된다. 

라이엇에다 신청해서 유효기간이 긴 별도의 key를 받는것도 있었기에 신청을 해보았지만 난 받지 못했다....ㅠ

발급받은 api key는 라이엇 api의 모든 url에 넣어줘야만 api들을 옳바르게 호출할 수 있다.

이제 상단의 넷바에서 APIS로 가면 라이엇의 모든 게임들의 api 모음들을 볼 수 있다.

우린 이중에서 League of Legends와 관련된것만 사용한다.

riot APIS

가장처음으로 쓰이고 가장 기초적인 api 하나를 가지고 사용법을 설명하자면 좌측의 리스트에서 

SUMMONER-V4 를 골라주고 (summoner = 소환사 란 의미)

우측에서 아래 사진에 표시된 api를 골라준다.

표시한곳을 하나씩 들여다 보자면 가장 왼쪽의 GET은 CURL 방식중 하나인 GET을 뜻하는 것(데이터를 받아오기만함)이고 중괄호 이전의 url들은 말 그대로 api url의 일부이며 중괄호에 들어있는 {summonerName}은 파라미터로 받을 값이 "소환사명" 즉 게임 닉네임을 사용한다는 의미이다.

summoner api

해당 api를 클릭하면 해당 api를 사용하는 방법과 응답값별 상황 및 전달되는 값들에 대한 설명이 상세하게 나와있다 (이것이 REST API??!).

summoner api값

우선 전달되는 값들을 살펴보자면

• accountId : 암호화된 계정 id값 (본인 겜 id가 아니라 암호코드들로 이루어진 본인 계정을 구별할 고유 값)
• profileIconId : 검색한 해당 소환사의 현재 프로필 아이콘의 id값
• revisionDate : 검색한 소환사의 데이터가 마지막으로 수정된 날짜 (유닉스 타임스탬프로 기록되있음)
• name : 소환사명 (닉네임)
• id : 암호화된 id값
• puuid : 암호화된 puuid값
• summonerLevel : 소환사 현재 레벨

위 정보들이 가장 기본적인 한명의 소환사에게 할당되는 값들이며 해당 값들을 가지고 다른 api들의 파라미터값으로 넘겨서 사용할 수 있다.

 

api요청이 옳바르게 이루어지지 못했을 경우 error 코드들이 응답되는데 각 코드값별에 따른 응답 메시지들도 정리되어있다.

summoner api error reponse code

riot측 서버에서 문제가 발생하지 않는이상 5xx 번대 오류는 거의 일어나지 않을거고 아마 제일 많이 받게될 오류가 4xx 번대 에러코드를 가장 많이 받았던것 같다(cors문제... 오타... 등등...). 사용시에 꼭 조심해서 요청하자...! (특히 cors 오류!)

 

위의 정보들을 모두 확해준뒤에 아래의 입력란에 검색하고자 하는 소환사명을 입력해주고 지역을 지정해준다음에 아까 발급받은 api key를 지정해주고 INCLUDE API KEY에선 Query Param이나 Header Param을 선택(url을 쿼리 형식으로 볼지 헤더 형식으로 볼지)해준 후 execute request를 눌러주면 api요청이 완료된다.

summoner api 요청

올바르게 요청이 완료되면 아래와 같이 결과 정보들이 뜬다(올바르지 못할 경우엔 아까의 error 코드값이 뜸).

결과 정보중 request url이 있는데 해당 url을 가져가서 프로젝트에서 사용하였다.

url을 정리하면 아래와 같은 양식이다. 소환사명에서 이상한 영어랑 문자랑 숫자 섞여 있다고 당황하지말고 검색한 소환사명을 암호화하느라 그런 모양인것이다. 해독하면 검색한 소환사명이 나옴.

(중괄호는 빼고 쓰는겁니다~)

"https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/{소환사명}?api_key={발급받은 api key 값}"

다른 결과중 reponse code는 200 이면 올바르게 요청된것이고 4xx나 5xx면 어떤 문제가 생긴거다...

마지막으로 요청 헤더정보도 보내주는데 해당 헤더를 참고해서 요청할때 추가할 헤더값이라던가 cors오류등을 방지할 수 있다.

summoner api request

이제 응답 값들을 보자면 code값은 앞서 위에서 설명했고, 응답 헤더에선 내가한 요청에 따른 헤더값들을 응답해준다. 만일 자신의 프로젝트에서 이 url을 따와서 요청을 한다면 해당 응답 헤더를 유심히 살펴본후 요청시에 넣어줄 헤더값들을 설정해주면된다.

마지막으론 body에 우리가 요청한 값들이 json형식으로 담겨서 온다. 프로젝트에서도 데이터를 받을때 json 형식으로 받아오기에 데이터를 꺼내쓰기가 편리했었다.

summoner api response

다른 api들도 필요로하는 값이나 응답값이 좀 다를뿐이지 사용방식은 동일하므로 하나의 api만 잘 사용할줄 알아도 나머지 api들은 어렵지 않게 사용할 수 있을 것이다.