공부 :: 공부

HTTP 애플리케이션을 개발한다면 HTTP 커넥션과 그것이 어떻게 사용되는지에 대해 잘 이해해야 한다.

TCP 커넥션

전 세계 모든 HTTP 통신은, 지구상의 컴퓨터와 네트워크 장비에서 널리 쓰이고 있는 패킷 교환 네트워크 프로토콜들의 계층화된 집합인 TCP/ IP를 통해 이루어진다. 세계 어디서든 클라이언트 애플리케이션은 서버 애플리케이션으로 TCP/IP 커넥션을 맺을 수 있다.

일단 커넥션이 맺어지면 클라이언트와 서버 컴퓨터 간에 주고받는 메시지들은 손실 혹은 손상되거나 순서가 바뀌지 않고 안전하게 전달된다.

죠의 컴퓨터 가게에서 전동공구의 최신 가격 목록을 가져온다고 해보자.

http//www.joes-hardware.com:80/power-tools.html

이 URL을 입력받은 브라우저는 다음과 같은 단계를 수행한다.

1단계 ~ 3단계에서 URL을 통해 서버의 IP 주소와 포트 번호를 가져오고, 4단계에서 웹 서버가 TCP 커넥션을 맺고 커넥션을 통해 요청 메시지가 전달된다. 6단계에서 응답을 읽고 7단계에서 커넥션이 끊어진다.

HTTP 커넥션은 몇몇 사용 규칙을 제외하고는 TCP 커넥션에 불과하다. 신속 정확하게 데이터를 보내고자 한다면 TCP의 기초적인 내용을 알아야 한다.

TCP는 HTTP에게 신뢰할 만한 통신 방식을 제공한다. TCP 커넥션의 한쪽에 있는 바이트들은 반대쪽으로 순서에 맞게 정확하게 전달된다.

TCP스트림은 세그먼트로 나뉘어 IP 패킷을 통해 전송된다

TCP는 IP 패킷(혹은 IP 데이터그램)이라고 불리는 작은 조각을 통해 데이터를 전송한다. HTTP가 메시지를 전송하고자 할 경우, 현재 연결되어 있는 TCP 커넥션을 통해서 메시지 데이터릐 내용을 순서대로 보낸다. TCP는 세그먼트라는 단위로 데이터 스트림을 잘게 나누고, 세그먼트를 IP 패킷라고 불리는 봉투에 담아서 인터넷을 통해 데이터를 전달한다. 이 모든 것은 TCP/IP 소프트웨어에 의해 처리되며, 그 과정은 HTTP 프로그래머에게 보이지 않는다.

각 TCP 세그먼트는 하나의 IP 주소에서 다른 IP 주소로 IP 패킷에 담겨 전달되고, 이 패킷들은 다음을 포함한다.

IP 패킷 헤더(보통 20바이트)
TCP 세그먼트 헤더(보통 20바이트)
TCP 데이터 조각(0 혹은 그 이상의 바이트)

IP 헤더는 발신지와 목적지 IP 주소, 크기, 기타 플래그를 가진다.

IP 패킷은 TCP 데이터 스트림의 덩어리를 운반하는 TCP 세그먼트를 실어 나른다.

TCP 커넥션 유지하기

컴퓨터는 항상 TCP 커넥션을 여러 개 가지고 있다. TCP는 포트 번호를 통해서 이런 여러 개의 커넥션을 유지한다. 포트 번호는 회사 직원의 내선전화와 같다. 회사의 대표 전화번호는 안내 데스크로 연결되고 내선전화는 해당 직원으로 연결되듯 IP 주소는 해당 컴퓨터에 연결되고 푸트 번호는 해당 애플리케이션으로 연결된다. TCP 커넥션은 네 가지 값으로 식별된다.

<발신지 IP 주소, 발신지 포트, 수신지 IP 주소, 수신지 포트>

위 네 가지 값으로 유일한 커넥션을 생성한다. 서로 다른 두 개의 TCP 커넥션은 네 가지 주소 구성요소의 값이 모두 같을 수 없다.

어떤 커넥션들은 같은 목적지 포트 번호를 가리킬 수 있다. 하지만 네 가지 커넥션 구성요소를 모두 똑같이 가리키는 커넥션은 있을 수 없다.

