HTTP
HTTP(Hyper Transfer Protocol)
하이퍼 텍스트(HTML같은 파일)를 통신(문서 교환)을 하기 위한 규약으로 내가 한국말을 한다고 다른 나라언어를 사용하는 사람들이 알아듣지 않는다. 한국어를 전달하는 것은 목소리인데 목소리와 같은 매개체를 네트워크라고 합니다. HTTP규약에 맞춰진 텍스트를 주고 받는다. 다른 프로토콜도 존재한다. 그 외에는 FTP(파일을 전송하는 프로토콜)
HTTP는 사람이 만든 것이니 원하면 만들 수 있습니다. 두 서버간끼리(프로토콜끼리) 통신을 하기 위해 필요한 것은? 송신자 수신자가 필요하고, 무엇을 보내고 싶은지(내용), 왜 보내는지 의도가 필요합니다. = 응답을 받을 때는 Packet(패킷)이라는 것에 실어서 보내게 된다. 패킷은 헤더와 바디로 이뤄져있는데, Header에는 보내는 사람의 주소, 받는 사람의 주소, 패킷의 생명시간 등이 담겨있다. Body는 전하고자 하는 실제내용.
흔히 보는 HTTP와 HTTPS의 공통점은 브라우저에서 웹 서비스를 사용시 사용한다.
- HTTP : Hyper Text Transfer Protocol
- HTTPS : Secure Hyper Text Transfer Protocol
이 외에 목적에 따라 다른 다양한 프로토콜들이 존재한다.
FTP/SFTP= 파일 전송 SSH/Telnet= 서버의 쉘 접근 SSL= 보안 소켓 통신 POP3/SMTP= 메일 전송
그외에는 TCP/UDP와 IP가 존재한다.
요청(Request)과 응답(Response)
HTTP는 요청과 통신으로 이뤄져있다. 클라이언트가 서버에 요청을 보내면, 서버는 응답을 주고 클라이언트는 응답 받은 결과를 보여줍니다. 예를 들면 http://google.com 를 요청하면 브라우저를 통해 google서버에 페이지를 클라이언트가 응답을 받아 google.com이라는 사이트를 화면에 보여줍니다.
HTTP통신
HTTP는 독립적이며 상태가 없는 Stateless입니다. 고로 상태가 없습니다. 해당 통신 전에 다른 통신이 있었다는 걸 인지하지 못하기에, 각각 통신들은 자기들 밖에 모릅니다. = 서버 요청을 하고 요청한 파일들을 모두 응답 받으면 통신이 종료됩니다. 커넥션(Connection)이 계속 연결되어있지 않다.
생길 수 있는 문제는?
로그인을 했다는 상태를 인지하지 못합니다. 사이트에가서 로그인을 하면 요청을 보낼 때 받는 사람이 요청을 처리하기 위한 모든 정보를 포함을 해서 보내야한다. 로그인을 이미 한 사람이라는 것을 해당 요청시 보내준다. 그러면 그 값은 누가 저장해? 요청하는 사람이 저장해야하는데 그걸 저장하는게 쿠키(저장의 date가 길고)나 세션(짧다)입니다. 로그인을 했다는게 유저의 브라우저가 쿠키를 사용해서 저장해야합니다. 해당 유저가 로그인 할 땐 서버가 해주는 것이기에, 웹 토큰이라는 걸 사용해서 토큰화 시켜서 토큰을 첨부합니다.
HTTP Request Message구조
Start Line
- HTTP Method
- Request Target
- HTTP Version
Header
Key와 Value로 이루어짐
Body
실제 데이터를 담고 있는 영역
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"
}
호스트는 우리집 오세요라고 초대를 한건데, 찾아갈 수 있어? 없어 -> 상세 주소가 없으니까
리퀘스트 타겟은 상세주소까지 알려주는 것에 해당한다. 요청을 보내는 특정 엔드포인트
https://gwonran.tistory.com/manage/ 에서 com/까지가 호스트 그 뒤가 엔드포인트
HTTP Response Message구조
Status Line
- 요청에 대한 응답을 줘야하는데 그 요청에 대한 상태를 나타내는 것.
- HTTP 버전
- Status Code : 응답 상태 코드를 숫자로 나타냄
- Status Text : 응답 상태를 설명
Headers
리퀘스트와 동일하다. User-Agent라는 헤더가 없고 서버라는 헤더를 사용한다.
Body
실제 데이터를 담고 있는 영역
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>
*{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-border-image: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>
요청을 할 때 데이터를 담아서 주려면 어떻게 해야해? Key와 Value에 값을 담아야한다. 이 값을 전송하려고 하는데 Key와 Value는 Object내부에 담겨있지 그러면 Object를 담은 데이터를 전송하려면 JSON을 사용해하지? → 이에 대한 뒷 내용은 JWT Fetch에서 다루기!
자주 쓰이는 HTTP Method
- Get : 말그대로 뭐 가져오는 것 요청시, 어떤 데이터를 주세요! 하는 것 데이터 수정 삭제 X 온전히 데이터를 받아오는 요청이기에 해당 body가 비어있을 일이 많다,
- Post : 데이터 생성, 수정
- Delete : 무언가를 삭제요청
- Put : 최근엔 post한테 밀려서 안쓴다. put을 쓰는 곳도 있긴하다.
Status Code
200 OK = 응답에 성공
가장 자주 사용하는 상태로, ‘너가 보내준 요청을 내가 성공적으로 처리를 해줬다.‘라는 의미를 가지고 있다. 만약 로그인이 성공적으로 잘되었으면 body에 출력되지 않는다. <응답에 바디가 없는 경우는? 로그인이다. 로그인은 아디이랑 비밀번호를 보내면 맞다라는 응답을 status로 보내니까 굳이 응답할게 없다. 그 다음페이지로 넘어가는 코드를 보내줘야 하지 않느냐? HML(UI, UX)은 누구의 역할이라고? 프론트 역할 백엔드의 역할은 데이터 처리, 백엔드가 응답에 그 다음 페이지로 안보내도되는 이유는?, 그 다음은 프론트가 처리해준다.> 200 OK을 보내면 요청한 내용을 제대로 응답을 받은 것이기에 브라우저가 이미 코드를 가지고 있으니까 다음에 보여줄 이미지를 프론트에서 보여준다.
2세대는 서버에서 백엔드와 프론트엔드를 동시에 해준다. 지금 3세대(SPA 싱글 페이지 어플리케이션)는 프론트와 백이 아예 분리가된다. 리액트를 사용해서 한 페이지에서 다이나믹하게 여러 페이지 status로 브라우저는 동일하게 html이 있으면 렌더링해주는 것으로 브라우저의 차이는 없다. 리액트 처럼 안쓰면 2세대 처럼 하는 것이다. 네이버는 spa가 불가능한 이유가 옛부터 너무 방대해서 호환성의 문제가 발생할 수 있기에 다 렌더링이 될 수 잇도록 JS는 옛날 브라우저 호환 X spa는 보안이 너무 민감하면 너무 분리가 되어있다보니까 API가 퍼블릭과 같다. 사이트에서 직접 호출 데이터를 끓어쓰자. html 데이터가 담겨오기에 쉽게 당겨오지 못한다.) 만약 404이러면모든 status code는 3세대가 응답을 주고 데이터가 들어갈 수 있는데 Html에 들어가는 데이터 실제 html은 프론트에서. 2세대는 브라우저와 상관이없다. 최초에 spa로 데이터만 다이나믹하게 받는 것이냐?
301 Moved permanently
Moved Per 해당 url가 변경되었다고 알려주는 것.
400 Bad Request = 웹사이트 이용자에게서 발생하는 문제
너의 요청이 잘못되었어(예시 : 전화번호를 보내야하는데 010-가나다라-acbc로 되어있는데 그런 경우 500 Interal server을 보낼 수 있다.)
401 Unauthorized
비밀번호나 아이디가 회원가입 했던 것과의 동등이 필요하다. alert을 띄우고 로그인 창(스스로를 인증)유저의 잘못을 서버가 확인해주는 것
403
요청 권한이 없다는 뜻(로그인이 되어있는데 권한이 없다. 이 유저는 무료 유저인 것이다.)
404 Not Found
요청을 보낸 리퀘스트 타겟(상세주소)이 존재하지 않는다. Host가 아니라 만약 Host가 안찾아지면 접속 자체가 안돼에러를 던져줄만한 주체도 없는 것이다.(가장 유명한 에러)
500
서버가 처리 방법을 모르는 상황과 마주쳤다. 서버는 아직 처리 방법을 알 수 없다.서버 내부의 에러가 났다 = 백엔드에서의 문제 백엔드가 싫어하는 코드이다.
400/500의 차이는?
둘다 정상적인 처리가 아니다라는 것은 동일하지만, 왜 더 정확하게 명시를 해줘야할까? 클라이언트가 고칠 수 있게 500은 서버 에러가 난 것 처럼 보인다. 400은 프론트에서 제대로 핸들링 못한 것.
어디서 확인할 수 있을까?
개발자도구 -> 상단 tab -> Network -> API를 받아온 파일 확인
개발자가 코드를 짜는건가? 맞음 의미가 가지고 있는 상황을 거기에 맞춰서 코딩을 해서 던져줘야한다.
프론트가 코드를 제대로 짜면 어지간한 에러는 404아니면 안난다? - 그렇지 않다 ㅎㅅㅎ
HTTP 상태 코드
번역이 완료되지 않았습니다. Please help translate this article from English HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다: 정보를 제
developer.mozilla.org
어디서 확인할 수 있을까?
개발자도구 -> 상단 tab -> Network -> API를 받아온 파일 확인
Network상단 그래프 같은 것들은 리소스들을 얼마나 걸려서 가져오는지, 언제 가져오는지 타임라인을 가르키고 아래의 목록에서는 리소스들의 목록이고 하나를 클릭하면 패킷 정보를 볼 수 있다.
- General : 요청 url 정보와 메소드, 상태 코드를 확인할 수 있습니다.
- Response Headers : 응답 헤더. 응답 온 패킷의 헤더를 확인할 수 있습니다. 서버의 종류, 연결 상태 등이 담겨 있습니다.
- Request Headers : 요청 헤더. 요청을 보낸 패킷의 헤더를 확인할 수 있습니다. 보낸 클라이언트의 종류, 요청한 파일의 종류 등을 알 수 있습니다.
오답노트
- 회원 정보를 수정 시에는 PUT/PATCH/POST를 사용하는데 최근에는 주로 POST 함수를 사용. DB에서 더 효율적으로 처리한다.
- HTTP는 Stateless이다. / BE ↔ FE 통신에 필요하다. / HTTP는 기본적으로 Request/response 구조 / 백앤드와 백앤드끼리 요청에도 사용이 가능하다. / 클라이언트에서 서버로 부터 받은 데이터는 HTTP Request를 확인하면 된다.
- 로그인 진행하는 엔드포인트 작성 시 POST
- Header에 token이 들어가는 이유 (token은 Header안에 있어) : 클라이언트가 API에 요청을 보낼 때, 클라이언트를 인증해야한다. 클라이언트에는 API 토큰이 존재하며 표준 Authorization 헤더를 사용하여 토큰을 서버로 보내는 것. Authorization 사용자 정의 헤더
참고사이트
SantonyChoi/what-happens-when-KR How does basic HTTP authentication work? HTTP 상태 코드 HTTP 메시지