proxy와 비동기

메이플스토리 api를 활용하여 프로젝트를 준비하고 있던 도중, 문제가 발생하면서 해당 문제를 해결하면서 알게된 React.js에 대해서와 Proxy에 대해서 정리해봤습니다.

※ 프론트를 주로 하는게 아니다 보니 의미만 이해해주시면 감사합니다.

 

메이플스토리 api를 활용해서 데이터를 긁어오고자 하였으나, CORS오류가 발생하였습니다.

제가 개발하는 서버의 주소는 localhost:3000인데, 메이플스토리 api의 첫 주소는 public.api.nexon.com 이였습니다.

그러다보니 CORS오류가 발생하여 해결방안을 찾아보다가 Proxy에 대해 알게 되었습니다.

const submitData = (e) => {
    e.preventDefault();
    fetch(
      "https://public.api.nexon.com/openapi/maplestory/v1/cube-use-results?count=100&date=2023-01-25",
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json; charset=utf-8",
          Authorization: key넘버,
        },
      }
    )
  };

이런식으로 작성되어 있던, api주소를 

 

const submitData = (e) => {
    e.preventDefault();
    fetch(
      "/openapi/maplestory/v1/cube-use-results?count=100&date=2023-01-25",
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json; charset=utf-8",
          Authorization: key넘버,
        },
      }
    )
  };

앞에 url을 지우고,

package.json 파일에

"proxy": "https://public.api.nexon.com"

을 추가해주면됩니다.

이렇게 설정을 해주게 되면 API 서버와 동일한 도메인이 되어 CORS 정책 해결 및 Access-Control-Allow-Origin 의 허용을 받을 수 있습니다.

 

단, 배포시에는 원래 상태로 바꿔주셔야지만 가능합니다.

 

자세한 내용은 해당 블로그를 참조하시기 바랍니다.

https://velog.io/@silent10z/React-CORS-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0

React CORS 에러 해결

 

비동기

fetch로 api를 호출하면서 테스트를 하기 위해 console.log을 활용해서 데이터가 잘 가져와 졌는지 확인하면서 알게된 내용입니다.

.then((res) => res.json())
      .then((res) => {
        console.log(res);
        console.log(res.cube_histories);
        setgetData(res.cube_histories.reverse());
        console.log(getData);
      });

res로 데이터들이 가져오는지 확인하고,

res.cub_histories로 원하는 정보들이 가져오는지 확인하고,

시간 순서대로 정렬하기 위해 res.cube_histroies.reverse()로 뒤집에서 setgetData로 useState되어 있는 객체에 저장하였습니다.

그 후, getData로 데이터를 가져오고자 하였으나, 데이터들이 없다고 표시되었습니다.

그러나, 만들었던 표에서는 데이터들이 정상적으로 나오는 것을 확인한 저는 친한 프론트 개발자분께 질문을 하였습니다.

 

셋호출 ===============> 셋완료
            일단 밑에 코드들 수행

then으로 실행된 셋이 실행이 되고, 셋이 완료되기 전에 수행된 내용들은 비동기 처리 되어 출력을 통해 확인하고자 하였으나, 확인이 안되고, 셋이 끝난 후에 확인이 가능하도록 처리되는 것을 확인했습니다.

 

자세한 내용은 해당 블로그를 참조하시기 바랍니다.

https://chanhuiseok.github.io/posts/js-6/

JavaScript - 자바스크립트 fetch와 async/await

https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop