210320 데브루키 발표자료

1. 웹 통신
2021.03.16 데브루키 쿵쾅(김광일)

2. 주제 선정 이유
DevOps 관련 업무 하면서 웹에 관심이 생김.
현재는 DevOps와는 다시 멀어져 게임 클라이언트에서 웹 통신 관련 기능 담당 중!
일단 그냥 Request 던지고 Response 받은거 처리하고 있음.
좀 더 통신에서 무슨 일이 있는지 알아야 할 것 같음

3. 게임에서 웹의 활용
롤 런처, 검은사막 인게임 웹 컨텐츠인 흑정령의 모험
웹에서 동작하는 MMORPG 매드월드, 웹에서 입력하는 쿠폰시스템 (iOS 관련 우회)

4. 웹(Web)
월드 와이드 웹(World Wide Web) 인터넷에 연결된 사용자들이 서로의 정보를 공
유할 수 있는 공간. WWW, W3 간단하게는 Web이라 부른다.

5. 웹의 특징
인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어를 하이퍼 텍스트
방식으로 연결하여 제공.

6. 하이퍼 텍스트(HyperText)
문서 내부에 또 다른 문서를 참조로 넣음으로 웹 상에 존재하는 여러 문서를 참조할
수 있는 기술. 문서 내부에서 또 다른 문서를 참조 하는 것을 하이퍼 링크라고 한다.

7. 하이퍼 텍스트(HyperText)
웹에서는 HTML을 사용하여 누구나 자신만의 문서를 작성할 수 있다.
또한 이렇게 작성된 HTML 문서를 HTTP라는 프로토콜을 사용하여 누구나 쉽게 접근할 수 있다.

8. HTTP (HyperText Transfer Protocol)
HTML 문서와 같은 리소스를 가져올 수 있도록 해주는 프로토콜
웹에서 이루어지는 모든 데이터 교환의 기초, 클라이언트 - 서버 프로토콜

9. HTTP (HyperText Transfer Protocol)
클라이언트와 서버는 개별적 메시지 교환으로 통신.
브라우저인 클라이언트의 요청은 Request, 서버의 응답은 Response

10. HTTP/0.9
HTTP는 초기엔 버전 구분이 없었으나 차후 버전과 구분을 위해 0.9로 불림
간단한 요청(GET)과 응답만으로 구성됨
Request
Response

11. HTTP/1.0
0.9버전 보다 확장되어 요청시 버전 정보를 전송하게 되었고 브라우저 요청에 대한 성공
실패 여부를 받을 수 있게 되었으며 Content-Type 덕분에 html 외에 다양한 파일을 주고
받을 수 있게 되었다.
Request
Response

12. HTTP/0.9~1.0 통신방식
TCP 통신을 사용하며 하나의 요청이 들어오
면 Connection을 맺고 응답을 한 후에 끊은 후
다음 요청을 또 받는 형태
한 번에 하나의 요청만 처리! 오래걸린다!

13. HTTP/1.1
Pipelining을 도입.
하나의 Connection에서 응답을 기다리지 않
고 순차적인 여러 요청을 보내 그 순서에 맞게
응답을 받는 방식으로 지연시간을 줄임

14. HTTP/1.1 문제점
첫 번째 요청의 처리 시간이 길어지면 그 뒤에
요청의 응답을 받는데 느려질 수 있음.
Head of Line Blocking이라고 한다.

15. HTTP/1.1 문제점
Header 구조 중복 문제
요청할 때 마다 Header가 더 커질 수 있음

16. HTTP/2
기존 1.X에 성능 향상에 초점을 맞춘 프로토콜. 표준이 아닌 확장.

17. HTTP/2
Multiplexed Streams
한 커넥션에 여러 응답을 주고 받을 수 있으며, 응답 순서 상관없이 Stream으로 주고 받

18. HTTP/2
바이너리 프레이밍 계층
이전 버전까지는 텍스트를 그냥 보냈었다면 2버전 부터는 메시지를 바이너리 형태의 프레임으로 나누고 이를 전송
후 받은 쪽에서 다시 조립하여 사용.

19. HTTP/2
요청과 응답이 동시에 이루어지니 하나의 연결이 여러 요청 응답에 섞여 있음. 하지만
프레이밍(framing, 구조화)을 서버와 클라이언트에서 해주기 때문에 큰 변경사항을 고려
하지 않아도 된다.

20. HTTP/2
Server Push
클라이언트의 단일 요청에 대해 여러 응답을 보낼 수 있음.

21. HTTP/2
Header Compression - Huffman Encoding을 이용한 무손실 압축

22. HTTP/2
중복된 내용은 전송하지 않는 방식으로 헤더 크기를 줄였다.

23. Huffman Coding
핵심 키워드는 내림차순 정렬, 이진트리

