[T1.gg] Riot API를 이용하여 롤 전적 검색 사이트 만들기 (1)

🚀 프로젝트 개요

나의 관심사를 가득 담아 덕업일치의 삶을 이루기 위해 T1 선수들의 솔랭 전적을 한번에 확인할 수 있고, T1의 공식 유튜브를 바로 확인할 수 있는 사이트를 만들기로 했다.

figma wire frame

처음 들어가면 T1의 공식 유튜브 영상이 나열되고 원하는 영상을 검색할 수 있다. 두번째 페이지에는 T1에 소속된 선수들의 정보를 알려줄 것이고, 선수 프로필을 누르면 해당 선수의 솔랭 전적 정보를 바로 확인할 수 있도록 할 예정이다.

 

🤖 기술스택

이번 프로젝트에서 이용할 기술스택은 다음과 같다

• React, Redux Toolkit
• Typescript
• eslint, prettier

 

👩🏻‍💻 API key 발급 및 CORS Error 해결

T1 공식 유튜브 채널에서 영상을 가져오기 위해서 Youtube API를 이용할 것이고 선수들의 전적을 나타내주기 위해서 Riot API 역시 이용할 예정이다. API 키 발급은 쉽게 발급이 가능하기에 5분 안에 클리어했다.

https://console.cloud.google.com/projectselector2/apis/dashboard?supportedpurview=project

Google 클라우드 플랫폼

https://developer.riotgames.com/

Riot Developer Portal

여기에서 youtube API를 이용하기 위한 key와 Riot API를 이용하기 위한 key를 발급받을 수 있다. Riot Developer의 경우 승인 받지 않은 key는 유효 시간이 24시간 밖에 안되고 tournament 정보에 접근할 수 없다. 따라서 라이엇에게 영어로 내가 만들고자 하는 사이트 정보를 정성스럽게 써서 승인해달라는 메세지를 보내야하는데, 이게 두달 가까이 걸린다는 후기를 읽고 나서 난 그냥 하루에 한번씩 key를 갱신하면서 프로젝트를 진행했다. 어차피 tournament 정보는 나에게 필요가 없기도 했고.

riot API key 발급

Riot API의 경우, client에서 직접 header를 넣어서 보내면 cors error가 뜬다. 그래서 server 쪽에서 api를 쏴야하는데, 이번에 나는 혼자서 프로젝트를 진행했기 때문에 nodejs까지 커버하기엔 한계가 있어서 google extenstion으로 해결해줬다. Moesif Origin $ CORS Changer를 검색해서 다운받고 활성화시켜주면 CORS 에러를 해결할 수 있다!

 

이렇게 사전 작업을 끝내고, 이제 진짜 개발을 시작해보도록 하겠다.