[2주차] 스파르타코딩클럽 웹개발 종합반 2주차 마지막

2-10

ajax 코드를 이용해서 다양한 api 들을 가지고 실제로 서버에다 데이터를 받아서 우리 웹 사이트에 활용 해 봤다.

좀 어려운 부분이 많아 강의 끝나고 한번 더 해봤다... 

결과물. 르탄이 나와! 할때마다 이미지와 텍스트가 바뀐다!

 

2-11 2주차 강의 종료 및 숙제

벌써 2주차 강의가 끝났다! 정말 많이 배우고 해봤는게 벌써 끝났다.

숙제는 저번에 내주신 숙제에 현재 기온을 서버에서 받아 새로고침하면 바로바로 실시간 온도가 나오게끔 표시하는 숙제였다.

현재기온: 10.61도라고 표시 해 주고 있다!

 

그동안 했던 것들과는 달리 버튼을 클릭했을 때 서버에서 데이터를 받아오는게 아닌 새로고침(로딩)이 완료되면

그 즉시 서버에서 데이터를 받아와야 해서 이건 따로 배우지 않아 강사님이 가르쳐 주셨다.

$(document).ready(function(){

그 후에 제일 위에 배너에 현재 기온을 표시 해 주고 00.0 < 이게 데이터를 받아야 하니 id값을 생성 해 준다.

<p>현재 기온: <span id="temp">00.0</span>도</p>

그리고 ajax 함수를 써주고 url 값에 데이터를 받아올 url을 적은 뒤,

먼저 console.log(response) 로 데이터를 잘 받아오는지 확인 뒤 

데이터 값을 받을 사이트에서 temp란 값을 let 함수를 이용해 temp를 정의 한 후

텍스트 값을 받아오는 함수인 $("#아이디값").text("바꾸고 싶은 텍스트"); 를 이용해서  코드를 적으면 끝!

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
        data: {},
        success: function (response) {
            let temp = response['temp']
            $('#temp').text(temp)
        }

    })
});

퀴즈가 숙제보다 훨~~씬 어려웠던 것 같다.

그리고 너무 자세하게 설명 해 주시며 강의자료에 진짜 도움이 되는 정보들이 많아서 쉽게쉽게 푼 것 같다!

다음 3주차는 파이썬에 대해 배우신다고 하신다.

기대된다 ㅋㅋ