웹의 동작 개념 : Web API, JSON

웹의 동작 개념

우리가 보는 웹페이지는 모두 서버에서 미리 준비해 두었던 것을 받아서 그려주는 것이다.

즉, 브라우저가 하는 일은

 

1. 요청을 보내고
2. 받은 HTML 파일 또는 데이터를 그려준다.

HTML을 받는 경우 웹의 동작 개념

F12(검사)에서 받은 HTML을 아무렇게나 수정 가능하나, 새로고침을 누르면 수정한 내용이 그대로 유지되지 않고 원래의 HTML이 뜬다.
그 이유는 브라우저는 받은 HTML 파일을 그려주는 것이기 때문에 새로고침을 누르면 요청을 새로 보내 서버가 보내준 원래 버전의 HTML을 새로 띄워주기 때문이다.

 

위에서 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려준다. 라고 했는데,
요청은 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보낸다.

예를 들어 https://naver.com/ 은 "naver.com"이라는 이름의 서버에 있는 "/" 창구에 요청을 보낸 것이다.

 

+) Web API

Web Application Programming Interface의 줄임말로, 서버에 요청을 보내고 응답을 받기 위해 정의된 명세를 뜻한다.

보통 API라고 하면 Web API를 의미한다.

 

브라우저에 주소를 치고 엔터를 누르면 HTML 정보를 보내줄 때, 주소가 바로 API이다.

엔터를 치면 '요청'이 가고, 서버는 '응답'으로 HTML을 보내주는 것이다.

API는 응답으로 HTML 전체가 아니라 데이터만 따로 정리해 보내줄 수도 있다. (JSON 형식으로)

데이터만 받는 경우 웹의 동작 개념

웹페이지는 모두 서버에서 미리 준비해두었던 것을 받아서 그려주는 것으로,

브라우저는 요청을 보내고 받은 HTML 파일 또는 데이터를 그려준다 라고 했다.

 

사실 HTML만 내려줄 때보단 데이터만 내려줄 때가 훨씬 많다. HTML도 줄글로 쓰면 데이터이긴 하다. 

예를 들어 티켓팅을 할 때, 웹페이지에서 좌석이 나갈 때마다 페이지가 리프레시 된다면 ... 포도알이 차오를 때마다 새로고침 된다면 !! 굉장히 난감할 것이다. 이럴 때 데이터만 받아 웹페이지에 끼우게 된다.

 

데이터는 아래와 같은 JSON 형식으로 내려온다.

 

JSON

JavaScript Object Notation의 줄임말로, 브라우저-서버 간 통신에서 데이터를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷.

본래는 자바스크립트에서 파생되었으나 편의성 덕분에 모든 언어/플랫폼에서 사용하게 되었다.

 

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

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

 

JSON 형식

JSON은 자료형 리스트와 딕셔너리를 섞어놓은 것처럼 생겼다.

RealtimeCityAir 라는 키 값에 딕셔너리형 value가 들어있고, 그 안에 row라는 키 값에는 리스트형 value가 들어있다.