TIL - 클라이언트-서버 통신, API, Ajax
1. 클라이언트-서버 통신
리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 클라이언트-서버 아키텍처라고 한다.
예를들어 빵집에서 빵을 사는 상황을 생각해보자.
이 상황에서는 클라이언트가 손님, 서버는 직원, 리소스는 빵에 해당한다.
클라이언트 = 손님
서버 = 직원
리소스 = 빵
클라이언트(손님) 이 리소스(빵)에 접근하기 위해서는 서버(직원)에게 요청해야 한다.
이처럼 클라이언트와 서버는 요청-응답을 주고받는 관계이다. 클라이언트가 서버에게 요청을 하면 서버는 그에 맞는 응답을 한다.
그렇다면 클라이언트와 서버는 어떻게 요청과 응답을 주고받을까??
=> HTTP 라는 프로토콜을 이용해서 요청과 응답을 주고받는다.
위에서 예로 들었던 빵집에서는 카운터, 어플, 키오스크 등 주문을 할 수 있는 다양한 방법들이 프로토콜에 해당하는 것이다. (소통하는 방법)
2. API
손님이 빵집에서 빵을 주문하기 위해서는 직원이 제공하는 메뉴판을 보고 그에 맞는 주문을 해야한다. 이와 같이 클라이언트도 서버가 리소스 전달을 위한 메뉴판 즉, API를 구현해 놓아야 클라이언트가 이를 활용할 수 있다.
API = 리소스 전달을 위한 메뉴판
이제 API를 이용해 클라이언트는 서버에 요청을 할 수 있다.
보통 인터넷에 있는 데이터를 요청할 때는 HTTP 프로토콜을 사용하며 주소(URL, URI)를 통해 접근할 수 있게 된다.
또한 데이터를 요청할 때에는 '메소드'라는 것이 존재하여 상황에 따른 다양한 요청(추가 삭제,,,)을 할 수 있게 된다. 요청에 따른 메소드들은 다음과 같다.
- 조회(READ) : GET
- 추가(CREATE) : POST
- 갱신(UPDATE) : PUT 또는 PATCH
- 삭제(DELETE) : DELETE
3. Ajax
이전에는 웹 페이지에서 전환이 일어날 때마다 필요한 부분만이 아닌 페이지 전부를 로딩했다.
예를들어 위와 같이 구성된 로그인 페이지가 있다고 가정했을 때 아이디, 비밀번호를 입력하고 빨간색 영역의 로그인 버튼을 클릭했을 때 빨간색 영역만 다시 로딩되는 것이 아니라 빨간색 + 검은색 영역까지 모두 로딩되는 불필요한 상황이 이루어지고 있었다는 것이다.
이에 불편함을 느껴 페이지의 일부만 로딩 하기 위한 방법 즉, 로그인 버튼을 클릭했을 때 빨간색 부분만 로딩되게 하는 방법을 고안해냈다.
이 이유로 Ajax가 등장하였다. Ajax는 정적으로 렌더링 하는 것이 아닌 동적으로 페이지를 렌더링 하여 필요한 일부 영역만 로딩하는 것이다.
오늘은 클라이언트 서버, API와 Ajax에 대하여 공부하였다.
다음 시간에는 이를 활용해서 chat application을 구현해본다
오늘은 여기까지.!!!
