HTTP 통신 키워드 정리

클라이언트(브라우저)

클라이언트는 인터넷에 연결된 사용자의 디바이스, 또는 웹에 접근할 수 있는 소프트웨어를 뜻한다. 브라우저와 같이 사용자 입력을 자원을 서버에 요청하고 응답을 받아서 출력하는 애플리케이션이 대표적이다.

브라우저는 HTML, CSS, JavaScript 등으로 작성된 코드를 내부 엔진으로 해독하여 사용자가 쉽게 이해할 수 있는 형태의 컨텐츠로 보여주는 역할을 한다.

• 웹 리소스를 파싱(Parsing) -> 컴파일(Compile) -> 렌더(Render) 한다.
• 웹 리소스 종류 : .html, .css, .js, .xml, .json 등

서버

서버는 클라이언트가 어떤 자원을 요청하면 해당 요청을 처리하고 응답을 전송하는 역할을 한다. 클라이언트는 서버의 자원을 어떻게 사용할 수 있는지 명시해 둔 API에 따라 요청을 전송한다.

API vs UI

• API (Application Programming Interface)
  • 개발자가 서버 애플리케이션의 자원을 가져다 쓸 수 있게 만들어 놓은 인터페이스
• UI (User Interface)
  • 클라이언트 애플리케이션을 사용할 수 있게 만들어 놓은 인터페이스.
  • 주로 감각적(시각・청각・촉각・후각・공감각)인 형태로 존재 ex. GUI(시각)
• Interface
  • 두 주체 간의 물리적 ・ 가상적 접점.
  • 어떻게 입력하면 출력된다라고 하는 커뮤니케이션하는 형식 ex. 폼(Form)

Protocol

• 특정한 목적아래 주체들간 커뮤니케이션을 위한 통신 규칙
• 규칙에는 형식과 절차가 존재함
• 종류 : HTTP(S), Websocket, FTP, POP 등

HTTP

• HyperText Transfer Protocol 약자
• 클라이언트와 서버 애플리케이션 간에 커뮤니케이션을 위한 프로토콜

특징

• stateless : HTTP의 각 요청은 모두 독립적이다. 즉, 이전 요청이 다음 요청에 참고되지 않는다. 그래서 상태(state)가 없다.
• connectionless : 한 번의 요청에는 한 번의 응답만 하며, 이후에는 연결을 끊는다.

HTTP 요청(응답) 메시지 구조

• General Header : 공통 메타 데이터가 담긴 부분
• Header : 메타 데이터가 담긴 부분 (요청과 응답이 각각 다름)
• Body(optional) : 요청(또는 전달)되는 데이터가 담긴 부분 (HTTP 메서드에 따라 존재 유무)

HTTP Methods

• GET/ : 서버에 자원을 요청시 (Header만 존재)
• POST/ : 서버에 자원을 생성하는 요청시
• PUT/ : 서버의 자원을 (전체)수정하는 요청시
• PATCH/ : 서버의 자원을 (일부)수정하는 요청시
• DELETE/ : 서버의 자원을 제거하는 요청시

AJAX

Asyncronous Javascript and XML의 약자이지만, 이름의 뜻에 집착하기 보다 동적(Dynamic) 웹을 실현하게 해주는 기술들의 총칭으로 이해해야 한다. AJAX 기술을 통해 클라이언트는 필요한 데이터만 서버를 통해 비동기적으로 받고, 깜박임(페이지를 다시 로드) 없이 페이지의 일부만 업데이트 할 수 있다.

특징

• 비동기 통신 : XMLHttpRequest와 같은 HTTP 통신 API로 서버와 비동기적으로 통신할 수 있다.
• 부분 렌더링 : 자바스크립트로 DOM을 조작하여 페이지 리로드 없이 업데이트 되는 부분만 렌더링이 가능하다.

Fetch API

fetch는 '(무언가를) 가져오다'라는 의미이며, 서버에서 리소스를 가져오기 위한 내장 API다. 리소스 취득에 필요한 여러 메서드들이 fetch API에 내장되어 있다. 단, fetch는 브라우저 내장 API이기 때문에 노드 환경에서는 사용할 수 없다. 대신, node-fetch를 사용한다.