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

Ajax를 시작하기에 앞서 서버-클라이언트 통신을 먼저 이해해보고자 합니다.

 

서버 -> 클라이언트 : JSON  과 클라이언트 -> 서버 : GET 요청으로 볼 수 있는데 

 

JSON을 먼저 보여드리면 이런 형태입니다.

 

(참고로 OpenAPI 자체를 올려드릴 수는 없으므로, 공공데이터포털기관에서 API를 가져오는 방법도 존재하니 검색해보시면 좋을거 같습니다. 현재 사진은 배운 수업 자료의 일부분 입니다.)

 

OpenAPI 미세먼지 부분

이 형태를 좀 더 나눠서 보여드리면 다음과 같습니다.

JSON 사진 확대

다른 언어들을 포함에서 딕셔너리를 배우셨다면 형태가 많이 익숙하실껍니다.

 

즉, JSON은 Key:Value로 이루어진 딕셔너리라는 것을 알 수 있습니다.

 

( 혹시 딕셔너리가 무엇인지 잘 모르시는 분들은 구글링 해서 찾아보시는걸 추천 드립니다. )

 

우리가 사용하는 API들은 쉽게 생각하시면 은행 창구와 같습니다. 은행 창구에서 개인 고개인지, 기업 고객인지에 따라 가져오고 , 처리해주는게 다르듯이 클라이언트 -> 서버 를 가져올때는 요청하는 타입이 존재합니다.

 

GET이라는 타입과 POST라는 타입이 존재하는데 각각 설명을 드리면

 

GET : 데이터 조회(Read)를 요청할 때 사용 ex) 영화 목록 조회, 음악 목록 조회

 

POST : 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 사용 ex) 회원가입, 회원탈퇴, 비밀번호 수정

 

이 중에서 저희는 먼저 GET 방식에 대해 얘기해보려고합니다.

 

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

부산행

 

다음 URL을 보시면 크게 두 부분으로 볼 수 있습니다. "?"가 있는 지점으로해서 앞에는 서버 주소, 뒤는 영화 정보 입니다.

 

여기서 서버 주소는 항상 같고 뒤에 코드 번호만 여러분이 바꿔보신다면 GET요청을 통해 그 코드에 맞는 영화가 받아와 지는구나 라고 볼 수 있습니다.

 

또 다른 URL을 한번 보겠습니다.

 

https://www.google.com/search?q=%EA%B0%A4%EB%9F%AD%EC%8B%9C&sourceid=chrome&ie=UTF-8 

갤럭시 - Google 검색

이 링크를 보시면 상당히 복잡해 보이는데요 q= 부분이 영문, 숫자, 문자 조합으로 되어있는데 이 주소와 같은 주소입니다.

 

google.com/search?q=갤럭시&sourceid=chrome&ie=UTF-8

 

위의 주소가 보기 더 편하실테니 위의 주소로 설명을 드리겠습니다.

 

위의 주소가 의미하는 것은 google.com의 search 창구에서 검색어가 갤럭시고 브라우저 정보는 chrome이며 인코딩은 UTF-8 을 의미합니다.

 

이렇게 주소로 봤을 때, 각 주소는 어떤값을 무엇으로 가져와달라 라는 거처럼 GET 형식인것을 볼 수 있습니다.

 

이제 이 내용을 가지고 Ajax 가 어떤 형식인지 보러 가겠습니다.