[Javascript 공부일지2] 1주차 - 3 (웹개발 - Ajax (에이잭스))

자바스크립트에서 웹서비스, 웹사이트를 개발하기 위해서는 서버와 통신하는 것도 중요합니다.

로컬환경에서 돌아가는 페이지를 만들수도 있지만 웹서비스라고 한다면

많은 유저들이 어디서든 서비스에 접근해서 이용이 가능해야합니다.

그 기능을 담당할 Ajax (에이잭스)를 공부해보겠습니다.

---

<서버-클라이언트 통신 이해하기 - Ajax>

Ajax란?

- 자바스크립트 페이지의 전환없이 서버에서 값을 받아올 수 있는 방법입니다.
- 서버가 클라이언트한테 데이터를 제공하는 포맷은 JSON으로 이루어져있습니다.

이번 예제실습에서는 OpenAPI로 이용할 수 있는 "미세먼지OpenAPI"를 사용해보겠습니다.

JSON이란?

- 딕셔너리와 리스트의 조합입니다. 데이터를 관리하기 위해 키와 데이터로 이루어진 리스트가 여러개 있는 것입니다.

---

<GET방식? POST방식?>

클라이언트가 요청할때 '타입'이라는 것이 존재하는데 GET과 POST입니다.

GET은 데이터 조회(READ)를 요청할때

POST는 데이터 생성(CREATE) / 변경(UPDATE) / 삭제(DELETE)요청할때 사용합니다.

GET요청을 하는 것의 단적인 예시를 찾아보면 웹사이트에서 주소창을 보면
~~~?code=11011
~~~?q=아이폰

처럼 적혀있는 것을 확인할 수 있습니다.
여기서 code나 q는 클라이언트 프로그래머와 서버 프로그래머 사이의 약속입니다.
code로 값을 주고받는 것고 q로 값을 주고받는 것입니다.

구글에서는 q=아이폰 형식으로 쓰는데 이것이 의미하는 바는 검색창에 '아이폰'을 검색했다는 뜻입니다.

---

<Ajax 시작하기>

시작하기 전에 중요한 점으로 Ajax는 jQuery(제이쿼리)를 import한 페이지안에서만 동작이 가능하다는 것입니다.

제이쿼리가 임포트된 실습예제인 '나홀로메모장 페이지'에서 Ajax를 연습해보겠습니다.

Ajax의 기본골격은 (=기본 코드)

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

이러합니다. 자바스크립트 언어 기반이며, 여기 url에 사용할 API를 입력하면 됩니다.
이번 실습에서는 미세먼지 openAPI 주소를 입력하겠습니다.
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

openAPI에 들어가있는 모든 값이 response라는 변수에 들어가게되며,
console.log(response)를 통해 console에 출력이 됩니다.

만약 서울시이므로 중구에 관련된 내용을 접근하고싶으면

리스트의 인덱스를 잘 찾고, 해당하는 인덱스를 입력해주면됩니다.

console.log(response['RealtimeCityAir']['row'][0])

로 입력하면 그 해당값들만 출력이됩니다.

---

<ajax의 기본 코드>

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


이 ajax의 기본 코드에 대해 설명하자면, 
type은 GET/POST방식을 써주는 것이고
url에 데이터의 url을 입력해주는것이고
data는 POST방식에서 쓰는 것입니다. (GET방식에서는 사용하지 않습니다.)
success는 성공했을시 실행할 함수입니다.

response도 변수명일뿐이므로 rrr,aaa처럼 아무렇게나 만들어주어도됩니다.

---

<ajax에서의 조건문 연습>

$.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)
    }
        
      
  }
})

>>

rows = 모든 행을 도는 반복동안 "구 이름과 구의 미세먼지 농도"를 알아내는 코드이다.
rows[i]번째에서 MSRSTE_NM 키를 가져와 값에 접근하는 것입니다.
MSRSTE_NM은 구 이름을 뜻하고, IDEX_MVL은 미세먼지 농도를 뜻합니다.

---

<여기서 미세먼지 값이 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);
    }
        
      
  }
})

---

<Ajax 연습>

1. openAPI를 이용해 <li> 태그로 붙여넣기

2. ajax기본골격을 function q1()에 넣고
★CTRL + ALT + L 하면 자동정렬됩니다.     

 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 = `

${gu_name} : ${gu_mise}
`

                        $('#names-q1').append(temp_html)
                    }
                }
            })
        }

이렇게만사용한다면 업데이트버튼을 누를때마다 계속해서 밑에 추가되게 됩니다.

중복을 제거하는 코드가 필요한데,

$('#names-q1')

를 function q1의 가장 위에다가

$('#names-q1').empty()

를 하여 함수시작마다 비워주는 코드가 필요합니다.

<empty()를 적용한 코드>

<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>

---

<미세먼지 농도가 70이상인 곳은 빨갛게 표시>

먼저 css안에 처럼 작성해주어

.bad{
color:red;
}

모든 요소가 일단 빨갛게 만들어준다.

이 bad를 <li>태그에 적용시키면 됩니다.

<전체코드>

 <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 > 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);
                    }
                }
            })
        }
    </script>

---

< Ajax 연습2>

이번에 참고할 OpenAPI는 따릉이 OpenAPI입니다.
http://spartacodingclub.shop/sparta_api/seoulbike

stationName = 거치대 이름
rackToCnt = 거치대 개수
parkingBikeToCnt = 거치대에 세워진 따릉이 갯수

를 의미합니다.

<전체코드>

<script>
        function q1() {
            $('#names-q1').empty();
            $.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 bike_name = rows[i]['stationName'];
                        let bike_total = rows[i]['rackTotCnt'];
                        let bike_cnt = rows[i]['parkingBikeTotCnt'];

                        let temp_html = ''

                        if (bike_cnt < 5) {
                            temp_html = `
                <tr>
                    <td class="bad">${bike_name}</td>
                    <td class="bad">${bike_total}</td>
                    <td class="bad">${bike_cnt}</td>
                </tr>`
                        } else {
                            temp_html = `
                <tr>
                    <td>${bike_name}</td>
                    <td>${bike_total}</td>
                    <td>${bike_cnt}</td>
                </tr>`
                        }

                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

---

<Ajax 연습3>

이번에는 랜덤 고양이 이미지 openapi사용
https://api.thecatapi.com/v1/images/search

여기서 cat대신에 dog도 가능한걸 확인할 수 있습니다.
https://api.thedogapi.com/v1/images/search

참고)
제이쿼리 이미지태그 src바꾸기
제이쿼리 img태그

---

<최종 과제>

1. 환율 API활용
http://spartacodingclub.shop/sparta_api/rate

2. 로딩하자마자 환율 호출 

$(document).ready(function(){
alert('다 로딩됐다!')
});

를 활용

응용)
alert대신 q1()을 쓰면 로딩되자마자 q1이 먼저 실행되는 것입니다.

이 기능을 사용하면 버튼을 눌러서 ajax call을 하는 방식이 아닌 자동호출개념을 배울 수 있습니다.

      $(document).ready(function () {
        q1()
      });

---

다음 공부일지에서는 서버에서 데이터를 관리하는 개념인 '데이터베이스(Database)' 연동에 대해서 😃포스팅해보겠습니다.

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.