👩🏼‍💻TIL : 3. 서버-클라이언트 통신

0. Web API

Web Application Programming Interface의 줄임말로, 서버에 요청을 보내고 응답을 받기 위해 정의된 명세를 뜻합니다. 보통 API라고 하면 Web API를 의미합니다.

 

1. JSON

JavaScript Object Notation의 줄임말로, 브라우저-서버 간 통신에서 데이터를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷입니다. 본래는 자바스크립트에서 파생되었지만 편의성 덕분에 모든 언어/플랫폼에서 사용하게 되었습니다.

서울시 Open API

 

2. GET요청

 * GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회

* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

 

3. Ajax란?

Asynchronous JavaScript and XML에서 따온 말로, 비동기적인 웹 애플리케이션의 제작에 쓰이는 웹 개발 기법이다.

 

4. Ajax 기본 골격

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


$.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) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다. http://naver.com?param=value¶m2=value2

POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다. data: { param: 'value', param2: 'value2' },

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  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);
    }
  },
});