[네트워크] HTTP(HyperText Transfer Protocol)

웹의 요소

• HTML : 웹페이지를 만드는 컴퓨터 언어
• URL, URI : 원하는 웹페이지에 방문 할 수 있도록 도와주는 주소 체계로 URI가 상위개념으로 URL과 URN(고유한 리소스 자체 표현)을 포함하고 있음
• Web browser, Web server : 웹 애플리케이션의 클라이언트와 서버
• HTTP : 웹브라우저와 웹서버가 통신 할 때의 통신 규약(Protocol)

HTTP(HyperText Transfer Protocol)

HTTP 트랜잭션

• HTTP 요청과 응답이 하나의 묶음을 이루도록 설계되어 있고, 요청-응답 묶음을 HTTP 트랜잭션이라고 함
• 트랜잭션(Transaction) : 쪼개질 수 없는 처리, 원자성을 가진 연산

HTTP 트랜잭션 확인하기

1. 개발자 도구(크롬 윈도우:F12/맥:⌥ ⌘ i)를 열고 웹 페이지에 접속(개발자 도구를 열기 전 발생한 HTTP 트랜잭션은 기록되지 않음)
2. [Network] 탭 클릭 - [Name] 영역에서 해당 URL 클릭

• Headers
  • HTTP 헤더 정보 - 요청에 대한 헤더와 응답에 대한 헤더
• Payload
  • 데이터 전송에 포함되는 내용의 데이터
  • 요청의 바디에 해당하는 데이터가 있는 경우 해당 탭에서 확인 가능
  • 요청의 바디가 없을 경우 탭이 보이지 않음
• Privew
  • 응답의 바디에 포함된 데이터를 보기 좋은 형태의 미리보기로 제공 - 이미자 파일 등
  • 응답의 바디에 HTML 문서가 있다면 웹 브라우저에서 보이는 것처럼 미리보기 가능
• Response
  • 응답의 바디에 포함된 데이터를 문자열, 문서 그대로 보여줌
  • 이미지 파일의 경우 바이너리 데이터로 보여 주지 않고 'This request hsa no response data available' 문구 표시
• Initiator
  • 'Request call stack'과 'Request initator chain'등을 통해 HTTP 트랜잭션이 시작되는 주체와 종류 확인
  • 웹 페이지가 느리게 로딩된다면 이 탭에서 'Request call stack'과 'Request initator chain'에서 순환되는 것이 있는지 체크
• Timing
  
  • 연결을 사용하려고 대기하는 시간, 실제 요청이 날아가는 시간, 응답의 다운로드를 시작하는 시간, 응답의 다운로드가 완료된 시간, 화면 렌더링을 완료한 시간 등 여러 가지 정보를 확인 가능
• Cookies
  • 'Request Dookies'와 'Response Cookies'로 나눠어 표현
  • 요청과 응답에 포함된 쿠키를 나타내는 탭
  • 쿠키는 헤더의 일부로, 인증과 인가에 활용할 수 있는 값

HTTP 특징

• HTTP는 웹 페이지들 사이에서 링크를 타고 다니면서 정보를 전송하는 통신 규약(Protocol) 의미

HTTP/1.1

• HTTP 프로토콜이 안정적으로 자리 잡은 버전, 가장 널리 사용되고 있는 버전
• 클라이언트의 요청으로 HTTP 트랜잭션이 시작 됨 - 서버에서 데이터를 줘야 할 때 실시간으로 줄 수 없다는 한계가 있음
• 무상태성(Stateless)으로 상태를 가지지 않음 - HTTP 트랜잭션 사이에 연관 관계가 없음
• 비연결성(Connectionless) - 통신을 모두 완료하면 두 주체는 연결을 끊음
  • 장점 : 클라이언트와 서버의 자원을 효율적으로 사용 가능
  • 단점 : 매번 HTTP 트랜잭션마다 연결을 맺고 끊는 과정이 추가되어 오버헤드가 발생
• 사람에게 친화적인 프로토콜 - 사람이 읽을 수 있는 형태로 헤더를 주고 받음(HTTPS에서는 헤더가 암호화되기 때문에 바로 알아볼 수 없음)

HTTP/2

• HTTP/1.1 버전 기초에 두고 있고, 현재 빠르게 HTTP/2 버전으로 전환 중
• 다중화(Mutiplexing) - 하나의 커넥션에서 여러 개의 요청을 순서에 상관없이 응답이 오는대로 동시에 다중 처리 가능
• 헤더 압축 - 사람이 바로 읽을 수 있는 형태는 사이즈를 키우고, 파싱하는데 비효율적이어서 낮은 성능을 보임 
• 서버 푸시(Server Push) - HTML 요청시 들어 올 요청 해상을 통해해 CSS, JS, 이미지 파일들을 요청이 오기 전에 서버 쪽에서 클라이언트에 보내 둠