HTTP 트랜잭션 지연

HTTP 요청 과정에서 어떤 네트워크 지연이 발생하는지 살펴보자.

트랜잭션을 처리하는 시간은 TCP 커넥션을 설정하고, 요청을 전송하고, 응답 메시지를 보내느 것에 비하면 상당히 짧다는 것을 알 수 있다. 클라이언트나 서버가 너무 많은 데이터를 내려받거나 복잡하고 동적인 자원들을 실행하지 않는 한, 대부분의 HTTP 지연은 TCP 네트워크 지연 때문에 발생한다.

지연 원인

클라이언트는 URL에서 웹 서버의 IP 주소와 포트 번호를 알아내야 한다. 만약 URL에 기술되어 있는 호스트에 방문한 적이 최근에 없으면, DNS 이름 분석 인프라를 사용하여 URL에 있는 호스트 명을 IP 주소로 변환하는데 수십 초의 시간이 걸릴 것이다.
클라이언트는 TCP 커넥션 요청을 서버에게 보내고 서버가 커넥션 허가 응답을 회신하기를 기다린다. 커넥션 설정 시간은 새로운 TCP 커넥션에서 항상 발생한다. 이는 보통 1~2초의 시간이 소요되지만, 수백 개의 HTTP 트랜잭션이 만들어지면 소요시간은 크게 증가할 것이다.
커넥션이 맺어지면 클라이언트는 HTP 요청을 새로 생성된 TCP 파이프를 통해 전송한다. 웹 서버는 데이터가 도착하는 대로 TCP 커넥션에서 요청 메시지를 읽고 처리한다. 요청 메시지가 인터넷을 통해 전달되고 서버에 의해서 처리되는데 까지는 시간이 소요된다.
웹 서버가 HTTP 응답을 보내는 것 역시 시간이 소요된다.

성능 관련 중요 요소

TCP 커넥션의 핸드셰이크 설정
인터넷의 혼잡을 제어하기 위한 TCP의 느린 시작
네이글(nagle) 알고리즘
확인응답 지연 알고리즘
TIME_WAIT 지연과 포트 고갈

위에 요소는 따로 좀 더 찾아보자.

'네트워크' 카테고리의 다른 글

웹 서버 (1)	2024.08.06
HTTP 완벽 가이드 - 커넥션 관리(2) (0)	2024.07.22
HTTP 완벽 가이드 - HTTP 메시지 (1)	2024.07.11
HTTP 완벽 가이드 - URL과 리소스 (0)	2024.07.10
HTTP 완벽 가이드 - 웹의 기초(2) (2)	2023.08.21

하드 디스크

자기적인 방식으로 데이터를 저장한다.

구성

일반적으로 플래터 양면을 모두 사용하고, RPM(Revolution Per Minute) : 분당 회전수 단위를 사용한다.

플래터를 스핀들이 회전을 시키는데 이렇게 회전시키면서 데이터를 읽고 쓰는 구성요소가 헤드이다. 일반적으로 모든 헤드가 디스크 암에 부착되어 함께 이동한다.

저장 단위

기본적으로 트랙(track)과 섹터(sector) 단위로 데이터를 저장한다. 섹터의 크기 : 512바이트 ~ 4096바이트

여러 겹의 플래터 상에서 같은 트랙이 위치한 곳을 모아 연결한 논리적 단위를 실린더라고 한다.

연속된 정보는 한 실린더에 기록된다.

데이터 접근 과정

하드 디스크가 저장된 데이터에 접근하는 시간

탐색 시간 (seek time) : 접근하려는 데이터가 저장된 트랙까지 헤드를 이동시키는 시간
회전 지연 (rotaional latency) : 헤드가 있는 곳으로 플래터를 회전시키는 시간
전송 시간 (transfer time) : 하드 디스크와 컴퓨터 간에 데이터를 전송하는 시간

플래시 메모리

전기적으로 데이터를 읽고 쓰는 반도체 기반 저장 장치 (범용성이 넓어 보조기억장치에만 속한다고 보기는 어렵다)

플래시 메모리의 종류

NAND 플래시 메모리
NOR 플래시 메모리

구성

셀(cell)

