API 사용하기

api 사용

html, css, 자바스크립트만을 이용해서 작은 프로젝트들을 따라서 해보고 있는데

환율 사이트의 open api를 이용해 간단히 돈의 환전액을 알려주는 사이트를 만들고 있었다

초안

처음에는 사이트를 켰을 때 환율 데이터를 받아와서 그 값을 저장한 뒤 내가 원하는 나라에 맞게, 내가 가진 나라의 돈을 입력하면

저장한 데이터를 이용해서 환율을 계산하려고 했다

function getRate() {
  const request = new XMLHttpRequest();
  request.onreadystatechange = function (){
      if(request.readyState === XMLHttpRequest.DONE){
          if(request.status === 200){
              const data = JSON.parse(request.response);
              console.log(data);
          }
      }
  }
  request.open('GET',url);
  request.send();

}

다행히 XMLHttpRequest를 한번 사용해 본 적이 있어서 어렵지않게 데이터를 받아왔고 자바스크립트 객체로 변환해서 저장할 수 있었다

이제 서버와 한번만 통신해서 데이터를 저장하고 저장한 뒤에는 서버와 통신할 일이 없게끔 페이지를 제작하려고 했다

문제점

let data;

function getRate() {
      ...
      data = JSON.parse(request.response);
      ...
    }
  request.open('GET',url);
  request.send();
}

하지만 이렇게 하면 data에는 아무것도 담기지 않는다

XMLHttpRequest가 비동기적으로 작동하기 때문에 데이터를 바로 담아올 수 없는 것이었다

해결

이리저리 찾아보니 XMLHttpRequest를 동기적으로 사용하는 법이 있었다

서버에 요청하는 메소드인 open 메소드에 3번째 인자가 있는데

이 3번째 인자는 명시하지않으면 true로 전달되고 그것이 곧 비동기적으로 통신하라는 뜻이다

 request.open('GET',url, false);

와 같이 3번째 인자를 false로 바꿔서 메소드를 호출하면 동기적으로 작동하는데 데이터 가져올 때 까지 아무것도 못 하게된다

사실 이 방법을 알려준 사람은 이렇게 하는건 매우 비추천한다고 하면서 가르쳐줬다

그도 그럴것이 서버와 통신을 동기적으로 하는 것은 매우 비효율적이니까..

서버에서 응답을 받아올 때 까지 사용자가 아무런 동작도 못 하게되었다

대체안

그래서 그냥 비동기적으로 통신하되 환율 데이터가 필요할 때마다 서버와 통신하게끔 전체적인 코드를 수정해서 프로젝트를 끝내기는 했는데

사실 이게 맞는지 모르겠다

내가 만드는 사이트는 환율의 실시간 데이터가 필요한 게 아닌데 입력값이 바뀌는 순간마다 서버와 통신하는 게 효율적인 걸까?

그렇기 때문에 동기적일지라도 그냥 페이지를 로드할때 처음에 받아온 데이터를 계속해서 재사용하는게 맞지않을까.. 하는 고민을 했지만

동기적으로 사용하는 방법은 이미 알았고 사용할 수 있을 것 같으니까 앞으로 자주 사용할 비동기 통신을 연습했다는 것에 의의를 두기로 했다