HTTP/3

• QUIC(Quick UDP Internet Connections)이라는 UDP를 사용하는 프로토콜
  • 핸드쉐이킹 과정이 없어서 오버헤드를 줄임
  • UDP 헤더 - 출발지 포트, 데이터의 길이, 체크섬 정도만 가지고 있음
  • HTTP 통신에서 TCP가 해주던 여러 기능은 필요한 부분만 추가로 구현하여 빠르게 통신이 가능하도록 만듦

 

HTTP 요청과 헤더와 바디

HTTP 요청 헤더

http request header format 구글 검색

Request Line : 1번째 줄

•  HTTP 요청 메서드 / 웹서버에 요청하는 정보(경로) / HTTP 버전정보

Request Headers : 나머지 줄

• Host : 반드시 적어야 하는 것으로 인터넷에 연결되어 있는 컴퓨터를 각각의 것으로 식별하는 이름.
  우리가 요청하는 '웹사이트의 주소 + 포트번호'
• User-Agent : 요청하는 웹브라우저의 정보
• Accept-encoding : 데이터의 양이 많을 때 압축하여 전송하는데 그 때 웹브라우저가 사용하는 압축방식

HTTP 요청 메서드들

특징

• 안전한 메서드
  • 대상이 되는 자원의 상태를 변경하지 않는 메서드
  • HTTP/1.1 안전한 메서드 - GET, HEAD, OPTIONS...
  • GET : @RequestMapping 추가시 HEAD, OPTIONS도 WAS가 자동으로 생성
  • GET 메서드는 특정 URL에 접속하기만 해도 요청이 날아갈 수 있음 - 자원의 상태를 변경하는 API에 GET메서드 사용하는 것은 위험한 API 설계
• 멱등성 있는 메서드
  • 한 번 호출한 것과 여러 번 호출한 것이 같은 자원의 상태를 가지는 것
  • 같은 요청시 같은 결과만 있어야 함(매 요청마다 새로운 자원이 생성되면 안됨)
  • 멱등성 없는 메서드 - POST, PATCH
  • 멱등성 있는 메서드 - GET, PUT, DELETE
• GET은 반드시 안전한 메서드, PUT DELETE는 멱등성이 있는 메서드, POST는 반드시 멱등성이 없어야 하는 것은 아님

종류

• GET - 읽기
  • 특정 자원에 대한 조회 요청
• HEAD
  • GET 메서드에 대한 요청과 동일한 효과
  • 단, 바디를 제외한 헤더 부분만 응답 받음
• POST - 생성하기
  • 새로운 자원 생성을 요청
  • 새로운 자원은 요청 바디에 있는 내용을 바탕으로 생성
• PUT - 수정하기
  • 기존에 있던 자원을 요청 바디에 있는 내용으로 변경
• PATCH
  • 기존 자원을 변경
  • 단, 해당 자원의 일부만 변경
• DELETE -삭제하기
  • 특정 자원 제거
• OPTIONS
  • 해당 경로에서 어떤 HTTP 요청 메서드를 사용할 수 있는지 알려 줌

각 기능별 메서드

• 생성하기 : POST  - 생성하기는 멱등성이 없어야 함
• 읽기 : GET - 읽기 연산은 안전해야 함
• 수정하기 : PUT - 수정하기는 보통 멱등성이 있어서 동일한 내용으로 요청하면 한 번 수정된 이후도 동일한 상태를 가짐
• 수정하기 : PATCH - 자원의 일부만 수정하는 기능이면서 멱등성이 없을 시 사용
• 삭제하기 : DELETE - 삭제하기는 보통 멱등성이 있어야 하며, 해당 ID를 기준으로 한 번 삭제하면 이후에도 동일하게 자원이 삭제 된 상태 유지

HTTP 요청 바디와 데이터 전달 방식

URL을 통한 데이터 전달 - 쿼리 파라미터(or 쿼리 스트링)

https://www.google.com/search?q=HTTP+Request&newwindow=1&...

• 쿼리 파라미터(or 쿼리 스트링)
  • 도메인정보/경로 뒤에 물음표로 시작하여 뭔가 값을 전송하고 있는 것
  • 형식 : key=value 
  • URL 인코딩 : 띄어쓰기나 특정 문자열 아스키 코드 외의 문자를 다른 형태로 인코딩(띄어쓰기의 경우 +)
• 패스 베리어블 
  • article?id=123 같이 ID가 특정 숫자인 article을 조회한다는 의미
  • 일반적으로 특정 자원 그 자체를 지칭할 때 사용
