|
|
| 1번째 줄: |
1번째 줄: |
| == HTTP란? == | | == 🌐 HTTP란? == |
| HTTP는 전송 계층 위에 있는 애플리케이션 계층으로 웹 서비스 통신에 사용된다.
| |
|
| |
|
| === HTTP/1.0 ===
| | '''HTTP(HyperText Transfer Protocol)'''는 |
| HTTP/1.0은 기본적으로 한 연결당 하나의 요청을 처리하도록 설계되어있다. 이는 서버로부터 파일을 가져올 때마다 TCP의 3-웨이 핸드셰이크를 계속해서 열어야 하기 때문에 '''RTT가 증가'''하는 단점이 있다.
| | 웹에서 HTML 문서나 이미지, 데이터 등을 주고받기 위한 **기본 통신 규약(약속)**입니다. |
|
| |
|
| ==== RTT의 증가를 해결하기 위한 방법 ====
| | * 웹 브라우저(클라이언트)와 웹 서버가 **요청과 응답**을 주고받을 때 사용됩니다. |
| 매번 연결할 때마다 RTT가 증가하니 서버에 부담이 많이 가고 사용자 응답 시간이 길어졌다. 이를 해결하기 위해 이미지 스플리팅, 코드 압축, 이미지 Base64 인코딩을 사용하였다.
| | * 우리가 주소창에 `https://example.com`을 입력하면, 브라우저는 HTTP를 통해 HTML 문서를 요청하고, 서버는 그에 맞는 응답을 보내줍니다. |
|
| |
|
| * `이미지 스플리팅` : 많은 이미지를 다운로드 받게되면 과부화가 걸리기 때문에 많은 이미지가 합쳐 있는 하나의 이미지를 다운로드 받고, 이를 기반으로 `background-image` 의 `position` 을 이용하여 이미지를 표기하는 방법이다.
| | ---- |
|
| |
|
| * `코드 압축` : 코드를 압축해서 개행 문자, 빈칸을 없애서 코드의 크기를 최소화하는 방법이다.
| | === 🔧 HTTP의 특징 === |
|
| |
|
| * `이미지 Base64 인코딩` : 이미지 파일을 64진법으로 이루어진 문자열로 인코딩 하는 방법이다. | | * **텍스트 기반의 프로토콜** |
| <br>
| | : 사람이 읽을 수 있는 구조 (예: GET /index.html) |
|
| |
|
| === HTTP/1.1 ===
| | * **요청(Request)과 응답(Response)**으로 구성 |
| HTTP/1.0에서 발전한 것이 바로 HTTP/1.1이다. 매번 TCP 연결을 하는 것이 아니라 한 번 TCP 초기화를 한 이후에 keep-alive라는 옵션으로 여러 개의 파일을 송수신할 수 있게 바뀌었다. 참고로 HTTP/1.0에서도 keep-alive가 있었지만 표준화가 되어 있지 않았고 HTTP/1.1부터 표준화가 되어 기본 옵션으로 설정되었다.
| | : 클라이언트가 요청하고, 서버가 응답함 |
|
| |
|
| 
| | * **Stateless (상태를 저장하지 않음)** |
| | : 요청 간의 연결 정보를 서버가 기억하지 않음 |
|
| |
|
| 다음 그림처럼 한 번 TCP 3-웨이 핸드셰이크가 발생하면 그다음부터 발생하지 않는 것을 확인할 수 있다. 하지만 문서 안에 포함된 다수의 리소스(이미지, css 파일, script 파일)를 처리하려면 요청할 리소스 개수에 비례해서 대기 시간이 길어지는 단점이 있다.
| | ---- |
|
| |
|
| ==== HOL Blocking ==== | | === 📬 HTTP 요청 메서드 === |
| 네트워크에서 같은 큐에 있는 패킷이 그 첫 번째 패킷에 의해 지연될 때 발생하는 성능 저하 현상을 말한다.
| |
| 예를 들어, image.jpg와 style.css, data.xml을 다운로드 받을 때 보통은 순차적으로 잘 받아지지만 image.jpg가 느리게 받아진다면, 그 뒤에 있는 것들이 대기하게 되며 다운로드가 지연되는 상태가 된다.
| |
|
| |
|
| ==== 무거운 헤더 구조 ====
| | 웹에서 요청할 때 사용하는 **기본 명령어**들입니다: |
| HTTP/1.1의 헤더에는 쿠키 등 많은 메타데이터가 들어 있고, 압축이 되지 않아 무거웠다.
| |
| <br>
| |
|
| |
|
| === HTTP/2 === | | {| class="wikitable" |
| HTTP/2는 SPDY 프로토콜에서 파생된 HTTP/1.x보다 지연 시간을 줄이고 응답 시간을 더 빠르게 할 수 있으며 멀티플렉싱, 헤더 압축, 서버 푸시, 요청의 우선순위 처리를 지원하는 프로토콜이다.
| | ! 메서드 !! 설명 !! 예시 |
| | |- |
| | | GET || 서버에서 데이터를 가져올 때 사용 || 페이지 보기 |
| | |- |
| | | POST || 서버에 데이터를 보낼 때 사용 || 회원가입, 로그인 |
| | |- |
| | | PUT || 서버에 데이터를 '수정'할 때 사용 || 글 수정 |
| | |- |
| | | DELETE || 서버에서 데이터를 삭제할 때 사용 || 글 삭제 |
| | |} |
|
| |
|
| ==== 멀티플렉싱 ====
| | ---- |
| 여러 개의 스트림을 사용하여 송수신한다는 의미로 이를 통해 특정 스트림의 패킷이 손실되었다고 하더라도 해당 스트림에만 영향을 미치고 나머지 스트림은 멀쩡하게 동작할 수 있다.
| |
|
| |
|
| ==== 헤더압축 ==== | | === 📥 HTTP 응답 코드 === |
| HTTP/1.x에는 크기가 큰 헤더라는 문제가 있었다. 이를 HTTP/2에서는 헤더 압축을 써서 해결하는데, `허프만 코딩 압축 알고리즘` 을 사용하는 HPACK 압축 형식을 가진다.
| |
|
| |
|
| * `허프만 코딩(huffman coding)` : 문자열을 문자 단위로 쪼개 빈도수를 세어 빈도가 높은 정보는 적은 비트 수를 사용하여 표현하고, 빈도가 낮은 정보는 비트 수를 많이 사용하여 표현해서 전체 데이터의 표현에 필요한 비트양을 줄이는 원리다. | | 서버는 요청에 대해 **숫자로 된 상태 코드**를 보내줍니다. |
| | 이 코드만 봐도 요청이 성공했는지, 실패했는지 알 수 있어요. |
|
| |
|
| ==== 서버 푸시 ==== | | {| class="wikitable" |
| HTTP/1.1에서는 클라이언트가 서버에 요청을 해야 파일을 다운로드 받을 수 있었다면, HTTP/2는 클라이언트 요청 없이 서버가 바로 리소스를 푸시할 수 있다.
| | ! 상태 코드 !! 의미 !! 설명 |
| | |- |
| | | 200 OK || 성공 || 요청한 작업이 잘 수행됨 |
| | |- |
| | | 301 Moved Permanently || 영구 이동 || 페이지 주소가 바뀜 |
| | |- |
| | | 400 Bad Request || 잘못된 요청 || 요청 문법 오류 등 |
| | |- |
| | | 401 Unauthorized || 인증 필요 || 로그인 필요 |
| | |- |
| | | 403 Forbidden || 접근 금지 || 권한 없음 |
| | |- |
| | | 404 Not Found || 찾을 수 없음 || 존재하지 않는 페이지 |
| | |- |
| | | 500 Internal Server Error || 서버 오류 || 서버에 문제가 있음 |
| | |} |
|
| |
|
| 예를 들어, html에는 css나 js 파일이 포함되기 마련인데 html을 읽으면서 그 안에 들어 있던 css 파일을 서버에서 푸시하여 클라이언트에 먼저 줄 수 있다.
| | ---- |
| <br>
| |
|
| |
|
| === HTTPS === | | === ✉️ 예시 흐름 === |
| HTTP/2는 HTTPS 위에서 동작한다. HTTPS는 애플리케이션 계층과 전송 계층 사이에 신뢰 계층인 SSL/TLS 계층을 넣은 신뢰할 수 있는 HTTP 요청을 말한다. 이를 통해 '''통신을 암호화'''한다.
| |
|
| |
|
| ==== SSL/TLS ====
| | ```http |
| SSL(Secure Socket Layer)은 SSL 1.0부터 시작해서 SSL 2.0, SSL 3.0, TLS(Transport Layer Security Protocol) 1.0 TLS 1.3까지 버전이 올라가며 마지막으로 TLS로 명칭이 변경되었으나, 보통 이를 합쳐 `SSL/TLS` 로 많이 불른다.
| | GET /index.html HTTP/1.1 |
| | | Host: example.com |
| * SSL/TLS은 전송 계층에서 보안을 제공하는 프로토콜이다.
| |
| * 클라이언트와 서버가 통신할 때 SSL/TLS를 통해 제 3자가 메시지를 도청하거나 변조하지 못하도록 한다.
| |
| * SSL/TLS를 통해 공격자가 서버인 척하며 사용자 정보를 가로채는 네트워크상의 인터셉터를 방지할 수 있다.
| |
| * SSL/TLS는 보안 세션을 기반으로 데이터를 암호화하며 보안 세션이 만들어질 때 인증 메커니즘, 키 교환 알고리즘, 해싱 알고리즘이 사용된다.
| |
| | |
| | |
| ==== SEO에도 도움이 되는 HTTPS ====
| |
| 구글(Google)은 SSL 인증서를 강조해왔고 사이트 내 모든 요소가 동일하다면 HTTPS 서비스를 하는 사이트가 그렇지 않은 사이트보다 SEO 순위가 높을 것이라고 공식적으로 밝혔다.
| |
| | |
| `SEO(Search Engine Optimization)` 는 검색엔진 최적화를 뜻하며 사용자들이 구글, 네이버 같은 검색엔진으로 웹 사이트를 검색했을 때 그 결과를 페이지 상단에 노출시켜 많은 사람이 볼 수 있도록 최적화하는 방법을 의미한다.
| |
| | |
| 서비스를 운영한다면 SEO 관리는 필수이며, 내가 많은 사이트에 사람들이 많은 사람이 유입될 수있도록 캐노니컬 설정, 메타 설정, 페이지 속도 개선, 사이트 관리 등이 있다.
| |
| | |
| ==== HTTPS 구축 방법 ====
| |
| HTTPS 구축 방법은 크게 세 가지로 나눌 수 있는데 직접 CA에서 구매한 인증키를 기반으로 HTTPS 서비스를 구착하거나, 서버 앞단의 HTTPS를 제공하는 로드밸런서를 두거나, 서버 앞단에 HTTPS를 제공하는 CDN을 둬서 구축한다.
| |
| <br>
| |
| | |
| === HTTP/3 ===
| |
| HTTP/3은 HTTP/1.1 및 HTTP/2와 함께 `WWW` 에서 정보를 교환하는데 사용되는 HTTP의 세 번째 버전이다. TCP 위에서 돌아가는 HTTP/2와는 달리 HTTP/3은 QUIC라는 계층 위에서 돌아가며, TCP 기반이 아닌 UDP 기반으로 돌아간다.
| |
| | |
| HTTP/2에서 장점이었던 멀티플렉싱을 가지고 있으며 초기 연결 설정 시 지연 시간 감소라는 장점이 있었다.
| |
| | |
| ==== 초기 연결 설정 시 지연 시간 감소 ====
| |
| QUIC은 TCP를 사용하지 않기 때문에 통신을 시작할 때 번거로운 3-웨이 핸드셰이크 과정을 거치지 않아도 된다.
| |
| | |
| QUIC은 첫 연결 설정에 1-RTT만 소요된다. 클라이언트가 서버에 어떤 신호를 한 번 주고, 서버도 거기에 응답하기만 하면 바로 본 통신을 시작할 수 있다는 것이다.
| |
| | |
| 참고롤 QUIC은 순 방향 오류 수정 메커니즘(FEC)이 적용되었다. 이는 전송한 패킷이 손실되었다면, 수신 측에서 에러를 검출하고 수정하는 방식이며, 열악한 네트워크 환경에서 낮은 패킷 손실률을 자랑한다.
| |
