HTTP의 기초 개념

LSA·2022년 2월 24일
http
0

웹개발 기본 상식

목록 보기
4/9

과제용 개념정리는 맨 하단에 있습니다.

HTTP란?

HyperText Transfer Protocol의 약자

무슨 소리죠?

  • hypertext
    ppt에서 가끔 보던 '하이퍼링크'같은 느낌이 나는데, 실제로 문서와 문서 간을 연결해주도록 링크로 연결된 태그라는 뜻
  • transfer
    사전적 의미로 '전송'.말그대로 전송한다는 뜻
  • protocol
    물리적으로 떨어진 컴퓨터 끼리 어떻게 HTML파일(HyperText)을 주고 받을지에 대한 약속

한마디로 컴퓨터끼리 HTML 파일을 어떻게 주고받을지를 정하는 규약

HTTP의 두 가지 특징

  1. Request / Response (요청과 응답)
  2. Stateless

1. Request / Response


사람들끼리 커뮤니케이션을 하려면 기본적으로 요청 / 응답의 단계가 필요합니다.
그럼 컴퓨터와 소통하려면 어떻게 해야할까요?
똑같이 요청 / 응답을 거쳐야 합니다!
다만 사람끼리의 대화가 사람대 사람으로 이루어지면, HTTP를 통한 컴퓨터와의 대화는 사람이 내리는 명령과 서버로 이루어진다고 볼 수 있겠네요.

1-2. Request와 Response의 메세지 구조

HTTP 요청은 프론트엔드(클라이언트) 에서 백엔드(서버)에 일(데이터 처리)을 시작하게 하기 위해 보내는 메세지다.

둘다 구조적으로는 같은 구조를 가지고 있으나, 들어가는 내용이 조금씩 다릅니다.

Request의 구조
1. Start Line : 요청의 첫번째 줄에. 이 시작 줄도 세 부분으로 구성되어있음 

1. HTTP Method: 해당 요청이 의도한 액션을 정의하는 부분. 주로 GET, POST, DELETE가 많이 쓰임
2. Request target: 해당 request가 전송되는 목표 url 
3. HTTP Version: 말 그대로 사용되는 HTTP 버전을 뜻한다. 주로 1.1 버전이 널리 쓰임
  1. Headers: 해당 요청에 대한 추가 정보(메타 데이터)를 담고있는 부분. 
{Key: Value}값으로 되어있다 (JavaScript의 객체, Python의 딕셔너리 형태라고 보면 된다)
자주 사용되는 Headers 의 정보에는 다음이 있다 
    
    Headers: {
    	Host: 요청을 보내는 목표(타겟)의 주소. 즉, 요청을 보내는 웹사이트의 기본 주소가 된다
    	(ex. www.apple.co.kr)
    	User-Agent: 요청을 보내는 클라이언트의 대한 정보 (ex. chrome, firefox, safari, ~~explorer~~)
    	Content-Type: 해당 요청이 보내는 메세지 body의 타입 (ex. application/json)
    	Content-Length: body 내용의 길이
    	Authorization: 회원의 인증/인가를 처리하기 위해 로그인 토큰을 Authroization 에 담는다
    }
  1. Body: 해당 요청의 실제 내용. 주로 Body를 사용하는 메소드는 POST 
    ex) 로그인 시에 서버에 보낼 요청의 내용**
    Body : {
    	"user_email": "jun.choi@gmail.com"
    	"user_password": "wecode"
    }
 GET /login HTTP/1.1
해석: GET 메소드로 login 이라는 요청 타겟에 HTTP 1.1 버전으로 요청을 보내겠다!

Response의 구조
1. Status Line: 응답의 상태 줄. 응답은 요청에 대한 처리상태를 클라이언트에게 알려주면서 내용을 시작함. 

    1. HTTP Version: 요청의 HTTP버전과 동일
    2. Status Code: 응답 메세지의 상태 코드
    3. Status Text: 응답 메세지의 상태를 간략하게 설명해주는 텍스트
    
    HTTP/1.1 404 Not Found
    해석: HTTP 1.1 버전으로 응답하고 있는데, 프론트엔드에서 보낸 요청(ex. 로그인 시도)에 대해서
    		 유저의 정보를 찾을 수 없기 때문에(Not Found) 404 상태 메세지를 보낸다.
    
    HTTP/1.1 200 SUCCESS
    해석: HTTP 1.1 버전으로 응답하고 있는데, 프론트엔드에서 보낸 요청에 대해서 성공했기 때문에
    		 200 상태 메세지를 보낸다.

  1. Headers: 요청의 헤더와 동일, 응답의 추가 정보(메타 데이터)를 담고있는 부분. 다만, 응답에서만 사용되는 헤더의 정보들이 있다. (ex. 요청하는 브라우저의 정보가 담긴 User-Agent 대신, Server 헤더가 사용된다.)

  2. Body: 요청의 Body와 일반적으로 동일. 요청의 메소드에 따라 Body가 항상 존재하지 않듯이 응답도 응답의 형태에 따라 데이터를 전송할 필요가 없는 경우엔 Body가 없을 수도 있다. 가장 많이 사용되는 Body 의 데이터 타입은 JSON(JavaScript Object Notation) 이다.

    ex) 로그인 요청에 대해 성공했을 때 응답의 내용
    Body: {
    	"message": "SUCCESS"
    	"token": "kldiduajsadm@9df0asmzm" (암호화된 유저의 정보)
    }