24. Huffman Coding
dessert 라는 문자가 있다면 문자의 출현 횟수는 위 와 같이 정리 된다.
dessert
d = 1
e = 2
s = 2
r =1
t = 1

25. Huffman Coding
문자의 출현 횟수를 이진 트리 노드로 정리하고 문자의 출현 횟수 기준으로 내림차
순 정렬

26. Huffman Coding
정렬 된 상태에서 가장 우측 2개의 노드(출현 횟수가 가장 낮은 노드)에 부모 노드를 만들어 준다. (부모 노드의 값
은 자식 노드의 출현 횟수 합산)
e, s 2번 d, r, t는 1번씩 출현빈도가 같지만 여기서 노드 순서를 정하는 기준 자체는 중요하지 않음.

27. Huffman Coding
다시 정렬을 해주고

28. Huffman Coding
다시 출현 빈도 수에 따라 정렬을 해주고

29. Huffman Coding
가장 마지막에 두 노드 위에 새로운 부모노드를 생성해준다.

30. Huffman Coding
계속 정렬, 부모노드 삽입

31. Huffman Coding
이 과정을 통해 하나의 이진트리가 완성이 되면 노드 좌측에는 0, 우측에는 1 값을
적용해서 해당하는 문자의 Huffman coding 결과 값을 알 수 있다
문자 출현 횟수 코드
e 2 00
s 2 01
r 1 100
t 1 101
d 1 11

32. Huffman Coding
테이블로 dessert를 encoding 하면 1100010100100101로 결과가 나오고
decoding은 앞에서부터 bit를 하나씩 비교하면서 위 테이블과 일치하는 코드가 있으면 해당 심볼로 변환
문자 출현 횟수 코드
e 2 00
s 2 01
r 1 100
t 1 101
d 1 11
dessert
1100010100100101

33. Huffman Coding
테이블 또는 이진트리가 있어야만 decoding이 가능하다.
입력 문자(심볼, 또는 기호)를 자식 노드로 하는 이진 트리를 만들어 접두 부호를 만들어내는 알고리즘.
dessert
1100010100100101

34. HTTP/2
현재 가장 많이 사용되는 HTTP/2

35. HTTP/2
HTTP/1.1 vs HTTP/2 속도 비교
https://www.youtube.com/watch?v=jhqrRT4fvOA

36. HTTP Method - GET
HTTP에서 주로 사용하는 Method 중 GET
서버로 부터 정보를 조회할 때 주로 사용. Header에 데이터를 담아 전송함. URL에 파라미터가 전부 노출됨.

37. HTTP Method - POST
HTTP에서 주로 사용하는 Method 중 POST
리소스를 생성/변경하기 위해 설계. GET과 달리 Body에 길이 제한 없이 데이터를 담아서 전송할 수 있음. 요청을
보낼 때에는 헤더에 반드시 Content-Type을 넣어서 보내야 서버가 어떤 형식의 데이터가 왔는지 알 수 있다.

38. QUIC 그리고 HTTP/3
차세대 HTTP
Google의 QUIC 프로토콜을 사용. 특징으로는 UDP 통신. 오늘은 자세히 다루지 않습니다.

39. HTTPS
HTTPS(Secure)
기존 HTTP 프로토콜의 보안 버전.

40. HTTPS
그냥 HTTP로 데이터를 주고 받을 때 중간에 보게 된다면 데이터가 전부 드러나 보
인다. 악용 가능!

41. HTTPS
HTTPS를 사용할 경우 주고 받는 데이터가 암호화 되어 중간에서 무슨 내용인지 알
수 없음!

42. HTTPS
대칭키 방식으로 암호화
특정 암호키를 서로 가지고 있으면서 암호화 복호화! 하지만 중간에 암호키를 가로챈다면 보안이 뚫린다.

43. HTTPS
Public Key와 Private Key 방식으로 암호화
Private Key로 암호화한 데이터는 Public Key로만 Public Key로 암호화한 데이터는 Private Key로만 복호화 가능!

44. REST API
개발자들 사이에 널리 쓰이는 일종의 형식.

45. WebSocket
HTML5 환경에서 사용되는 양방향 통신 프로토콜. 실시간 네트워킹

46. C++ HTTP 통신 라이브러리
WinHttp
libcurl(cURL)

47. 참고 자료
https://developer.mozilla.org/ko/docs/Web/HTTP/Connection_management_in_HTTP_1.x - MDN Web Docs
https://www.youtube.com/watch?v=xcrjamphIp4&t=165s - Youtube 우아한Tech 채널
https://developers.google.com/web/fundamentals/performance/http2?hl=ko - Google HTTP/2 소개
https://http2.tistory.com/1 - Huffman coding에 대한 설명 해놓은 블로그