[TOY] RIOT API를 이용해서 전적검색 사이트를 만들어보자! - 2

안녕하세요 Marcus입니다.

이번 포스팅에서는 server 설정 및 RIOT API Key를 받는 방법에 대해서 포스팅할 예정입니다.

이번 프로젝트 서버쪽 스펙은 AWS Lambda + Serverless

저는 serverless와, 서버단 코드를 어떻게 작성했는지에 초점을 두어서 포스팅을 진행하도록 하겠습니다.

RIOT API를 사용하는데 왜 AWS Lambda와 Serverless를 사용하냐? 라고 여쭤보실 수 있습니다.

이유는 cors에러때문인데 해당 API들이 cors가 막혀있기 때문에

RIOT에서는 API를 사용해서 프로덕트를 만들려고 한다면 server gateway를 만들어서 적용하라고 되어있습니다.

제가 초기 설정에 참고한 문서는 아래 번역글을 참고 해서 작성했습니다.

https://medium.com/@jwyeom63/%EB%B9%A0%EB%A5%B4%EA%B2%8C-%EB%B0%B0%EC%9B%8C%EB%B3%B4%EB%8A%94-node-js%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%84%9C%EB%B2%84%EB%A6%AC%EC%8A%A4-serverless-503ee61539d4

추가로 RIOT API를 이용하기 위해 Key를 받는 방법입니다.
이 방법은 저번 포스팅에서 작성했기 때문에 아래 URL로 접근해서 확인하시기를 바랍니다.

https://velog.io/@marcus/TOY-1-%EB%9D%BC%EC%9D%B4%EC%97%87-API%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%EB%A1%A4-%EC%A0%84%EC%A0%81-%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A5%BC-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EC%9E%90-gojpscoym4

앞 포스팅에서 말씀 드렸듯이 아래 API중 1~2개의 API를 어떻게 만들었는지 공유 드리고
다른 방식으로 만들어 보시는것을 추천드립니다.

User Info Component
League Info Component
RecentChampion Component
GameList Component

serverless 간단한 코드

먼저 serverless.yml에 간단한 API 정보를 작성해줍니다.

// 유저 정보를 가져오는 API
summonerInfo:
    handler: handler.SummonerInfo
    events:
      - http:
          path: marcus-gg/summoner/summonerInfo/by-name/summonerName={summonerName}
          method: get
          cors: true

작성하셨다면 handler.js 파일로 이동하셔서 API Handler 만들어줍니다.

module.exports.SummonerInfo = async event => {
  let {summonerName} = event.pathParameters;
  summonerName = encodeURI(summonerName)
  return axios
    .get(`https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/${summonerName}?api_key=${api_key}`)
    .then(response => {
      return {
        statusCode: 200,
        body: JSON.stringify(
          {
            data: response.data
          },
        )
      }
    })
};

서버쪽에 대해서 간단하게 작성은 했지만...
프론트 엔지니어인 저에게 서버쪽 포스팅은 많이 힘드네요..
다른분들 포스팅을 좀 보고 이 포스팅은 수정을 하던지 하겠습니다..

다음 포스팅 부터는 프론트쪽에서 작성한 컴포넌트를 가지고 포스팅당 하나의 컴포넌트 방식으로 작성하겠습니다.

Write by Marcus.