스파르타코딩 웹개발 2주차 서버-클라이언트 통신

#서버->클라이언트: JSON이해하기

• 자바스크립트로 페이지 전환없이 서버에서 값을 받아 올 수 있는 방법
• 서버에서 클라이언트한테 '여기로 요청해~'라고 열어놓은 창구 API에 대해 이해필요
• API자체는 보기 어렵기 때문에 Jsonview를 설치하면 좀 더 깔끔하게 볼 수 있음 
• Json형식은 딕셔너리 + 리스트 조합과 똑같음 
• 리스트안에 딕셔너리 여러개 들어 있는건 자바스크립트에서 연습한 for문의 전형적인 패턴

 

#클라이언트->서버 : GET요청 이해하기

• API는 은행창구와 같음. 같은 예금 창구에서도 개인고객이나 기업고객이냐에 따라 가져와야하는 것/ 처리해주는 것이 다른 것처럼, 클라이언트가 요청할 떄도 '타입'이라는게 존재 
• GET -> 데이터조회(read) 요청 할 때
• POST -> 데이터 생성(creat), 변경(update), 삭제(delete) 요청 할 때
• 브라우저에서 엔터를 지는 행위 자체가 GET요청
• 우리가 웹에서 쓰는 주소를 보면, 서버주소, 그리고 프론트와 백엔드가 정한 정보를 주는 코드로 구성되어 있음 

 

 

# Ajax 시작하기 

• 주의! Ajax는 jQuery를 임포트한 페이지에서만 동작가능하다
• 기본 틀은 외우지않고 복사해서 사용하면 됨 
• url 부분에 필요한 ajax주소를 넣어주면 로드 됨

$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})

• 성공하면 response 값에 서버의 결과 값을 담아서 함수를 실행함 
• 이렇게 값을 불러오면 내가 필요한 함수를 만들어서 데이터를 불러 올 수 있게 된다 
• 아래처럼 반복문을 이용해서 원하는 데이터 값을 뽑아 낼 수 있음 

 

# Ajax 연습하기

• for 문을 사용해서 [업데이트]버튼을 누르면 데이터가 쫙 업데이트 되도록 만들기
• 업데이트 버튼을 누를 때 마다 API를 받아와서 업데이트 해주도록 만들기

 

 <script>
        function q1() {
            $.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)
                    }

                }
            })
        }
    </script>

 

• 여기서 리스트 형식으로 업데이트 버튼을 누를 때 마다 새롭게 붙게 해주려면
• 아래처럼 temp_html형식으로 동적버튼을 만들어주면 됨 

  function q1() {
            $.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)
                    }
                }
            })
        }

• 하지만 여기서 계속 똑같은 리스트가 연달아 붙는 상황이 생기기 때문에 누를 때 마다 원래 있던 리스트를 지우고 새로운 리스트를 업데이트 하도록 만드는게 더 좋음 

$('#names-q1').empty() //ajax 시작하기 전에 넣어서 원래 있던 리스트를 비워주기

 

 

#미세먼지 수치가 70이상인 곳은 빨갛게 만들어 보기

• css를 이용해서 선택적으로 빨간색 폰트를 입히면 되겠지
• <style></style>에 bad라는 걸 만들어 줘서 빨간색 폰트를 입히는데 IF문을 써서 미세먼지 70 이상이면 빨간색으로 변하도록 스타일을 입히면 됨 

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>70){
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        }else{
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }
                        $('#names-q1').append(temp_html)
                    }
                }
            })
        }

 

 

#따릉이 open API 

• 미세먼지 API 에서 했던것과 똑같은 구조

function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response['getStationList']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['stationName']
                        let rack = rows[i]['rackTotCnt']
                        let bike = rows[i]['parkingBikeTotCnt']

                        let temp_html = `  <tr>
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</td>
                                            </tr>`
                    }
                }
            })
        }

• temp_html을 붙여야 하는 곳은 어디일까 <tr></tr> 감싸고 있는 <tbody id = "names-q1">에 붙여줘야 함

  $('#names-q1').append(temp_html)
  // let temp_html밑에 적어주자