[JavaScript] 서버와 통신하기 : API, JSON, Ajax

서버와 통신하기 위해선 API, JSON, Ajax 등에 대해 알아야한다.

 

API란 서버와 클라이언트 사이의 데이터 요청을 위해 열어놓은 창구라고 할 수 있다.

클라이언트에서 서버로 요청할 때, 타입이 존재하는데 대표적인 예로는 GET과 POST가 있다.

• GET : 데이터 조회를 요청할 떄 사용
• POST : 데이터 생성, 변경, 삭제를 요청할 때 사용

 

클라이언트가 서버에게 데이터를 요청할 때, 서버가 전달해주는 데이터의 포맷이 JSON이다.

JSON은 자료형 구조 딕셔너리(Dictionary)와 유사하다.

key와 value로 이루어져 있으며 데이터의 정보가 담겨있다.

크롬 익스텐션 JSONView를 설치하면 JSON 파일을 가독성 좋게 볼 수 있다.

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

JSONView

 

Ajax란 자바스크립트를 사용한 비동기 통신으로, 클라이언트와 서버 간에 데이터를 주고받는 기술이다.

Ajax는 jQuery를 임포트한 페이지에서만 작동한다.

Ajax의 기본 골격은 다음과 같다.

$.ajax({
  type: "GET",
  url: "API 주소",
  data: {},
  success: function(response){ 
    console.log(response)
  }
})

type에는 서버로 요청할 때의 타입을 의미하며 GET, POST 등이 있다.

위의 예시는 GET 타입이기 때문에 data가 비어있지만

POST 타입일 경우 data에 서버에 넘겨줄 데이터를 작성한다.

url 주소에 API 주소를 입력하면 데이터가 response에 저장된다.

success : function(response) 안에 서버로부터 받은 데이터를 어떻게 처리할지 작성해주면 된다.