Ajax로 환율 API 적용해보기

전에 포스팅했던 쇼핑몰 페이지에 실시간 환율을 적용해보겠습니다.
이전 포스트 보러가기

Ajax

먼저 Ajax란 javascript의 라이브러리중 하나이며 전체 페이지를 새로 고치지 않고도 페이지 일부만 데이터를 로드하여 웹페이지의 속도를 향상시킬 수 있는 기술입니다.

Ajax 기본 골격

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "여기에 url을 입력",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둡니다)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

여기서 주의해야 될 점은 Ajax는 jQuery를 import한 페이지에서만 동작이 가능합니다.

jQuery

jQuery는 HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리 입니다. 그렇기 때문에 jQuery를 사용하기 위해서는 import를 해야 합니다.(head 태그 안에 삽입합니다.)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

jQuery와 Javascript의 코드를 비교해보면

//Javascript
document.getElementById("element").style.display = "none";

//jQuery
$('#element').hide();

jQuery를 사용해서 코드를 보다 직관적으로 쓸 수 있습니다.

API 적용하기

본격적으로 쇼핑몰 페이지에 환율 API를 적용해보겠습니다.
실시간 환율 정보를 담고있는 API를 확인합니다.

http://spartacodingclub.shop/sparta_api/rate

body태그 안에 작성합니다.

<p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>

script태그 안에 작성합니다.

<script>
    //문서가 준비되면 get_rate()함수를 실행합니다.
    $(document).ready(function () {
        get_rate();
    });

    function get_rate(){
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/rate",
            data: {},
            success: function (response) {
                //환율 api의 rate를 받아와 now_rate로 저장합니다.
                let now_rate = response['rate'];
                //id가 now_rate인 곳을 now_rate로 변경합니다.
                $('#now-rate').text(now_rate);
            }
        })
    }      
</script>

결과

쇼핑몰 페이지에 실시간 환율 정보가 적용된 것을 볼 수 있습니다.

이 글은 스파르타코딩클럽의 강의를 참고로 작성하였습니다.