[JavaScript] HTTP 통신의 기본

클라이언트/서버 모델

클라이언트가 서버에 요청 메시지를 보내면 서버가 응답 메시지를 반환한다. 메시지 반환 후 서버는 초기 상태로 돌아가며 클라이언트의 상태를 저장하지 않는다. 이러한 방식으로 통신이 이뤄지는 것을 클라이언트/서버 모델이라고 부른다. 기본적으로 서버의 데이터베이스, 기타 다른 서비스 등 서버의 자원/서비스를 이용하기 위한 시스템이다.

---

클라이언트와 서버는 데이터를 주고받을 때 서로의 약속된 규칙이 필요하다. 만약 이러한 규칙이 없다고 생각해보자.

혈액형에 비유할 수 있다. 흔히 어릴 때 과학 시간에 혈액형 별 적혈구 모양이 다른 사진을 본 적이 있을 것이다. 왜 A형, B형끼리는 수혈이 안되는지. 그것과 똑같다고 생각하면 이해하기 쉽다. 서로 각자의 방식으로 정해진 것 없이 막 보낼 테니 데이터를 주고받을 수 없을 것이다.

HTTP(Hyper Text Transfer Protocol)

데이터 교환을 위해 쌍방 간에 규약을 정했는데 이것을 프로토콜이라고 한다. HTTP도 웹상에서 클라이언트와 서버가 통신하기 위한 대표적인 프로토콜 중 하나이다.

※ 프로토콜(Protocol) : 서로 다른 기기들 간의 데이터 교환을 원활히 수행할 수 있도록 표준화시켜 놓은 통신 규약

HTTP에서는 사용자 PC와 웹 서버 컴퓨터일 것이다. 웹 브라우저는 서버 컴퓨터로부터 응답메시지(정보)를 볼 수 있는 도구다.

 

HTTP는 웹 브라우저와 웹 서버가 HTML로 작성된 웹 페이지나 동영상, 음성 파일 등을 주고받기 위한 프로토콜이다. 보안이 중요한 요즘은 대부분 SSL로 암호화한 프로토콜인 HTTPS를 사용한다.

 

여기서 네트워크 쪽으로 조금 설명을 하겠다. 데이터가 출발지를 떠나 목적지에 도달할 때까지 네트워크 통신을 한다. 이 때 데이터는 그냥 가는 게 아니다. 많이 들어본 OSI 7계층을 따라 전송이 된다. 즉, 가장 하단인 1계층인 물리 계층에서 7계층인 응용 계층을 거친다. HTTP는 바로 7계층인 응용 계층에서 사용하는 프로토콜 중 하나이다. 그리고 HTTP는 4계층인 전송 계층 프로토콜인 TCP와 3계층 프로토콜인 IP 위에서 동작한다. 이 두 계층은 대부분 함께 가기 때문에 TCP/IP 라고 묶어서 부른다.

 

HTTP 프로토콜에서는 IP 주소를 사용해서 통신할 컴퓨터를 결정하고 TCP 포트 번호를 사용해 그 컴퓨터의 어떤 프로그램과 통신할지를 결정한다.

 

• HTTP 포트 : 80
• HTTPS 포트 : 443

---

HTTP 통신 특징

• 클라이언트의 요청이 있어야 서버가 응답하는 단방향 통신이다.
• 영구적으로 서버와 브라우저가 연결되어 있지 않는다. 서버는 클라이언트가 요청한 정보를 전송하고 곧바로 연결을 종료한다. 즉, 1회성이다. 이때 기본적으로는 서버는 클라이언트의 상태를 저장하지 않는다. 다만 쿠키, 세션, 토큰 등을 통해 연결을 유지시킬 수 있다.
• 클라이언트는 서버가 요구하는 조건에 맞게 요청해야 정상적인 응답값을 받을 수 있다. 보통 API 문서에 규정되어 있다.

HTTP 요청, 응답 메시지 구조

HTTP에서는 클라이언트가 웹 서버에 요청 메시지를 보내고 그 서버가 응답 메시지를 반환한다. 즉, request - response 메시징 패턴을 사용한다.

---

요청 메시지 구조

• 요청 행 : 요청 메서드, URL, HTTP 버전에 대한 정보를 문자열로 가지고 있다. ex) GET http://www.naver.com HTTP/1.1

   ※ 요청 메서드 : 데이터의 송수신 방법을 말한다.

• GET : 웹 서버에 페이지를 요청한다. 요청 시 필요한 데이터는 URL에 파라미터 형태로 전송되며 텍스트 데이터만 전송이 가능하다.
• POST : 서버의 데이터를 갱신하거나 보내는 데이터 양이 많을 때 혹은 보안을 요구할 때 사용한다. 요청 시 필요한 데이터는 메시지 본문에 담아서 보낸다. 텍스트, 바이너리 데이터 모두 전송이 가능하다.
• PUT : 서버의 데이터를 갱신하거나 데이터가 없다면 새로운 데이터를 생성해 달라고 요청한다.
• DELETE : 서버의 데이터 삭제를 요청한다.

 

• 요청 헤더 : 메시지의 제어 정보, 메시지 본문에 저장한 데이터 정보(데이터 종류, 문자코드) 등이 텍스트 형식으로 저장된다. 헤더의 문자열은 Key : Value의 쌍으로 구성한 필드의 집합으로 구성된다.
• 공백 행 : 말 그대로 공백 행이다.
• 메시지 본문 : 보내는 데이터가 저장된다. 데이터 형식은 요청 헤더에 지정된 타입에 맞게 설정한다.

---

응답 메시지 구조

• 응답 행 : HTTP 버전, HTTP 상태 코드, 보충 메시지에 대한 정보를 문자열로 가지고 있다. ex) HTTP/1.1 200 OK

  ※ HTTP 상태 코드(HTTP Status Code)

특정 HTTP 요청이 성공적으로 완료되었는지를 코드로 표현한다. 가끔 홈페이지에 들어가려는데 무슨 흰색 바탕에 영어로 솰라솰라 되어있는데 숫자로 404라고 되어 있는 페이지를 본 적이 있을 것이다. 이 때 404가 바로 HTTP 통신 상태를 알려주는 코드이다. 대표적으로 200(성공, OK), 403(액세스 허용안 됨, Forbidden), 404(요청한 리소스가 없음, Not Found), 500(서버 에러, Internal Server Error)가 있다. 더 많은 상태 코드는 아래 링크를 참고하자.

https://ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C

HTTP 상태 코드 - 위키백과, 우리 모두의 백과사전

• 응답 헤더 : 메시지의 제어 정보, 메시지 본문에 저장한 데이터 정보(데이터 종류나 문자 코드) 등이 텍스트 형식으로 저장된다.
• 메시지 본문 : 응답 받을 데이터가 담긴다. 마찬가지로 요청 헤더에 지정된 데이터 형식 타입을 따른다.  

 

지금까지 기본적인 HTTP 통신 개념을 알아봤다. 다음 포스팅에선 자바스크립트에서 어떻게 HTTP 통신을 하는지 알아보도록 하겠다.