롤 API 사용해 테이블 만들기

728x90

npm 브릿지 받은것 최적화

# npm 캐시 정리
npm cache clean --force

# 의존성 설치 시 속도 향상을 위해 `pnpm` 사용을 고려
npm install -g pnpm
pnpm install

# production 모드로 의존성 설치
npm install --only=prod

프리마 마이그레이션

# 마이그레이션 생성
npx prisma migrate dev --name init

# Prisma 클라이언트 생성
npx prisma generate

API Key : RGAPI-8243c9c2-c449-4430-ba53-213255d329f3

임 API 코드

station

응답 코드

Riot Games API는 모든 데이터를 유효한 JSON으로 반환합니다. 일부 프로그래밍 언어에는 JSON에 대한 기본 지원이 포함됩니다. 그렇지 않은 경우 https://www.json.org 에서 적합한 라이브러리를 찾을 수 있습니다 .

API는 대역폭을 절약하기 위해 비어 있지 않은 값만 반환합니다. 0은 비어 있는 값으로 간주되며, 비어 있는 문자열, 비어 있는 목록, null도 마찬가지입니다. 반환되지 않는 모든 숫자 필드는 0(또는 원하는 대로 null)으로 간주할 수 있습니다. 반환되지 않는 모든 목록 필드는 비어 있는 목록 또는 null로 간주할 수 있습니다. 반환되지 않는 모든 문자열 필드는 비어 있는 문자열 또는 null로 간주할 수 있습니다.

2XX 응답 코드

200개의 응답 코드의 경우 API 참조 페이지에 문서화된 응답 본문을 항상 기대할 수 있습니다. 200개의 응답 코드만 JSON으로 응답 본문을 반환하는 것이 보장됩니다.
200이 아닌 응답 코드의 경우 다음 사항을 유의하세요.
응답 본문은 반환이 보장되지 않습니다.
응답 본문이 있는 경우 JSON일 것이라는 보장은 없습니다.
현재 우리는 인간이 읽을 수 있는 디버깅 정보가 담긴 JSON을 반환하지만, 이 디버깅 정보의 구조와 내용은 변경될 수 있습니다. 예를 들어...

    {
        "status": {
            "message": "Unauthorized",
            "status_code": 401,
        }
    }

status , message 및 status_code 의 내용은 항상 존재하거나 주어진 응답 코드에 대해 일정하게 유지되는 것이 보장되지 않습니다. 4. 애플리케이션 내의 논리는 응답 코드에만 기초하여 우아하게 실패해야 하며 응답 본문에 의존해서는 안 됩니다.

4XX 오류 코드

4xx 클래스의 오류 코드는 클라이언트가 유효한 요청을 제공하지 못했음을 나타냅니다. 아래는 API를 사용할 때 발생할 수 있는 가장 일반적인 4xx 클래스의 오류 코드입니다.

400(잘못된 요청) 이 오류는 요청에 구문 오류가 있어 요청이 거부되었음을 나타냅니다. 클라이언트는 구문이나 요청 내용을 수정하지 않고 유사한 요청을 계속해서는 안 됩니다.

일반적인 이유

제공된 매개변수의 형식이 잘못되었습니다(예: 정수 대신 문자열).
제공된 매개변수가 잘못되었습니다(예: beginTime과 startTime이 너무 큰 시간 범위를 지정함).
필수 매개변수가 제공되지 않았습니다.

401(인증되지 않음) 이 오류는 요청이 필요한 인증 자격 증명(예: API 키)을 포함하지 않았기 때문에 클라이언트가 액세스가 거부되었음을 나타냅니다. 클라이언트는 요청에 API 키를 포함하지 않고 유사한 요청을 계속해서는 안 됩니다.

일반적인 이유

요청에 API 키가 포함되지 않았습니다.

403(금지됨) 이 오류는 서버가 요청을 이해했지만 승인을 거부했음을 나타냅니다. 잘못된 경로나 잘못된 승인 자격 증명(예: API 키) 간에는 구별이 없습니다. 클라이언트는 유사한 요청을 계속해서는 안 됩니다.

일반적인 이유

API 요청과 함께 잘못된 API 키가 제공되었습니다.
블랙리스트에 등록된 API 키가 API 요청과 함께 제공되었습니다.
API 요청은 잘못되었거나 지원되지 않는 경로에 대한 것입니다.

404(찾을 수 없음) 이 오류는 서버가 수행 중인 API 요청에 대한 일치 항목을 찾지 못했음을 나타냅니다. 조건이 일시적인지 영구적인지 여부는 표시되지 않습니다.

일반적인 이유

제공된 ID 또는 이름이 기존 리소스와 일치하지 않습니다(예: 지정된 ID와 일치하는 소환사가 없습니다).
지정된 매개변수와 일치하는 리소스가 없습니다.

415(지원되지 않는 미디어 유형) 이 오류는 요청 본문이 지원되지 않는 형식이기 때문에 서버가 요청에 대한 서비스를 거부함을 나타냅니다.

