항해99) 웹종2주차 서버-클라이언트 통신~Ajax

* 서버-클라이언트 통신 이해하기

1) 서버→클라이언트: "JSON"

JSON(JavaScript Object Notation)?

- 일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식.

- 클라이언트가 사용하는 언어에 관계 없이 통일된 데이터를 주고받을 수 있도록, 일정한 패턴을 지닌 문자열을 생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장, 표시할 수 있게 된다.

- Key:Value로 이루어져 있음자료형 Dictionary와 아주- 유사)

 

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

✨API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재. * GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회 GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져감. http://naver.com?param=value¶m2=value2 * POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정 POST 요청은, data : {} 에 넣어서 데이터를 가져감. data: { param: 'value', param2: 'value2' },

 

 

---

* GET 요청 방식

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

위 주소는 "?" 기준 크게 두 부분으로 쪼개짐.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호]

* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
* 영화 정보: code=161967

🍒GET 방식으로 데이터를 전달하는 방법 ? : 여기서부터 전달할 데이터가 작성된다는 의미입 & : 전달할 데이터가 더 있다는 뜻 예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8 👆🏻위 주소는 google.com의 search 창구에 다음 정보를 전달: - q=아이폰 (검색어) - sourceid=chrome (브라우저 정보) - ie=UTF-8 (인코딩 정보)

💡여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은 누가 정하는 것? → 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속!! 프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?" 백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"

---

* Ajax 시작하기

1] Ajax 시작하기

1) Ajax 기본 골격 및 해설

Ajax(Asynchronous JavaScript and XML)?

- JavaScript의 라이브러리중 하나

- 비동기식 자바스크립트와 xml을 뜻하는데, 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

- JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술

👉🏻 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것

$.ajax({
  type: "GET",  // GET 방식으로 요청할게!!
  url: "http://spartacodingclub.shop/sparta_api/seoulair",  //요청할 url
  data: {},  // 요청하면서 함께 줄 데이터 (GET 요청시엔 비우기)
  success: function(response){  // 성공하면 response 변수값에 서버의 결과 값을 담아서 함수를 실행한다.
    console.log(response)  // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

※ 참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능. 즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 이런 에러 뜸(Uncaught TypeError: $.ajax is not a function → ajax라는 게 없어!)

 

 

2) Ajax 통신의 결과값을 이용해보기

방금 1)에서 했던 Ajax 통신을 좀 더 발전시켜보자!

미세먼지 OpenAPI:: ★http://spartacodingclub.shop/sparta_api/seoulair★ ↳API(Application Programming Interface)? API는 점원과 같은 역할을 함. API는 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면 요리사(응용프로그램)와 상호작용하여 요청된 메뉴(명령에 대한 값)를 전달.쉽게 말해, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체

- 개발자 도구 콘솔에 특정 구의 미세먼지 값 찍어보기(얘는 실습할 때, 걍 아무 파일에다가 위의 서울시미세먼지API 붙여놓고 콘솔창 켜서 함)

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function(response){
		// 값 중 도봉구의 미세먼지 값만 가져와보기
		let dobong = response["RealtimeCityAir"]["row"][11];
		let gu_name = dobong['MSRSTE_NM'];
		let gu_mise = dobong['IDEX_MVL'];
		console.log(gu_name, gu_mise);
  }
})

 

 - 모든 구의 미세먼지 값 찍어보기

해설))

1. 미세먼지 데이터가 어디에 있는지 찾기

위 그림과 같이 RealtimeCityAir > row 에 미세먼지 데이터가 들어있으니 얘를 꺼내보자

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

2. 반복문으로 구 데이터를 출력해보기

row의 값을 mise_list에 담았으니, 반복문을 이용해보겠습니다!

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

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

구 이름 키 값인 "MSRSTE_NM", 미세먼지 수치 키값인 "IDEX_MVL"의 밸류를 출력

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