TIL - Wecode | HTTP

한성봉·2021년 5월 29일
0

HTTP

HyperText Transfer Protocol 의 약자이다. 하이퍼텍스트 전송 규약이라는 말이다. 하나한 살펴보자.

  • Hypertext
    HTML을 다시 짚고 넘어가보면, 문서와 문서가 링크로 연결되도록 하는 태그로 구성된 언어란 뜻이다. 다시 말하면, HTML은 웹페이지를 만들기 위해서 웹브라우저 위에서 동작하는 언어를 뜻한다. HTML로 만든 웹페이지를 어떻게 주고 받을 것인가에 대한 이야기이다.

  • Transfer
    전송하다라는 의미이다. 우리가 잘 만든 HTML파일을 로컬에서만 본다면 무슨 소용이 있을까? 그렇기 때문에 잘 만든 파일을 전송해야 의미가 있다.

  • Protocol
    협약, 규약이라는 뜻이다. 물리적으로 떨어진 컴퓨터끼리 어떻게 HTML파일을 주고받을 수 있는지에 대한 약속이다.
    컴퓨터끼리 소통하는 방법이 필요하다. 인터넷상에서 일어나는 소통은 대부분 HTTP 규약을 따른다.


HTTP의 특징

  • Request / Response (요청 / 응답)
    HTTP 통신의 핵심은 요청과 응답이다. 우리가 어떤 사이트에 접속하여 컨텐츠를 소비하는 것 자체가 요청과 응답의 결과이다. clien(사용자) 에서 server로 요청을 하고 server는 응답을 한다. 아주 심플한 로직이다. 너무 어렵게 생각할 필요는 없다.

  • stateless
    state(상태) + less(없음)
    http에 대한 설명 중 잊어서는 안 될 http의 특징이 바로 Stateless다.
    각각의 http 통신(요청/응답)은 독립적이기 때문에 과거의 통신에 대한 내용을 전혀 알지 못한다. 이전의 상태를 전혀 알지 못 한다는 것은 무엇을 의미할까?
    매 통신마다 필요한 모든 정보를 담아서 요청을 보내야한다.
    따라서, 만일 여러번의 통신(요청/응답)의 진행과정에서 연속된 데이터 처리가 필요한 경우를 위해 로그인 토큰, 브라우저의 쿠키,세션,로컬스토리지 같은 기술이 필요에 의해 만들어졌다.


Request / Response

Request

  • Start Line: 요청의 첫번째 줄에 해당한다.
  1. HTTP Method: 해당 요청이 의도한 액션을 정의하는 부분. 주로 GET, POST, DELETE가 많이 쓰임
  2. Request target: 해당 request가 전송되는 목표 url
  3. HTTP Version: HTTP 버전을 나타낸다. 1.1 버전이 주로 쓰인다.

GET/login HTTP/1.1
해석: GET 메소드로 login 이라는 요청 타넷에 HTTP 1.1 버전으로 요청을 보내겠다.

  • Headers: 해당 요청에 대한 추가 정보(메타 데이터)를 담고있는 부분이다.
    Key: value 값으로 되어있다. (JS의 객체, Python의 딕셔너리 형태라고 보면 된다.)
    자주 사용되는 Headers의 정보에는 다음이 있다.
Headers: {
    Host: 요청을 보내는 목표(타넷)의 주소. 즉, 요청을 보내는 웹사이트의 기본 주소가 된다.
    User-Agent: 요청을 보내는 클라이언트의 대한 정보
    Content-Type: 해당 요청이 보내는 메세지 body의 타입
    Content-Length: body 내용의 길이
    Authorization: 회원의 인증/인가를 처리하기 위해 로그인 토큰을 Authorization 에 담는다.
}
  • Body: 해당 요청의 실제 내용. 주로 Body를 사용하는 메소드를 POST다.
    로그인 시에 서버에 보낼 요청의 내용
body: {
	"user_email": "xxx@xxx.com:"
    "user_password": "wecode"
}

Response

HTTP 규약에 따른 응답의 구조도 또한 크게 세 부분으로 구성되어있다.

  • 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 상태 메세지를 보낸다.

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

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

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

HTTP Request Methods

요청 메세지에는 GET, POST, DELETE, 등 더 있지만 자주 쓰이는 3가지에 대해서 알아보겠습니다.

  • GET
    어떤 데이터를 서버로 부터 받아올 때 사용하는 Methods

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

  • DELETE
    메소드의 이름에서 유추 가능하듯, 특정 데이터를 서버에서 삭제 요청을 보낼때 쓰는 메소드

Response Status Codes

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

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

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

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

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

  • 404: Not Found
    요청된 Url 가 존재하지 않는다는 의미

  • 500: Internal Server Error
    서버에서 에러가 났을 때의 status code
    API 개발을 하는 백엔드 개발자들이 싫어하는 코드

Response Status Codes에 대한 더 자세한 내용은 다음 링크를 참조
https://developer.mozilla.org/ko/docs/Web/HTTP/Methods

0개의 댓글