일반적인 이유

Content -Type 헤더가 적절하게 설정되지 않았습니다.

429(속도 제한 초과) 이 오류는 애플리케이션이 지정된 기간 동안 허용된 최대 API 호출 수를 소진했음을 나타냅니다. 클라이언트가 속도 제한 초과 응답을 받으면 클라이언트는 이 응답을 처리하고 Retry-After 헤더에 표시된 기간(초) 동안 향후 API 호출을 중단해야 합니다. 이 정책을 위반하는 애플리케이션은 API의 무결성을 유지하기 위해 액세스가 비활성화될 수 있습니다. 속도 제한이 적용되었는지 확인하고 이를 방지하는 방법에 대한 자세한 내용은 아래의 속도 제한 문서를 참조하세요.

일반적인 이유

규제되지 않은 API 호출.

5XX 오류 코드

5xx 클래스 또는 오류 코드는 서버가 오류가 발생했거나 요청을 수행할 수 없음을 알고 있음을 나타냅니다. 아래는 API를 사용할 때 발생할 수 있는 가장 일반적인 5xx 클래스 오류 코드입니다.

500(내부 서버 오류) 이 오류는 예상치 못한 상황 또는 예외로 인해 서버가 API 요청을 이행하지 못했음을 나타냅니다.

503(서비스 사용 불가) 이 오류는 알 수 없는 이유로 현재 서버가 요청을 처리할 수 없음을 나타냅니다. 서비스 사용 불가 응답은 잠시 지연되면 완화될 일시적인 상태를 의미합니다.

Axios

설치

# axios, prisma 설치
npm install axios prisma

설명: Axios는 HTTP 요청을 처리하기 위한 클라이언트 라이브러리입니다. 브라우저와 Node.js 환경에서 모두 사용할 수 있으며, REST API나 기타 HTTP 요청을 다룰 때 자주 사용됩니다.
주요 기능:
- GET, POST, PUT, DELETE 등의 HTTP 요청 처리.
- 요청 및 응답 데이터의 자동 JSON 변환.
- 요청 취소 기능.
- 인터셉터를 사용한 요청/응답 사전 처리.
- 브라우저와 Node.js 모두에서 사용할 수 있는 유연성.
사용 예시:

const axios = require('axios');

// GET 요청
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

모든 챔피언의 상태를 반환하는 엔드포인트

/lol/platform/v3/champions 엔드포인트를 사용

예시

GET https://kr.api.riotgames.com/lol/platform/v3/champions?api_key=YOUR_API_KEY

YOUR_API_KEY를 발급받은 실제 API 키로 교체해야 합니다.

반환값은 json형태로 오고, 이 중에 필요한 것은 이름과 이미지 url인데

1) 헤더로 API 키 포함 API 요청 시 Authorization 헤더를 사용하여 API 키를 포함시킬 수 있습니다. 이 방법은 보안상 더 안전한 방법으로, API 키가 URL에 노출되지 않도록 할 수 있습니다.

const axios = require('axios');

// Riot Games API URL
const API_URL = 'https://kr.api.riotgames.com/lol/platform/v3/champions';

// API 키
const API_KEY = 'RGAPI-8243c9c2-c449-4430-ba53-213255d329f3';

// API 요청 함수
async function fetchChampionData() {
  try {
    const response = await axios.get(API_URL, {
      headers: {
        'X-Riot-Token': API_KEY  // 헤더에 API 키 추가
      }
    });

    const champions = response.data.champions; // 챔피언 데이터
    console.log(champions);  // 데이터 출력 (테이블에 표시하도록 수정 가능)

  } catch (error) {
    console.error('Error fetching data from Riot API:', error);
  }
}

fetchChampionData();

2) URL에 API 키 포함 URL 쿼리 파라미터에 api_key로 API 키를 포함시킬 수도 있습니다. 이 방식은 간단하지만, 보안이 중요한 경우에는 추천하지 않습니다.

const axios = require('axios');

// Riot Games API URL
const API_URL = 'https://kr.api.riotgames.com/lol/platform/v3/champions';

// API 키
const API_KEY = 'RGAPI-8243c9c2-c449-4430-ba53-213255d329f3';

// API 요청 함수
async function fetchChampionData() {
  try {
    const response = await axios.get(`${API_URL}?api_key=${API_KEY}`);

    const champions = response.data.champions; // 챔피언 데이터
    console.log(champions);  // 데이터 출력 (테이블에 표시하도록 수정 가능)

  } catch (error) {
    console.error('Error fetching data from Riot API:', error);
  }
}

fetchChampionData();

2. API 키 보안

API 키는 민감한 정보이므로, 실수로 공개되지 않도록 주의해야 합니다. 특히, 다음과 같은 방법으로 보안을 강화할 수 있습니다:

환경 변수로 API 키 관리: dotenv 라이브러리를 사용하여 .env 파일에 API 키를 저장하고, 코드에서는 이를 불러와 사용하는 방법.
서버 사이드에서 API 요청 처리: API 키를 클라이언트 코드에 직접 포함시키지 않고, 서버에서 API 키를 관리하고 요청을 대신 보내는 방법.

