Typescript/T1GG

[T1.gg] Riot APIλ₯Ό μ΄μš©ν•˜μ—¬ λ‘€ 전적 검색 μ‚¬μ΄νŠΈ λ§Œλ“€κΈ° (1)

yuuna 2022. 8. 22. 16:08

πŸš€ ν”„λ‘œμ νŠΈ κ°œμš”

λ‚˜μ˜ 관심사λ₯Ό 가득 λ‹΄μ•„ λ•μ—…μΌμΉ˜μ˜ 삢을 이루기 μœ„ν•΄ 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 ν΄λΌμš°λ“œ ν”Œλž«νΌ

둜그인 Google ν΄λΌμš°λ“œ ν”Œλž«νΌμœΌλ‘œ 이동

accounts.google.com

https://developer.riotgames.com/

 

Riot Developer Portal

About the Riot Games API With this site we hope to provide the League of Legends developer community with access to game data in a secure and reliable way. This is just part of our ongoing effort to respond to players' and developers' requests for data and

developer.riotgames.com

μ—¬κΈ°μ—μ„œ 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 μ—λŸ¬λ₯Ό ν•΄κ²°ν•  수 μžˆλ‹€!

 

μ΄λ ‡κ²Œ 사전 μž‘μ—…μ„ 끝내고, 이제 μ§„μ§œ κ°œλ°œμ„ μ‹œμž‘ν•΄λ³΄λ„λ‘ ν•˜κ² λ‹€.