본문 바로가기

■ 프로그래밍/Front-end

HTTP 기초

HTTP(HyperText Transfer Protocol)

- 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 프로토콜(통신 규약)

- hypertext markup language

 

- 웹 상에서 네트워크로 서버끼리 통신을 할 때, 어떠한 형식으로 서로 통신하자 규정해 놓은 것이 '통신 형식' 혹은 '통신 구조'

- 프론트엔드 서버와 클라이언트 간의 통신, 백엔드와 프론트엔드 서버간의 통신에 사용

 

ㅁ HTTP 문자 이해하기

- HyperText(연결된 HTML), Transfer(전송), Protocol(규약)

- 규약은 서로 약속or합의한 내용으로, 컴퓨터 끼리 의사소통을 하기 위해 만든 언어이다. 

- 사람은 목소리로 소통하듯이, 컴퓨터는 HTTP에서 정한 규약인 이진법(비트)로 서로 어떤 내용인지 이해한다. 

- 해당 규약은 컴퓨터가 이해할 수 있는 문법(syntax)으로 누구이고 어디에 있는 누구에게, 어떤 목적이 있는지 등의 내용을 갖는다. 

- 더 깊게 이해하려면 TCP 프로토콜을 공부해야 한다

 

HTTP 특징

1. 요청(request)과 응답(response)으로 이루어짐

- 클라이언트(유저)가 서버에 HTTP 요청을 하면, 서버가 HTTP 응답

2. Stateless(상태를 저장하지 않음)

- 요청이 오면 그에 응답할 뿐, 서버에 어떤 요청이 있고 전에 어떤 응답을 했는지 (이전 통신들을) 저장하지 않음; 항상 똑같은 요청을 해야 함;

- 만약 이러한 진행 과정이나 데이터가 필요하다면 쿠키나 세션 등을 사용(ex. 자동로그인)

- 요청에 대한 응답(정보)을 모두 요청에 첨부해서 보내야 함, 받은 서버가 요청에 대한 작업을 하고 응답할 수 있음; 브라우저가 쿠키나 세션에 저장해줌; 브라우저는 항상 단발성으로 보내고 받는 것;

- 페이스북은 해당 쿠키 정보를 길게 유효하게 하는 것; 금융사는 쿠키 정보를 짧게 함

 

HTTP Request 구조

HTTP request 메세지는 크게 Start Line(Request Line), Headers, Body로 나뉜다. 

출처: https://documentation.help/DogeTool-HTTP-Requests-vt/http_request.htm

(1) Start Line

HTTP Method 요청이 의도한 action GET, POST, PUT, DELETE, OPTIONS
Request target 요청이 전송한 어디로 가는지 URI ex. /login
HTTP Version HTTP 버전 ex. 1.0, 1.1, 2.0

 

(2) Headers

HTTP의 헤더내용(메타 정보)은 실제로 브라우저에 보이지 않는다. 자주 사용되는 header 정보는 다음과 같다. 

key:value HOST : 요청이 전송되는 target의 host ex. HOST: google.com
User-Agent 요청을 보내는 클라이언트(주체)의 정보 ex. 브라우저 정보, ip주소 등
Accpet 해당 요청이 받을 수 있는 응답 타입  
Content-Type 해당 요청이 보내는 메세지 body 타입 ex. application/json

- key, value값과 request target이 합쳐지면 해당 주소(위치)로 간다.

- key, value 값은 마치 xx아파트, request target은 a동 b호로 연상하면 된다. 

- user-agent의 정보를 가지고 클라이언트(유저)의 정보를 유추하고 분석한다. (최근 크롬은 이 데이터를 더 이상 수집하지 않겠다 발표했다)

- 위의 자동로그인을 위해 요청에 쿠키값을 넣어 서버에 보내는 정보는 요청을 처리하기 위한 부가정보이기 때문에 header에 넣어 처리 한다

 

(3) Body

본문 내용(실제 데이터)를 말한다. 

하지만 body가 없는 요청도 많다. (ex. GET 메소드일 경우, 요청이 받아와야 하니까 아무내용이 없다)

 

 

HTTP Response구조

request와 마찬가지로 크게 3부분으로 나뉘는데, Status Line, Headers, Body이다. 

출처: https://documentation.help/DogeTool-HTTP-Requests-vt/http_request.htm

(1) Status Line

응답의 상태가 어떤지 간략하게 나타내 주는 것

HTTP Version HTTP 버전
Status Code (숫자) 컴퓨터가 알아듣는 언어
Status Text (문자) 사람이 알아듣는 언어

 

(2) Headers

HTTP request엔 없는 server 헤더 존재 

 

(3) Body

데이터를 전송할 필요가 없을 경우 body가 비어 있다.

보통 404 에러가 나면, 서버는 html 문자를 그대로 보여주고, 브라우저의 경우 html을 읽어서 유저에게 보여준다.

 

 

-

 

우리가 전부 어떻게 쓰는지 알 필요는 없지만, 개발자가 직접 작성해야 하며 알아야 하는 것들을 정리해보겠다. 

 

HTTP Methods

GET 데이터를 서버로 부터 받아(get)올 때 사용 (달라) HTML 페이지 요청
POST 데이터의 변화(생성/수정/삭제)를 요청 할 때 (해줘)  
PUT 데이터 생성 최근 POST로 대체
DELETE 데이터 삭제 최근 POST로 대체

 

HTTP Status Code/Text

200 OK 정상 작동  
301 Moved Parmenently 해당 URI가 다른 주소로 바뀌었을 때  
400 Bad Request 요청을 잘 못 보낸 경우  ex. text자리에 번호를 썼을때
401 Unauthorized 로그인(인증) 필요  
403 Forbidden 권한이 없음 ex. 유료회원이 아님
404 Not Found 요청한 URI가 없음 ex. google.com은 있지만 /mj 이 없는 것 (만약 HOST가 없으면 connection이 만들어지지 않아 에러가 뜸)
500 Internal Server Error 서버에서 에러  

 

유저가 로그인을 시도했는데,

1. 401이 뜨면, 프론트는 '아이디 혹은 비밀번호가 잘못되었습니다' 페이지 띄우기

2. 200이 뜨면, 프론트는 '메인페이지' 띄우기