3. 응답 데이터 처리

Riot Games API에서 챔피언 정보를 가져온 후, 필요한 필드를 처리하여 테이블에 데이터를 추가하는 방법은 아래와 같습니다. 예를 들어, 챔피언의 ID, 이름, 이미지 URL 등을 추출해서 테이블에 넣을 수 있습니다.

async function fetchChampionData() {
  try {
    const response = await axios.get(`${API_URL}?api_key=${API_KEY}`);
    const champions = response.data.champions; 

    const tableBody = document.querySelector('#champion-table tbody');

    champions.forEach(champion => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td><img src="https://ddragon.leagueoflegends.com/cdn/11.21.1/img/champion/${champion.id}.png" alt="${champion.name}"></td>
        <td>${champion.name}</td>
      `;
      tableBody.appendChild(row);
    });
  } catch (error) {
    console.error('Error fetching champion data:', error);
  }
}

fetchChampionData();

위 예시에서는 Riot API에서 제공하는 챔피언 아이디를 기반으로 챔피언 이미지를 로드하는 방식을 사용했습니다. 이미지는 LoL's Data Dragon에서 제공하는 이미지 URL을 사용합니다.

LoL's Data Dragon: https://developer.riotgames.com/docs/lol

라이브러리 설치

npm init -y
npm install express mysql2 axios

import express from 'express';
import { createServer } from 'http';

const app = express();
const server = createServer(app);
const mysql = require('mysql2/promise');
const axios = require('axios');

const PORT = 3000;

// AWS MySQL 연결 정보
const dbConfig = {
  host: 'YOUR_AWS_RDS_ENDPOINT',
  user: 'YOUR_DB_USERNAME',
  password: 'YOUR_DB_PASSWORD',
  database: 'YOUR_DB_NAME',
};

// Riot API 정보
//  Data Dragon API를 사용하므로 키를 포함하지 않았습니다.
const RIOT_API_KEY = 'RGAPI-8243c9c2-c449-4430-ba53-213255d329f3';
const RIOT_API_URL =
  'https://ddragon.leagueoflegends.com/cdn/13.6.1/data/en_US/champion.json';

app.get('/', (req, res) => {
  res.send(`
    <h1>챔피언 리스트 업데이트</h1>
    <button onclick="fetch('/update_champion_list', { method: 'POST' })
      .then(res => res.json())
      .then(data => alert(data.message))
      .catch(err => alert('오류: ' + err.message))">
      업데이트 실행
    </button>
  `);
});

app.post('/update_champion_list', async (req, res) => {
  try {
    // Riot API 호출
    const response = await axios.get(RIOT_API_URL);
    const champions = response.data.data;

    const championList = Object.values(champions).map((champ) => {
      const champId = champ.id;
      const champName = champ.name;
      const champImageUrl = `http://ddragon.leagueoflegends.com/cdn/13.6.1/img/champion/${champ.image.full}`;
      return [champId, champImageUrl, champName];
    });

    // MySQL 연결
    const connection = await mysql.createConnection(dbConfig);

    // 기존 데이터 삭제
    await connection.query('TRUNCATE TABLE 챔피언리스트');

    // 새 데이터 삽입
    const insertQuery =
      'INSERT INTO 챔피언리스트 (id, 챔피언이미지URL, 챔피언이름) VALUES (?, ?, ?)';
    await connection.query(insertQuery, championList[0]);
    await connection.end();

    res.json({ success: true, message: '챔피언 리스트 업데이트 완료!' });
  } catch (error) {
    res.json({ success: false, message: error.message });
  }
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

server.listen(PORT, async () => {
  console.log(`Server is running on port ${PORT}`);
});

참고

사용법 : https://velog.io/@minhyuk00/RIOT-API-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0

AIP : https://developer.riotgames.com/

기한만료 있음. 오늘 내로 테이블 채우자

저작자표시

'내일배움 과제 > CH4-2' 카테고리의 다른 글

듀오후기 API (0)	2024.12.24
챔피언즈 테이블 체우기 (0)	2024.12.24
환경설정 (0)	2024.12.24
Riot API - 챔피언 이름과 이미지 파싱 (0)	2024.12.24
12월 23일 회의 (1)	2024.12.23

Strobus

롤 API 사용해 테이블 만들기

응답 코드

2XX 응답 코드

4XX 오류 코드

5XX 오류 코드

Axios

2. API 키 보안

3. 응답 데이터 처리

'내일배움 과제 > CH4-2' 카테고리의 다른 글

티스토리툴바

롤 API 사용해 테이블 만들기

응답 코드

2XX 응답 코드

4XX 오류 코드

5XX 오류 코드

Axios

2. API 키 보안

3. 응답 데이터 처리

'내일배움 과제 > CH4-2' 카테고리의 다른 글

관련글

티스토리툴바