코딩 도전기_08_210707

학습 내용

- 서버/클라이언트 통신의 개념

• API : 서버가 클라이언트를 위해 열어놓은 자료 요청 창구

• JSON : API를 주고 받을 때 JSON 활용

• JSON은 자료형 Dictionary와 유사

• 클라이언트가 서버에게 요청하는 자료에 따라 타입이 다름
  : GET 요청, POST 요청

• GET : 데이터 조회 (검색, 조회 등)

• POST : 데이터 생성, 변경, 삭제 (회원가입, 정보 변경 등)

- Ajax

• Ajax란?
  : GET 요청, 페이지 전환 없이 서버에서 값을 받아올 수 있는 방법

• Ajax를 사용하기 위한 기본 뼈대 필요

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

• open API와 Ajax를 활용하여 서울시의 실시간 구 이름과 미세먼지 값 구하기

(1) open API 주소 가져오기
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

(2) Ajax 템플릿에 주소 붙여넣기

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
  }
})

(3) 반복문으로 구(gu_name), 미세먼지 값(gu_mise) 구하기

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
  let rows = response['RealtimeCityAir']['row']
  for (let i = 0; i < rows.length; i++) {
  let gu_name = rows[i]['MSRSTE_NM']
  let gu_mise = rows[i]['IDEX_MVL']
  console.log(gu_name,gu_mise)
  }
  }
})

(4) 미세먼지 수치가 70보다 작은 구, 미세먼지 값만 구하기

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
  let rows = response['RealtimeCityAir']['row']
  for (let i = 0; i < rows.length; i++) {
  let gu_name = rows[i]['MSRSTE_NM']
  let gu_mise = rows[i]['IDEX_MVL']
  if (gu_mise <= 70) {
   console.log(gu_name,gu_mise)
  }
  }
  }
})

• jQuery와 Ajax 이용해 업데이트 버튼을 누를 때마다 구 이름, 미세먼지 정보 받아오기

(1) Ajax 뼈대에 오픈API 주소 넣기

<script>
function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) 
                 })
        }
</script>

(2) 반복문으로 구 이름, 미세먼지 값 구하기

<script>
function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) {
                    let rows = response['RealtimeCityAir']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']
                        }
                }
            })
        }
</script>

(3) 인터넷 창에 띄우기 위해 temp_html 생성, 붙여주기

<script>
function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) {
                    let rows = response['RealtimeCityAir']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']
                        
                        let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        $('#names-q1').append(temp_html)
                        }
                }
            })
        }
</script>

(4) .empty()이용해 버튼 누를 때마다 지웠다가 붙이도록 설정

<script>
$('#names-q1').empty()
function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) {
                    let rows = response['RealtimeCityAir']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']
                        
                        let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        $('#names-q1').append(temp_html)
                        }
                }
            })
        }
</script>

• 미세먼지 수치가 70 이상인 곳은 빨간색으로 보이게 설정하기

(1) CSS 만들기

<style>

.bad {
  color : red;
}

</style>

(2) if문으로 70이상 / 70미만인 경우 나누기

  <script>
 function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) {
                    let rows = response['RealtimeCityAir']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']

                        let temp_html = ``
                        if (gu_mise > 50) {
                          temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                          temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }
                        $('#names-q1').append(temp_html)
                    }
                }
            })
        }
</script>