플래시 메모리에서 데이터를 저장하는 가장 작은 단위
이 셀이 모이고 모여 MB, GB, TB 저장 장치가 된다.

한 셀에

1비트를 저장할 수 있는 플래시 메모리 : SLC
2비트를 저장할 수 있는 플래시 메모리 : MLC
3비트를 저장할 수 있는 플래시 메모리 : TLC
4비트를 저장할 수 있는 플래시 메모리 : QLC

사람 한 명 == 1비트

셀 == 집

라고 가정해보자

SLC == 한 집에 한 명
MLC == 한 집에 두 명
TLC == 한 집에 세 명

라고 생각할 수 있다.

SLC

한 셀로 두 개의 정보 표현
비트의 빠른 입출력
긴 수명
용량 대비 고가격 (속도가 그만큼 빠르기 때문에)

* 플래시 메모리 (USB, SSD, SD 카드), 하드 디스크에는 수명이 존재한다.

MLC

한 셀로 네 개의 정보 표현 (대용량화 유리)
SLC보다 느린 입출력
SLC보자 짧은 수명
SLC보다 저렴

TLC

한 셀로 여덟 개의 정보 표현 (대용량화 유리)
MLC보다 느린 입출력
MLC보다 짧은 수명
MLC보다 저렴

저장 단위

셀들이 모여 페이지 (page)
페이지들이 모여 블록 (block)
블록이 모여 플레인 (plane)
플레인이 모여 다이 (die)

읽기/쓰기 단위와 삭제 단위는 다르다

읽기와 쓰기는 페이지 단위로 이루어진다
삭제는 (페이지보다 큰) 블록 단위로 이루어딘다

'컴퓨터구조와 운영체제' 카테고리의 다른 글

장치 컨트롤러와 장치 드라이버 (1)	2024.08.13
RAID 정의와 종류 (0)	2024.08.08
캐시 메모리 (0)	2024.07.12
메모리의 주소 공간 (0)	2024.07.07
RAM의 특성과 종류 (1)	2024.07.03

이미지를 가변 이미지로 처리해주었던 것과 동일한 처리를, 동영상에도 똑같이 적용할 수 있다. 그러나 문제는 동영상 서비스에 따라 그 성질이 조금씩 다를 수 있다는 것이다.

(mp4와 같은 일반 동영상 파일 뿐 아니라 유튜브나 비메오 등에서 공유한 동영상 콘텐츠를 사용하는 경우도 있기 때문에 여러가지를 고려해서 처리해야 한다.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가변 동영상</title>
    <style>
    	video{
        	width: 100%;
        }
    </style>
  </head>
  <body>
    <video src="./videos/my.mp4" controls></video> /*controls 추가하면 동영상 내의 플레이 버튼 등 생김*/
  </body>
</html>

내가 영상 파일을 가지고 있다면 위와 같이 처리할 수 있다.

하지만 유튜브등 어디서 가져온 동영상을 사용하면 어떨까? 유튜브에서 공유 > 퍼가기 내에 있는 소스 코드를 가져와 보자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가변 동영상</title>
  </head>
  <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/7fg_klS-2kw?si=HSmtCzsDwj2QfEnZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  </body>
</html>

위에 동영상 서비스에서 제공하는 태그같은 경우 크기만 조절해서는 동영상이 제대로 나오지 않는다.

이러한 동영상을 가변적으로 처리하려면 다른 방법이 필요하다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가변 동영상</title>
    <style>
        .player{
            padding-top: 56.25%; /*종횡비로 설정 315 / 560으로 계산 -> height / width */
            position: relative;
        }

        iframe{
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
        }

    </style>
</head>
  <body>
      <div class="player">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/7fg_klS-2kw?si=HSmtCzsDwj2QfEnZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      </div>
  </body>
</html>

width, height만을 조절해서는 내가 원하는대로 크기 조정을 할 수 없던 동영상이

여백의 크기가 달라질때 동영상 크기가 맞춰지는 것을 확인할 수 있다.

공부

전체 글

HTTP 완벽 가이드 - 커넥션 관리

TCP 커넥션

'네트워크' 카테고리의 다른 글

보조기억장치

'컴퓨터구조와 운영체제' 카테고리의 다른 글

반응형 웹(8) - 가변 동영상

+ Recent posts

티스토리툴바