• 컨트롤러 쪽에서 활용시 form과 동일하게 @RequestParam 사용
• 링크를 공유하는 것만으로 다른 사람들에게 내가 보는 것과 동일한 페이지를 전달 가능
• 쿼리 파라미터를 통한 HTTP 요청 헤더와 바디
  • 헤더 : GET /경로?쿼리파라미터 HTTP버전
  • 바디 : 없음

요청 바디를 통한 데이터 전달

• 헤더 
  • Content-Type : 요청한 Type으로 form과 JSON 등 보내는 데이터 타입에 따라 변경 됨(MIME 타입 검색)
• 바디
  • JSON type 요청시 바디에 JSON 데이터가 답겨 있음 - @RequestBody 통해 받을 수 있음(GET메서드로 데이터 요청시 바디에 데이터를 넣는 것을 권장하지 않음)

 

HTTP 응답 헤더와 바디

HTTP 응답 헤더

http response header format 구글 검색

status Line : 1번째 줄

• version : http 버전
• status code : 응답결과
• phrase : 응답결과를 사람이 이해하기 쉽게 설명(’http status codes’ 검색)

header Line : 나머지 줄

• header field name : value으로 이루어져 있음
• 유명한 헤더
  • Content-type : 웹서버가 응답할때 어떤 형식의 메타데이터인지 나타냄
  • Content-Length : 응답바디에 포함된 데이터 크기를 byte단위로 표기
  • Content-Encoding : 압축정보
  • Last-Modified : 마지막으로 수정된 정보

HTTP 응답 상태 코드

• 1XX : 정보성 상태 코드 - 무언가 계속되는 상태
• 2XX : 성공을 의미하는 상태 코드 - 수신/이해/수락
  • 200 : 성공을 의미, 200 OK
• 3XX : 리다이렉트를 의미하는 상태 코드 - 요청을 서버에서 처리하지 않고 다른 곳으로 유도, 2번의 HTTP 트랜잭션 발생
  • 301 : 리다이렉트 의미로 본래 URL 상태코드는 301, 영구히 리다이렉트 된 HTTP 트랜잭션은 200 상태 코드 , 301 Moved Permanently
  • 302 : 임시로 새로운 위치로 리다이렉트
• 4XX : 클라이언트 오류에 해당하는 상태 코드 - 요청에 잘못된 구문이 포함되어 있거나 다른 이유에 의해 수행 불가
  • 404 : 존재하지 않는 경로 접속, 400 Not Found
  • 400 : 요청 파라미터가 잘못된 경우 발생, 400 Bad Request
•  5XX : 서버 오류에 해당하는 상태 코드 - 서버에서 요청을 처리하는 과정에서 문제가 발생
  • 500 : 서버 요청 처리 과정에서 에러 발생, 500 Internal Server Error

HTTP 응답 바디

• 응답 헤더의 Content-Type에 맞춰 Body가 달라짐 - JSON의 경우 JSON 데이터로 보여짐

 

 

 

추가적으로 공부 할 내용..

HTTP와 HTTPS의 차이점

• https : HTTPS or SSL ⇒ s : secure(안전한)
• 웹을 통해서 여러가지 정보를 다루고 있다. https를 사용하면 정보가 암호가 되어있기 때문에 안전성이 높아진다.
• HTTP는 요청과 응답을 평문으로, HTTPS는 요청과 응답을 암호화하여 주고 받음 
• HTTP는 80번, HTTPS는 443 포트를 사용

Cache

• 접속 할 때마다 새로 다운 받지 않고, 이미 저장 된 파일을 읽어서 성능을 향상 시키는 기법 내용이 갱신 되었을 때 웹브라우저가 그 사실을 알아차리지 못한다는 단점이 있다..
• 캐시 갱신 ⇒ Windows : Ctrl + F5 / MacOS : Cmd + R / Linux : F5
• chache-control / pragma : 캐시를 제어하는 테크닉
• Cookie
  웹사이트를 방문할 때 이전에 처리했던 기록들을 웹사이트와 웹브라우저가 기억하고 있게 한다. 쿠키 값을 웹브라우저에 설정하면 접속할 때마다 그 설정으로 사용자의 상태 유지, 사용자 식별등을 한다.
• web storage : 쿠키보다 많은 정보를 저장하고 보안 쪽으로 우수한 기술
• proxy : 웹브라우저와 웹서버 사이에 중계서버(프록시서버)를 두고 캐시를 대신해주거나, 보안 관련 공격을 막아주고, 사용자 요청을 여러 대 서버로 분산 등등의 역할을 해준다.

네트워크 모니터링

• 웹브라우저 Developer tools ⇒ Network
• wireshark ⇒ 오픈소스, 무료, http 포함 컴퓨터에서 일어나는 모든 네트워크 트래픽 감시 도구