프론트앤드 시스템과 백엔드 API 시스템은 일반적으로 HTTP 프로토콜을 기반으로 통신한다.
HTTP
HyperText, Transfer Protocol의 약자
웹상에서 서로 다른 서버 간에 하이퍼텍스트 문서, 즉 HTML을 서로 주고 받을 수 있도록 만들어진 프로토콜, 통신 규약
웹상에서 네트워크를 통해 서버 사이에 통신할 때 어떠한 형식으로 서로 통신하자고 규정해놓은 통신 형식, 통신 구조
(서버 간의 통신에서도 서로 이해할 수 있는 공통의 통신 형식 필요 → 프로토콜(protocol))
HTTP 통신 방식
HTTP 통신 방식에는 2가지의 특징이 있다.
1. HTTP 요청(request)과 응답(response) 방식
2. Stateless
HTTP 요청과 응답방식
HTTP를 기반으로 통신을 할 때 클라이언트가 먼저 HTTP 요청을 서버에 보내면 서버는 요청을 처리한 후 결과에 따른 HTTP 응답을 클라이언트에게 보냄으로써 하나의 HTTP 통신이 된다.
백엔드 API 시스템의 엔드 포인트 구현도 기본적으로 HTTP 요청을 INPUT으로 받아 HTTP 응답을 OUTPUT으로 리턴하는 구조로 구현해야 함
@app.route("/ping", methods=['GET'])
def ping():
return "pong"
"ping" 엔드 포인트: HTTP 요청과 응답이 오고 가는 구조
HTTP 요청 : "/ping"주소에 GET 요청을 보내는 것
HTTP 응답 : 200 OK 상태 코드와 함께 "pong" 이라는 텍스트를 보내는 것
Stateless
stateless는 말 그대로 상태(state)가 없다는 뜻
HTTP 통신에서는 상태라는 개념이 존재하지 않음
각각의 HTTP 통신은 독립적이며, 그 전에 처리된 HTTP 통신에 대해 전혀 알지 못함
[장점]
- stateless이기 때문에 서버 디자인이 훨씬 간단해지고 효과적인 장점
- HTTP 통신들의 상태를 서버에서 저장할 필요 없음 →여러 다른 HTTP 통신 간의 진행이나 연결 상태의 처리나 저장을 구현 및 관리하지 않아도 됨
- 오직 각각의 HTTP 요청에 대해 독립적으로 응답만 보내주면 됨
[단점]
- statless이기 때문에 HTTP 요청을 보낼 때는 해당 요청을 처리하기 위해 필요한 모든 데이터를 매번 포함시켜 요청을 보내야 함
- 쿠기(cookie)나 세션(session) 등을 사용하여 HTTP 요청을 처리할 때 필요한 진행 과정이나 데이터를 저장함
쿠키(cookie)웹 브라우저가 웹 사이트에서 보내온 정보를 저장할 수 있도록 하는 조그만한 파일클라이언트가 필요한 정보를 포함해서 보낼 수 있으려면 클라이언트가 정보를 저장할 수 있는 메커니즘 필요, 이때 웹 브라우저는 쿠키라고 하는 파일을 사용해서 필요한 정보 저장
세션(session)쿠키와 마찬가지로 HTTP 통신 상에서 필요한 데이터를 저장할 수 있게 하는 메커니즘쿠키는 웹 브라우저, 즉 클라이언트 측에서 데이터를 저장하는 반면 세션은 웹 서버에 데이터를 저장함
HTTP 요청 구조
POST /payment-sync HTTP/1.1 ---(1)
Accept: application/json ---(2)
Aceept-Encoding: gzip, deflate
Connection: keep-alive
Content-Length: 83
Content-Type: application/json
Host: intropython.com
User-Agent: HTTPie/0.9.3
{ ---(3)
"imp_uid": "imp_1234567890",
"merchant_uid": "order_id_8237352",
"status": "paid"
}
HTTP 요청 메세지는 크게 다음의 세 부분으로 구성되어 있다.
1) START Line
2) Headers
3) Body
Start Line
HTTP 요청의 시작줄
ex) "search"엔드 포인트에 GET HTTP 요청을 보낸다면
→ GET/search HTTP/1.1
Start Line은 세 부분으로 구성되어 있음
- HTTP 메소드
- Request target
- HTTP version
▷ HTTP 메소드
해당 HTTP 요청이 의도하는 액션을 정의하는 부분
서버로부터 어떠한 데이터를 받고자 한다면 GET 요청을 보내고, 서버에 새로운 데이터를 저장하고자 하면 POST 요청을 보내는 식
HTTP 메소드에는 GET, POST, PUT, DELETE, OPTIONS 등 여러 메소드 있음
▷ Request target
해당 HTTP 요청이 전송되는 목표 주소를 말함
"ping" 엔드포인트에 보내는 HTTP 요청의 경우 request target은 "/ping"이 됨
▷ HTTP version
해당 요청의 HTTP 버전
HTTP 버전을 명시하는 이유는 HTTP 버전에 따라 HTTP version에 맞추어서 응답을 보낼 수 있도록 하기 위함
Header
start line 다음에 나오는 부분은 header
HTTP 요청 그 자체에 대한 정보를 담고 있음
ex) HTTP 요청 메세지의 전체 크기 같은 정보를 담고 있음
Header : 파이썬의 dictionary처럼 key와 value로 되어 있음
key와 value는 :로 연결 (=key:value)
ex) .google.com에 보내는 HTTP 요청의 Host 헤더의 경우
→ HOST : google.com
- Key는 HOST이다.
- Value는 google.com이다
HTTP 헤더는 다양한 헤더가 있는데 그 중 자주 사용되는 헤더 정보에는 다음과 같다.
▷ Host
요청이 전송되는 target의 호스트의 URL 주소를 알려주는 헤더
ex) Host : google.com
▷ User-Agent
요청을 보내는 클라이언트의 대한 정보
ex) 웹브라우저에 대한 정보
▷ Acceot
해당 요청이 받을 수 있는 응답 body 데이터 타입을 알려주는 헤더
MIME type이 value로 지정됨
ex) JSON 데이터 타입을 요청하는 경우에는 application/json MIME type을 value로 정해주면 됨
▷ Connection
해당 요청이 끝난 후에 클라이언트와 서버가 계속해서 네트워크 연결을 유지할 것인지 아니면 끊을 것인지에 대해 알려주는 헤더
HTTP 통신에서 서버 간에 네트워크 연결하는 과정이 다른 작업에 비해 시간이 걸리는 부분이므로 HTTP 요청 때마다 네트워크 연결을 새로 만들지 않고 HTTP 요청이 계속되는 한 처음 만든 연결을 재사용하는 것이 선호되는데, 그에 관한 정보를 전달하는 헤더
▷ Content-Type
HTTP 요청이 보내는 메세지 body의 타입을 알려주는 헤더
Accept 헤더와 마찬가지로 MIME type이 사용됨
ex) HTTP 요청이 JSON 데이터를 전송하면 Content-Type 헤더의 값은 application/json이 될 것임
▷ Content-Length
HTTP 요청이 보내는 메세지 body의 총 사이즈를 알려주는 헤더
ex) Content-Length : 257
Body
HTTP 요청 메세지에서 body 부분은 HTTP 요청이 전송되는 데이터를 담고 있는 부분이다.
전송하는 데이터가 없다면 body 부분은 비어있게 된다.
HTTP 응답 구조
HTTP 응답 메세지의 구조도 요청 메세지와 마찬가지로 크게 세 부분으로 구성되어 있다.
1) Status Line
2) Headers
3) Body
HTTP /1.1 404 Not Found ---(1)
Connection: close ---(2)
Content-Length: 1573
Content-Type: text/html; charset=UTF-8
Date: Mon, 20 Aug 2018 07:59:05 GMT
<!DOCTYPE html> ---(3)
<html lang=en>
<meta charset=utf-8>
<meta name=viewport content="initial-scale=1, minimum-scale=1,
width=device-width">
<title>Error 404 (Not Found)!!1</title>
<style>
*{margin:0;padding:0}html,code{font:15px/22px arial,sans-
serif}html{background:#fff;color:#222;padding:15px}body{margin:7%
auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* >
body{background:url(//www.google.com/images/errors/robot.png) 100%
5px no-repeat;padding-right:205px}p{margin:11px 0
22px;overflow:hidden}
ins{color:#777;text-decoration:none}a img{border:0}@media screen
and (max-width:772px){body{background:none;margin-top:0;max-
width:none;padding right:0}}#logo{background:url(//www.google.com/
images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-
repeat;margin-left:-5px}@media only screen and (min-
resolution:192dpi{#logo{background:url(//www.google.com/images/
branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0%
0%/100% 100%;-moz-borderimage:url(//www.google.com/images/
branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media
only screen and (-webkit-min-device-pixel-ratio:2
{#logo{background:url(//www.google.com/images/branding/
googlelogo/2x/googlelogo_color_150x54dp.png) no-
repeat;-webkit-background-size:100% 100%}}#logo{display:inline-
block;height:54px;width:150px}
</style>
<a href=//www.google.com/><span id=logo aria-label=Google></span></a>
<p><b>404.</b> <ins>That’s an error.</ins>
<p>The requested URL <code>/payment-sync</code> was not found on this
server. <ins>That’s all we know.</ins>
Status Line
이름 그대로 HTTP 응답 메세지의 상태를 간략하게 요약하여 알려주는 부분
다음과 같은 형태로 구성되며, HTTP 요청의 start line과 마찬가지로 status line도 다음과 같은 세 부분으로 구성되어 있다.
- HTTP Version
- Status Code
- Status Text
▷HTTP Version
HTTP 요청 메세지의 Start Line과 마찬가지로 사용되고 있는 HTTP 버전을 나타냄
▷Status Code
HTTP 응답 상태를 미리 지정되어 있는 숫자로 된 코드로 나타내 줌
ex) HTTP 요청이 정상적으로 처리가 되었으면 응답의 status code는 200이라는 숫자로 표현됨
▷ Status Text
HTTP 응답 상태를 간략하게 글로 설명해주는 부분
숫자로 표현되어 있는 status code만으로는 항상 응답의 상태를 사람이 파악하기 어려울 수 있으므로 그 부분을 보완해주는 역할
ex) HTTP 요청이 정상적으로 처리한 HTTP 응답의 status code는 200이 되고 status text는 "OK"가 된다.
헤더
HTTP 응답의 헤더 부분은 HTTP 요철의 헤더 부분과 동일하다.다만 HTTP 응답에서만 사용되는 헤더값이 있음ex) HTTP 응답에는 User-Agent 헤더 대신에 Server 헤더가 사용
Body
HTTP 응답 메세지의 body도 HTTP 요청 메세지의 body와 동일하다.요청 메세지와 마찬가지로 전송하는 데이터가 없다면 body 부분은 비어있게 된다.
ping 엔드 포인트 구현하는 것부터는 다음 포스팅에서!
참고하는 책 : "Do it! 점프 투 플라스크", "깔끔한 파이썬 탄탄한 백엔드"
'백엔드' 카테고리의 다른 글
| 플라스크 어플리케이션 만들기_초보 (0) | 2021.08.01 |
|---|---|
| 플라스크 프로젝트 생성하기 (0) | 2021.07.30 |
| 플라스크 개발 환경 준비하기 (0) | 2021.07.30 |
| ping 엔드포인트 구현하기 (0) | 2021.07.27 |
| Python : Flask 시작하기 (0) | 2021.07.20 |