서버(server) - 클라이언트(client) 통신 이해하기

Javascript로 페이지 전환 없이 서버에서 값을 받아올 수 있는 방법은 무엇일까?

그전에 API에 대해서 일단 무엇인지 알아야 한다. Json이 뭔지도 알아야하고.

 

API?

클라이언트는 서버에게 여러 요청을 보낸다. 그럼 서버는 요청에 따라 적합한 처리를 해서 응답을 준다.

하지만 컴퓨터는 한글을 모르기에 어떤 요청이 '사진 올려줘'의 요청인지, '로그인 시켜줘'의 요청인지 알 수 없다.

요청을 구분할 수 있도록 하는 체계가 바로 API이다. 클라이언트, 서버와 같은 서로 다른 프로그램에서 요청과 응답을 주고 받을 수 있게 만든 체계인 것이다.

 

Json?

그러면 이런 요청과 응답을 할 때는 데이터가 담길 수 있기에 데이터를 넣을 수 있는 '기능'또한 함께 개발해야 한다. 그런데 데이터를 넣을 수 있는 '기능'에는 여러가지 형식이 있다. 형식은 어떻게 만드냐에 따라서 무한대에 가까울 수 있다. 그럼 그 형식을 처리하기 위한 코드를 또 적어줘야 하는데, 만약 100개의 다른 형식으로의 요청이 있다면, 그 100개의 형식에 대응하는 코드를 적어줘야 한다. 아주 비효율적이니 "하나의 형식을 통일되게 사용하면 어떨까?"에서 출발하였다. 과거엔 XML이라는 형식이 널리 쓰였으나 현재 가장 유명한 형식이 바로 Json이다.

 

Json은 중괄호로 시작하며, key와 value로 이루어져 있다. 그 키와 값은 '콜론(:)'으로 구분한다.

 

예를들면

{
	Key1: value1,
	Key2: value2,
}

이런 형태이다.

 

배열(array)이라는 형식이 필요할 때는 다음과 같다.

{
	Key1: value1,
	Key2: value2,
	Key3: [ value3, value4, value5 ]
}

 

예시를 들어 보자면 다음과 같을 수 있다.

{
	“category”: “마법”,
	“element”: “얼음”,
	“spells”: [ “아이스 볼”, “아이스 볼트”, “프리징” ]
}

추가로 과거에 포스팅해두었던 내용이 도움이 된다. (https://spell.tistory.com/entry/SQL-study-start)

CRUD의 관점에서 생각하는 것이 필요하다.

Create(생성해줘): POST
Read(불러와 줘): GET
Update(바꿔줘): PUT(전체) / PATCH(일부)
Delete(지워줘): DELETE

 

 

이제 JsonView라는 크롬에서의 확장 프로그램을 설치해볼꺼다.

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

JSONView

 

그리고 다음은 미세먼지 Open API인데, 기존 크롬창으로 보면 다음과 같이 나온다.

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

 

아주아주아주 보기 힘들다. 그래서 이를 보기 쉽게 JsonView라는 확장 프로그램을 설치하는 것이다.

설치 후 해당 페이지를 새로고침 하면 다음과 같이 조금 더 알아보기 쉽게 볼 수 있다.

 

 

일단 Json은 딕셔너리와 리스트의 조합과 생김새가 아주 비슷하다.

 

전체를 접어보면

RealtimeCityAir라는 키에 딕셔너리가 담겨있다.

 

 

그리고 안에 list_total_count에 25라는 value가, RESULT라는 key에 딕셔너리가, row라는 key에 리스트가 들어있음을 알 수 있다.

 

 

row를 추가로 살펴보면

해당 그림과 같이 딕셔너리 형태의 자료가 리스트형식으로 들어가 있음을 알 수 있다.

이는 Javascript를 학습할 때 for문의 전형적인 패턴, 반복문의 전형적인 패턴이 기억난다.

 

아무튼...

Create(생성해줘): POST
Read(불러와 줘): GET
Update(바꿔줘): PUT(전체) / PATCH(일부)
Delete(지워줘): DELETE

CRUD개념에서 GET요청은 보통 통상적으로 정보를 조회할 때 자주 쓴다.

 

우리는 사실 GET요청의 고인물들이다.

왜냐하면 브라우저에서 엔터를 치는 행위 자체가 GET요청이다.

 

Naver의 영화 기생충관련 페이지를 보고 확인해보자.

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

보라색 부분은 서버의 주소다. 은행으로 치면 OO은행 OO지점 같은 것이다.

녹색 부분은 OO지점 안에서의 창구 이름정도로 생각해보면 이해가 쉽다. (입출금 창구, OO창구 등등)

그 후 붉은색의 '?'가 보인다. 이게 무슨 말 이냐면, 이곳을 기점으로 고객이 가지고 가는 데이터다.

해당 예시 같은 경우에는 code라는 값을 가져가고 있다. 해당 값을 다른 것 으로 입력하면 다른 페이지가 나온다.

(해당 데이터 값에 대한 주민등록번호 등으로 생각해보자)

 

그럼 이 code는 누가 정했는가? 요청을 하는 클라이언트 프로그래머와 요청을 받는 서버 프로그래머 사이에서 미리 약속을 한 것이다.

"너 code로 나한테 값을 줘!"
"난 code로 너에게 값을 받을께!"

 

다른 페이지도 마찬가지이다.

google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

'?'이후 여기서부터 전달할 데이터가 작성된다는 의미이다.

'&'는 전달할 데이터가 더 있다는 뜻이다.

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

 

 

---

 

 

---