HTTP
HTTP : Hyper Text Transfer Protocol
컴퓨터들끼리 HTML 파일을 주고 받을 수 있도록 하는 소통 방식 또는 약속 ✨
1. 특징
1-1. Request / Response
HTTP 통신의 핵심은 요청 과 응답 이다. 내가 만약 유튜브에 접속해서 영상링크를 클릭한다면, 그 순간 내 컴퓨터는 구글의 서버에게 요청을 보낸다. 그럼 다시 구글의 서버는 이 요청을 처리해서 다시 나의 요청에대한 응답을 내 컴퓨터로 보내준다.
1-2. Stateless ⭐️
HTTP의 제일 중요한 특징은 바로 stateless이다. 말 그대로 상태를 기억하지 못한다는 뜻이다. HTTP통신(요청/응답)은 독립적이기 때문에 request와 response 하는 동안에만 전달을 해주고 과거의 통신에 대한 내용은 전혀 기억하지 못한다. 그래서 만약 로그인상태나, 온라인 쇼핑몰의 장바구니 기능처럼 무언가를 계속 이어서 진행하고 싶다면! 그 전 요청도 다시 같이 보내줘야 한다.
→ 그래서 이렇게 여러번의 통신(요청/응답)의 진행과정에서 연속된 데이터 처리를 하기 위해 로그인 토큰, 브라우저의 쿠키, 세션, 로컬스토리지 같은 기술이 만들어졌다.
2. 구조
요청을 잘 해야 응답이 잘 온다! 그래서 요청과 응답에 대한 깊은 이해가 필요하다. 프로젝트를 진행하게되면 프론트엔드에서 백엔드에게 데이터를 요청하고, 백엔드는 요청을 처리해서 응답을 주기 때문에 요청과 응답에 대한 구조와 메세지를 파악하면 대부분의 에러를 잡아낼 수 있다. ✨
2-1. Request 메세지 구조
요청은 프론트엔드(클라이언트)가 백엔드(서버)에게 데이터처리를 하도록 보내는 메세지이며 메세지의 구조는 크게 세 부분으로 구성되어있다.
- Start Line
- Headers
- Body
① Start Line
요청의 첫번째 줄에 해당하며, 이것 또한 세 부분으로 구성되어있다.
HTTP Method : 해당 요청이 의도한 액션을 정의하는 부분이다.
→ 주로 GET POST DELETE 가 많이 쓰인다.
Request target : 어느 경로에다가 요청을 하는건지, 전송되는 목표 url
HTTP Version : 사용되는 HTTP 버전을 말한다. 주로 1.1 버전이 널리 쓰인다.
ex
GET / login HTTP/1.1→ GET 메소드로 login 이라는 요청 타겟에 HTTP 1.1버전으로 요청을 보내겠다는 뜻이다.
② Headers
해당 요청에 대한 추가 정보(meata data)를 담고있는 부분이다.
Key: Value 의 형식으로 되어있다.
ex
Headers : { Host : 요청을 보내는 목표(target)의 주소. (ex. www.apple.co.kr) User-Agent: 요청을 보내는 클라이언트에 대한 정보 (ex. chrome, firefox, safari ...) Content-Type : 해당 요청이 보내는 메세지 body의 타입 (ex. application/json) Content-Length : body 내용의 길이 Authorization : 회원의 인증/인가를 처리하기 위해 로그인 토큰을 Authroization에 담는다. }
③ Body
해당 요청의 실제 내용으로, Body에는 실제 데이터가 들어간다. 주로 Body를 사용하는 메소드는 POST 이다.
🤚🏻 항상 "쌍따옴표"를 넣어야 하며, key가 바뀌면 comma, 를 넣어야 한다!!!
ex. 로그인 시 서버에 보낼 요청의 내용
Body: { "user_email": "saemsol@gmail.com" "user_password": "welcome" }
2-2. Response 메세지 구조
응답도 요청과 마찬가지로 메세지이며, HTTP 규약에 따른 응답의 구조도 크게 세 부분으로 구성되어있다. 응답 메세지의 구조는 아래와 같으며 request 와는 start Line <--> status Line 만 다르다.
- Status Line
- Headers
- Body
① Status Line
요청에 대한 처리상태를 클라이언트에게 알려주면서 내용을 시작한다. 이것 또한 세 부분으로 구성되어있다.
HTTP Version : 요청의 HTTP 버전과 동일
Status Code : 응답 메세지의 상태 코드
Status Text : 응답 메세지의 상태를 간략하게 설명해주는 텍스트
ex
HTTP/1.1 404 Not Found 해석: HTTP 1.1 버전으로 응답하고 있는데, 프론트엔드에서 보낸 요청(ex. 로그인 시도)에 대해서 유저의 정보를 찾을 수 없기 때문에(Not Found) 404 상태 메세지를 보낸다. HTTP/1.1 200 SUCCESS 해석: HTTP 1.1 버전으로 응답하고 있는데, 프론트엔드에서 보낸 요청에 대해서 성공했기 때문에 200 상태 메세지를 보낸다.
② Headers
요청의 헤더와 동일하다. 다만, 응답에서만 사용디는 헤더의 정보들이 있다.
Key: Value 의 형식으로 되어있다.
ex
요청하는 브라우저의 정보가 담긴 User-Agent 대신, Server 헤더가 사용된다.
③ Body
요청의 Body와 일반적으로 동일하다. 요청의 메소드에 따라 Body가 항상 존재하지 않듯이. 응답도 응답의 형태에 따라 데이터를 전송할 필요가 없는 경우엔 Body가 없을 수도 있다. 가장 많이 사용되는 Body 의 데이터 타입은 JSON(JavaScript Object Notation) 이다.
ex
로그인 요청에 대해 성공했을 때 응답의 내용 Body: { "message": "SUCCESS" "token": "kldiduajsadm@9df0asmzm" (암호화된 유저의 정보) }
3. Request Methods
메소드는 프론트엔드(클라이언트)의 입장에서 요청의 의도가 담긴 것이다.
- GET
- POST
- DELETE
3-1. GET
- 이름 그대로 어떤 데이터를 서버로 부터 받아(GET) 올 때 주로 사용하는 메소드이다.
- 데이터를 받아오기만 할 때 사용
- 가장 간단하고 많이 사용되는 HTTP 메소드
ex) 웹페이지를 띄울 때 필요한 정보들을 모두 GET 메소드로 요청보내서 받아온 응답을 화면에 띄워주는거다.
3-2. POST
- 데이터를 생성 / 수정할 때 주로 사용되는 메소드
- 데이터를 생성 및 수정할 때 많이 사용되기 떄문에 대부분의 경우, 요청에 body가 포함되어서 보내진다.
3-3. DELETE
- 메소드의 이름에서 유추 가능하듯, 특정 데이터를 서버에서 삭제 요청을 보낼때 쓰는 메소드
