20230213 steam 검색 기능에 사용할 api

일단 steam api를 이용해 구현해야 할 기능은 검색과 인기게임, 사용자가 현재 실행중인 게임이다

다른 팀원과 협업해야 하는 부분은 우선 남겨두고 검색기능부터 구현하기로 함

그래서 찾은 api가 applist api

 

근데 이걸로 검색기능을 구현하기엔 조금 난감한 부분이 하나 있다. 내가 만들려는 건 검색기능이고, 해당 api는 appsearch가 아니라 applist api인 것..

그러니까 검색 결과를 도출하기 위해서는 우리 서버가 applist에 담긴 총 15만개의 게임을 돌려서 그 중에서 사용자가 원하는 게임을 골라내야 한다

사용자의 인내심이 터지거나 서버가 터지거나 둘 중 하나는 반드시 발생할 것 같았다..ㅋㅋㅋㅋ그래서 다른 api를 열심히 모색했고, 다행히 applist를 대신할 api를 찾음

 

참고로 공식문서에는 api종류가 너무 많아서 찾다가 기절할거 같길래 n시간의 사투 끝에 chat gpt에게 물어보기로 결정함ㅎ 검색기능을 만들고 싶은데 어떤 api를 써야하는지 물어봤다

한 10번 물어보니까 storesearch api를 쓰라는 쓸만한 대답을 뱉어냈음

  const [searchValue, setSearchValue] = useState("");
  const [searchResult, setSearchResult] = useState([]);

useEffect(() => {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/https://store.steampowered.com/api/storesearch",
        {
          params: {
            cc: "us",
            l: "en",
            term: searchValue,
            limit : 10 // limit를 지정하지 않으면 디폴트가 10
          },
        }
      )
      .then((response) => {
        console.log("searchresult", response);
        setSearchResult(response);
      })
      .catch((error) => {
        console.error(error);
      });
}, []);

 

 

+) 그리고 appdetails api에서 screenshot 정보를 뽑아내는 데에도 성공했다!!

useEffect(() => {
axios
  .get(
    `https://cors-anywhere.herokuapp.com/http://store.steampowered.com/api/appdetails/`,
    {
      params: {
        appids: gameId, // 해당 게임의 id값
      },
    }
  )
  .then((response) => {
    console.log("gamedetail", response);
  })
  .catch((error) => {
    setError("Could not retrieve header image");
  });
}, []);

내가 찾는 이미지가 맞는지 확인하려고 이 상태로 그대로 url을 긁어서 검색창에 붙여넣기를 했는데, 그래서 이미지를 불러올 수 없는 거였다

url이 길어서 생긴 축약표기(...)를 폰트가 작아서 확인을 못한거ㅠㅠㅠㅋㅋㅋㅋㅋ

어쨌든 결국 해결하긴 했다..!