WeCode 7기로 수업을 받고있는 슈퍼개발자,
춤추는망고입니다.
( 춤 안춥니다. )
- 이 글은 우리가 앞으로 할 일에 큰 도움이 될 글입니다.
(
큰 도움 == 큰 어려움)
인터넷의 역사와 인터넷 세상의 흐름을 어느정도 이해하고,
이제는 인터넷을 더 잘 이용하기 위해
이번글에서 여러분과 함께 공유할 내용은!
내가 누군가와 통신을 하기위해선?
통신의 구성과 활용 ( 심화 ) 입니다.
이번 글에선,
통신방식에 대한 기초지식을 가지게된 뉴비가
' 그럼 어떤식으로 써야하는거죠? '
라는 질문을 받게되어 헉쓰! 하고 주저앉을때,
일으켜 세워줄 아주 좋은 내용을 소개합니다.
레 ㅡ 츠기릿!
자!
저흰 지난글에서 HTTP 의 중요한 특징 2가지에 대해서 알아봤습니다.
이제, 인터넷 통신의 구성요소인
request 와 response 에 대해서 자세히 살펴보도록 하죠!
응답과 요청.
이 두 친구는 서로 가는 방향이 다릅니다.
그렇지만, 이 둘이 왔다갔다 하는 정보라는 사실은 변하지 않죠?
그래서, 둘을 구성하는 큰 틀은 같습니다.
HTTP 라는 방식을 고안한, ' 팀 버너스리 ' 님은
( 팀... 버너... 쓰리 ( 3 ) ... )
숫자 3을 너무나도 좋아해서 그만...
구성을 세가지 단위로 쪼갰죠...
지금부터 하나씩 알아보죠!
1. start line
여기서 통신의 전체적인 상태를 볼 수 있어요!
1 - 1 . request 의 start line 은?
- HTTP method
: 해당 request 가 의도한 action !
( GET, POST, PUT, DELETE, OPTIONS 등 )
- Request target
: 해당 request가 전송되는 목표 uri ! ( /login 등 )
- HTTP version
: 통신에 사용된 HTTP 버젼이에요! ( 1.0, 1.1, 2.0 등 )
1 - 2 . response 의 start line 은?
- HTTP version
: 통신에 사용된 HTTP 버젼이에요! ( 1.0, 1.1, 2.0 등 )
- Status code
: 응답 상태를 나타내는 코드~ ( 숫자로 되어 있어요! )
(500 코드가 뜬 백엔드 : 죄송합니다 프론트엔드님...)
- Status text
: 응답 상태를 간략하게 설명하는 문장쓰~
( 여기도 ' 3 ' ? ; ; )
2. headers
여기서 해당 통신의 개요를 볼 수 있어요!
- key value pair 로 구성되어있어요!
- 밑의 요소들로 구성되요!
( request 와 response 의 구성은 살짝 다르겠죠? )
Headers 의 구성요소쓰!
- Host
: 요청이 전송되는 target 의 host url 의 값이에요.
( 예 : google.com )
- User-Agent
: 요청을 보내는 클라이언트에 대한 정보에요.
( 예 : 웹브라우저에 대한 정보 )
- Server
: 응답을 보내는 서버에 대한 정보에요.
- Accept
: 해당 요청이 받을 수 있는 응답 ( response ) 의 타입이에요.
- Connection
: 요청프로세스 이후 네트워크 연결을 유지할 지에 대한 여부에요.
- Content-Type
: 뒤에서 볼 Body의 타입이에요.
( 예 : JSON 타입이라면? application/json ! )
- Content-Length
: 뒤에서 볼 Body의 총 길이값이에요.
참 많죠?
금방 익숙해지니, 굳이 외울 필요까지는 없어요~
3. body
통신의 내용이에요!
( body 가 없는 경우도 있어요~ )
자!
설명만 들으면, 어떤모양일지 상상하기 힘들테니,
예시의 모양을 보면서 느낌을 정리해보죠!
Request 형태의 예시쓰 !
POST /payment-sync HTTP/1.1
Accept: application/json
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Length: 83
Content-Type: application/json
Host: intropython.com
User-Agent: HTTPie/0.9.3
{
"imp_uid": "imp_1234567890",
"merchant_uid": "order_id_8237352",
"status": "paid"
}
Response 형태의 예시쓰 !
HTTP/1.1 404 Not Found
Connection: close
Content-Length: 1573
Content-Type: text/html; charset=UTF-8
Date: Mon, 20 Aug 2018 07:59:05 GMT
<!DOCTYPE html>
<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>
생략 {
했습 : 니다;
}
</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>
예시를 띄워두고,
다른 한쪽 창에는 설명을 띄워둔 상태로
하나하나 이해해나가는 것을 추천쓰! 합니다.
여기까지 이해 되셨나요?
다행이군요...
이번 내용은 중요하기때문에
1, 2, 3 편으로 나눴어요.
아직 갈길이 멀다는 말씀! ㅋㅋ
우리가 하는 통신은
이런 내용들이 담긴 상자들이 왔다갔다하는 상황이였다니!
놀랍지 않나요? ㅎ
이번 글에선,
왔다갔다하는 정보들에 대해서 깊이있게 알아봤어요.
다음 글에선,
오늘 알아본 구조의 세세한 내용들에 대해 알아보죠!
고생하셨습니다.
감사합니다. ( _ _)
