개발_TIL | 2022-04-19 (2)

오늘도 힘차게 달려보았다.

▷ jQuery 사용하기

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

jQuery는 TML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것이다.

Javascript로도 구현할 수 있는 것들을 보다 보기 쉽게 해주는 라이브러리이다.

---

▷서버-클라이언트 통신 이해

1) 서버 -> 클라이언트: "JSON"에 대해 알아보았다.

   JSON은 Key:Value로 이루어져 있어서 자료형 Dictionary와 매우 유사하였고 크롬 익스텐션 JSONView을 설치하여

   보다 깔끔하게 볼수 있었다.

2) 클라이언트 -> 서버: GET 요청

   클라이언트가 서버에 무언가를 요청할 때, 타입이라는 것이 존재하는데 GET 과 POST라는 것이 있었다.

   GET은 보통 데이터 조회(Read)를 요청할 때 사용하는 것이고,

   POST는 보통 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 사용하는 것이다.

---

▷Ajax 시작하기

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

Ajax 코드 기본 골격! 여기서 type은 GET 방식으로 요청한다는 의미이고

data에 빈 공간은 요청하면서 함께 줄 데이터를 입력한다.(GET 요청할 땐 비워둔다고 한다.)

서버에서 준 결과를 response라는 변수에 담아 콘솔창에 찍어보았다.

=>실시간 모든 구의 미세먼지 값 체크!

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log(gu_name, gu_mise);
    }
  }
});

서울의 모든 구 미세먼지의 OpenAPI를 사용하여

http://spartacodingclub.shop/sparta_api/seoulair

미세먼지 값을 정리하는 연습을 하였다. 실시간 미세먼지 값을 정리하고 나서 코딩으로 하는

사용 가능한 실시간 미세먼지 수치 확인하는 자료를 만들고 나니 뭔가 뿌듯함이 생겼다.