[LostArk Open API] 로스트아크 프로젝트 구상 및 open API 사용하기

로스트아크 Open API 프로젝트

 로스트아크는 현재 유저들이 직접 게임 내 정보를 활용할 수 있도록 Open API를 제공한다. 해당 API로 로스트아크의 News, 캐릭터 정보, 길드, 마켓 등 다양한 인게임의 정보를 받아올 수있다.

API로 받아올 수 있는 데이터 카테고리

 

 개인적으로 로스트아크에서 생활 컨텐츠를 즐기는 편인데, 해당 API로 효율 좋은 생활 컨텐츠 방향을 정할 수 있을 것이라고 생각해서 생활 관련 정보를 제공해주는 프로젝트를 진행하기로 했다. 해당 정보를 알려주는 사이트들은 이미 많기 때문에 좋은 성능이라기 보다는 나에게 최적화 된 사이트를 만드는 것이 목적이다.

 

- 참고 사이트

아이스 팽 : https://loa.icepeng.com/
로아 도구 : https://loatool.taeu.kr/

 

 현재는 간단한 사이트만 생각하고 있으나, 추후에 위 참고 사이트와 같이 새로운 기능을 더 추가할 예정이다.

---

로스트아크 Open API 사용해보기

 프로젝트를 진행하기 위해 가장 먼저 API를 사용해보기로 하였다. 

 

1. Open API key 발급 받기

우선 로스트아크 Open API 사이트에 접속을 하고 Stove 로그인을 진행한다.

 

 가운데 'GET ACCESS TO LOSTARK API' 버튼을 눌러 발급 페이지로 이동하면 아래 화면처럼 기존 발급된 API 데이터와 새로 만들 수 있는 버튼이 존재한다.

 

API키와 이전 생성한 key의 이름은 가린 상태이다.

'CREATE A NEW CLIENT' 버튼을 눌러 key 발급을 진행하면 된다. 해당 과정은 간단하기에 설명은 넘어가기로 한다.

 

2. API Key 테스트해보기

 해당 홈페이지에서는 API를 사용하기 위한 Documents를 제공해주고 있다. Documents에서는 해당 API를 사용해볼 수 있어 쉽게 사용법을 이해할 수 있었다.

 

 현재 공지사항을 받아오는 API로 API Key를 테스트해보자

news 관련 Documents

위 사진에서 'AUTHORIZE' 버튼을 눌러 이전에 발급 받은 API key를 입력해주자. 이 때 Input box에 존재하는 bearer는 지우지 않고 뒤에 key를 입력해주자.

API key 입력 예시

 key등록 후 아래 NEWS 탭을 선택하여 'Try it out' 버튼을 통해 해당 API를 테스트 할 수 있다.

정상적으로 Response 데이터가 나오는 것을 확인할 수 있다.

 

3. React app에서 API 사용해보기 (axois)

 이제 홈페이지에서 제공하는 API를 axois를 통해 데이터를 받아와보자.

 

 API테스트로는 현재 경매장에서 '오레하'라는 이름을 포함하는 아이템의 데이터를 가지고 와 볼 것이다.(생활 컨텐츠로 주로 제작하는 아이템이다.)

 

 위 데이터를 가지고 오기 위해서는 markets/items API를 사용할 것이다.

markets/items API 명세서

 

우선 axios의 기본 세팅을 진행하다. 기본 세팅은 평소에 각자 사용하기 위한 기본 설정으로 진행하면 되는데 Headers에 authorization data를 넣어주어야한다. 이때 데이터는 이전에 발급 받은 API key를 넣어주면 된다.

 

 필자는 개인적으로 instance를 미리 만들어두는 편이라 아래와 같이 사전 작업을 진행하였다. API key는 env에 넣어주었다.

import axios from "axios";

const accessToken = process.env.REACT_APP_API_TOKEN;

const instance = axios.create({
  baseURL: "https://developer-lostark.game.onstove.com",
  headers: {
    "content-type": "application/json;charset-UTF-8",
    accept: "application/json,",
  },
});

instance.interceptors.request.use(
  function (config: any) {
    config.headers!.authorization = accessToken;
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);
export default instance;

 

이제 API를 호출하기 전에 POST로 보내줄 data를 만들어보자.

markets/items에 필요한 data는 명세서에서 확인할 수 있다.

이 때 해당 데이터에 입력할 값은 /markets/options API로 확인할 수 있다.

해당 데이터는 홈페이지에서 확인하도록 하자.(스크롤로 모든 데이터를 확인할 수 있다.)

 

이제 모든 준비가 끝났으니 바로 API를 사용해보자

  const getAPIData = async () => {
    const res = instance({
      method: "post",
      url: "markets/items",
      data: {
        Sort: "GRADE",
        CategoryCode: 50010,
        ItemName: "오레하",
        PageNo: 0,
        SortCondition: "ASC",
      },
    }).then((data) => {
      console.log(data);
    });
  };

  useEffect(() => {
    getAPIData();
  }, []);

위 코드처럼 정확한 데이터를 입력하면 아래와 같이 콘솔창에 원하는 데이터들이 나오는 것을 확인할 수 있다.

---

마치며

 이번 포스팅에서는 간단하게 API를 테스트 해보았고, 이제 다음 포스트에서는 받아오는 데이터를 활용하는 포스트를 작성할 예정이다.