2. Stateless

State + less와의 합성으로서 직역하면 '상태 없음'을 나타냅니다.
HTTP 통신은 각자 독립적이라는 특성을 가지고 있습니다. 때문에 이전의 통신에 대한 내용을 알지 못합니다.
공용 오피스에 설치된 폰부스를 아시나요? 굉장히 방음이 잘 되어있어서, 폰부스에 들어간 사람의 통화 내용은 우리가 듣지 못합니다. HTTP도 이것과 같다고 생각합니다.
때문에 HTTP에서는 매 페이지마다 그곳에 필요한 정보를 보내줘야 하는데, 우리가 웹을 사용한 경험상 전혀 정보를 새로 보내준다는 느낌은 아니었죠?
여기에는 로컬 스토리지나 세션,브라우저 내의 쿠키를 이용하는 등 또다른 기술 덕에 가능한 것입니다.

HTTP Request Methods

자주 사용되는 HTTP 통신 메소드들입니다.

1. GET

  • 이름 그대로 어떤 데이터를 서버로 부터 받아(GET)올 때 주로 사용하는 메소드.데이터를 받아오기만 할 때 사용된다.
  • 가장 간단하고 많이 사용되는 HTTP 메소드

2. POST

  • 데이터를 생성, 수정할 때 주로 사용되는 메소드
  • 데이터를 생성 및 수정할 때 많이 사용되기 때문에 대부분의 경우 요청에 body가 포함되서 보내진다.

3. DELETE

  • 특정 데이터를 서버에서 삭제 요청을 보낼때 쓰는 메소드.

Response Status Codes

200: OK

  • 문제없이 요청에 대한 처리가 백엔드 서버에서 이루어지고 나서 오는 응답코드

201: Created

  • 무언가가 잘 생성되었을 때에(Successfully Created) 오는 Status Code
  • 대게 POST 메소드의 요청에 따라 백엔드 서버에 데이터가 잘 생성 또는 수정 되었을 때에 보내는 코드

400: Bad Request

  • 해당 요청이 잘못되었을 때 보내는 Status Code
  • 주로 요청의 Body에 보내는 내용이 잘못되었을 때 사용되는 코드
    ex) 전화번호를 보내야 하는데 숫자가 아닌 문자열의 주소가 대신 Body에 담겼을 경우

401: Unauthorized

  • 유저가 해당 요청을 진행하려면 먼저 로그인을 하거나 회원가입이 필요하다는 의미
    ex) wish list, 좋아요 기능은 회원이 아니면 요청을 보낼 수 없음

403: Forbidden

  • 유저가 해당 요청에 대한 권한이 없다는 뜻
  • 접근 불가능한 정보에 접근했을 경우
    ex) 오직 유료회원만 접근할 수 있는 데이터를 요청 했을 때

404: Not Found

  • 요청된 페이지나 파일을 찾을 수 없을 때

제 벨로그 타이틀입니다! 작게나마 사용자들을 낚아보고싶었던 마음...

500: Internal Server Error

  • 서버에서 에러가 났을 때의 Status Code

모든 종류의 HTTP Response Status Codes MDN

과제 제출용 정리

  • HTTP Request/Response : 컴퓨터의 소통 방법으로, 일반적으로 사람이 하는 커뮤니케이션과 동일하게 요청과 응답의 과정으로 나뉜다. 둘다 start line,header,body의 구조를 가지고 있다.

  • HTTP Request Methods :데이터를 서버로 받아오는 GET 메소드, 데이터를 서버로 보내는 POST 메소드, 서버의 데이터를 삭제 요청하는 DELETE 메소드

  • HTTP Status Code 200번대 코드는 통신이 정상적으로 작동할때 나오며, 400번대는 요청이 잘못될 때 나오는 오류 코드, 500번대는 서버 쪽에서 잘못된 오류 코드다.

profile
LSA
진짜 간단하게 작성한 TIL 블로그
이전 포스트

HTML 레이아웃을 짜기 위한 기초 지식

다음 포스트

개발환경 기초지식

0개의 댓글