1. 서버-클라이언트

1-1. 서버-클라이언트 통신

클라이언트

: 서버에게 서비스를 요구하는 사용자

서버

: 사용자의 요청으로 서비스를 수행하는 서비스 제공자

서버-클라이언트 통신

1. 클라이언트는 서버가 만들어 놓은 API에 요청을 보낸다.

예) https://naver.com/
→ 이름이 "naver.com"인 서버에 있는 "/"창구에 요청을 보낸 것

2. 서버가 요청을 받아들이면 서비스를 수행한다.

예) 웹의 동작 개념 (HTML 파일 전달)
1. 클라이언트가 서버에 웹 정보를 요청하면
2. 서버가 HTML 파일을 클라이언트에게 전달한다.
   → 데이터만 보낼 경우 JSON 형식으로 보냄
3. 크롬, 익스플로어 등의 브라우저가 HTML 파일을 브라우저에 그려준다.

1-2. 데이터 요청 방식

1) GET

• 통상적으로 데이터 조회(Read)를 요청할 때 사용하는 방식
  예) 영화 목록 조회

JSON

• 서버에서 클라이언트로 데이터를 보낼 때 사용하는 형식
• Javascript 객체 표기법의 부분집합

1. JSON 데이터는 Key:Value 형태로 이루어진다.
2. JSON 데이터는 쉼표(,)로 나열한다.
3. 딕셔너리 형: 객체(object)는 중괄호 {} 로 둘러쌓아 표현한다.
4. 리스트 형: 배열(array)은 대괄호 [] 로 둘러쌓아 표현한다.

{
  RealtimeCityAir: {
    row: [
       {
          parkingBikeTotCnt: "8",
          rackTotCnt: "22",
          shared: "36",
          stationId: "ST-4",
          stationLatitude: "37.55564880",
          stationLongitude: "126.91062927",
          stationName: "102. 망원역 1번출구 앞"
       }
       {…},
       {…},
       {…},
       {…}
    ]
  }
}

GET 방식으로 데이터를 전달하는 방법

• ? : 여기서부터 전달할 데이터가 작성된다는 의미
  ? 앞: 서버 주소, ? 뒤: 전달한 데이터
• & : 전달할 데이터가 더 있다는 뜻

예) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰            (검색어)
sourceid=chrome    (브라우저 정보)
ie=UTF-8           (인코딩 정보)

2) POST

• 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 사용하는 방식
  예) 회원가입, 회원탈퇴, 비밀번호 수정

---

2. Ajax

2-1. Ajax란?

• 자바스크립트의 라이브러리 중 하나로 웹 페이지 전체를 새로고침 할 필요없이 일부분의 데이터만 가져올 수 있게 하는 것

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

<Ajax 코드 해설>
$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

<GET,POST>
- GET 요청은, url 뒤에 아래와 같이 붙여서 데이터를 가져간다.
http://naver.com?param=value&param2=value2 
- POST 요청은, data : {} 에 넣어서 데이터를 가져간다.
data: { param: 'value', param2: 'value2' },

2-2. Ajax 연습

• 요청한 url에 담긴 정보 개발자 도구 콘솔에 출력

<script>
  $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {},
    success: function (response) {
      console.log(response)
    }
  })
</script>

• 모든 구의 미세먼지 값 출력하기

1. 미세먼지 데이터가 어디에 있는지 찾기
   → 미세먼지 수치는 IDEX_MVL, RealtimeCityAir > row 에 위치함

2. 리스트 선언해서 row 값 담아 출력하기

<script>
  $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {},
    success: function(response){
          let mise_list = response["RealtimeCityAir"]["row"]; // 꺼내는 부분!
          console.log(mise_list);
    }
  })
</script>

3. 반복문으로 구 데이터 출력하기

<script>
  $.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];
        console.log(mise);
      }
    },
  })
</script>

4. 구 데이터에서 구 이름, 미세먼지 수치만 골라내서 출력하기

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