TIL HTTP에 대하여

fetch함수를 사용하기위해서는 HTTP에 대한 복습이 필요할 것 같아서 다시한번 돌아보는 의미로 정리해본다.

HTTP란 무엇인가?

HTTP는 HyperText Transfer Protocol의 약자이다.

HyperText

문서와 문서가 링크로 연결되도록 하는 태그로 구성된 언어이다.

HTTP에서 HyperText는 HTML의 약자인 HyperText Markup Language의 HyperText와
의미가 같다.

Transfer

전송을 의미한다.

전송을 한다는것은 받는이와 보내는이가 있다는 것으로 로컬외에 다른 사람들과 공유하기 위해서 다른 컴퓨터에게 전송한다는 의미이다.

Protocol

프로토콜은 협약, 통신 규약 이라는 의미를 가진다. 물리적으로 떨어진 컴퓨터 끼리 어떻게 HTML파일(HyperText)을 주고 받을지에 대한 약속이다.

HTTP를 한문장으로 정의한다면 컴퓨터 끼리의 소통을 위한 통신규약이다.

HTTP의 주요 특징 2가지!

Request / Response (요청 / 응답)

transfar에서 설명하듯 보내는이와 받는이가 있듯이 HTTP의 소통은 요청(Request)과 응답(Response)이다.

예를 들어 내가 원하는 정보가 있다면 요청을 할 것이고, 서버는 요청을 받고 나에게 응답을 하여
원하는 정보를 보여주는 것과 같다.

Stateless

HTTP에대한 설명 중 가장 강조되는것이 바로 Stateless 이다.

즉, 상태가 없다는 뜻이다.

HTTP의 각각의 통신(요청/응답)은 독립적으로 이루어지기 때문에 과거에 통신에 대한 내용을 알지 못한다.

뭐랄까... 기억상실증에 걸린 사람처럼 정보를 요청할 때마다 전에 요청했던 정보를 보냈었다는것을 계속 상기시켜줘야하는 것과 같다.

만일 여러번의 요청/응답의 과정에서 연속적인 데이터 처리가 필요할 경우 로그인 토큰 또는 브라우져의 쿠키, 로컬스토리지 , 세션스토리지를 사용하여 웹브라우져에게 데이터를 심어주면 된다.

Request(요청)

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

이 메세지의 구조는 크게 세 부분으로 구성되어있다.

1. Start Line

요청의 첫번째 줄에 해당한다.

1. HTTP Method: 해당 요청이 의도한 액션을 정의하는 부분. 주로 GET, POST, DELETE가 많이 쓰임
2. Request target: 해당 request가 전송되는 목표 url
3. HTTP Version: 말 그대로 사용되는 HTTP 버전을 뜻한다. 주로 1.1 버전이 널리 쓰임

GET (HTTP Method)/ login HTTP(Request target)/ 1.1(HTTP Version)
해석: GET 메소드로 login 이라는 요청 타겟에 HTTP 1.1 버전으로 요청을 보내겠다!

2. 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 에 담는다
}

3.Body

해당 요청의 실제 내용. 주로 Body를 사용하는 메소드는 POST다.

실제 로그인을 벡엔드와 연동할 때 다음과 같은 코드를 사용하였다.

goToMain = e => {
    e.preventDefault();
    fetch('http://10.58.4.160:8000/user/signin', {
      method: 'POST',
      body: JSON.stringify({
        account: this.state.idValue,
        password: this.state.pwValue,
      }),
    })
      .then(response => response.json())
      .then(result => {
        if (result.token) {
          localStorage.setItem('token', result.token);
        }
        console.log('결과: ', result);
        if (result.message === 'SUCCESS') {
          this.props.history.push('/main-myung');
        }
      });
  };

여기서 벡엔드에 데이터를 보낼때 JSON 형태로(문자열) 보내야하기 때문에 JSON.stringify를 사용하였다.

Response (응답)

Response의 구조 또한 세부분으로 구성되어 있다.

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

   2. Headers

   응답의 추가 정보(메타 데이터)를 담고있는 부분이다.

   3.Body

   요청의 Body와 일반적으로 동일하다.

   요청의 메소드에 따라 Body가 항상 존재하지 않듯이. 응답도 응답의 형태에 따라 데이터를 전송할 필요가 없는 경우엔 Body가 없을 수도 있다.

   가장 많이 사용되는 Body 의 데이터 타입은 JSON(JavaScript Object Notation) 이다.

   HTTP Request Methods

   자주 사용하는 HTTP 통신메소드 3가지는 GET, POST, DELETE이다.

   프론트엔드에서 fetch함수에 기입하게 되는데 상황에 따라 각각의 메소드가 사용된다.

   GET

   서버로 부터 데이터를 받아올 때 사용한다.

   데이터를 받아오기만 할 때 사용한다.

   fetch함수에서는 default값이다.

   POST

   데이터를 생성 / 수정 할 때 주로 사용되는 메소드

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

   DELETE

   특정 데이터를 서버에 삭제요청을 보낼 때 사용한다.

Response Status Codes

응답에대한 상태를 나타내는 코드이다.

200: OK

문제없이 요청에 대한 처리가 벡엔드 서버에서 잘 처리되었을 때 출력되는 코드이다.

201: Created

무언가가 잘 생성되었을 때에(Successfully Created) 오는 Status Code

400: Bad Requset

해당 요청이 잘못되었을 때 보내는 Status Code

주로 요청의 Body에 보내는 내용이 잘못되었을 때 사용되는 코드이다.

401: Unauthorized

유저가 해당 요청을 진행하려면 로그인이나 회원가입이 필요함을 알려줄때 사용되는 코드이디.

403: Forbidden

유저가 해당 요청에 대한 권한이 없다는 뜻

404: Not Found

요청된 URI 가 존재하지 않는다는 의미

500: Internal Server Error

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

앞으로 RESTful API를 사용할 때 동적라우팅을 사용하기 위해서는 HTTP에대한 이해가 매우 중요하다 생각한다.
서버에 대한 Response Status Codes를 활용하여 상황에 맞는 화면을 사용자에게 보여줄 수 있고, 벡엔드와 소통하는 부분에서도 HTTP에 대한 이해도가 높을수록 소통에 있어 긍정적인 영향을 줄 수 있다.