웹 서버의 구조
웹 서버의 구조
1. WWW(World Wide Web)란?
WWW 개념
┌─────────────────────────────────────────────────────────────┐
│ WWW (World Wide Web) │
├─────────────────────────────────────────────────────────────┤
│ │
│ 정의: │
│ • 인터넷상에서 정보를 공유하는 시스템 │
│ • 하이퍼텍스트로 연결된 문서들의 집합 │
│ • 줄임말: W3, 웹(Web) │
│ │
│ 역사: │
│ • 1989년: 팀 버너스리(Tim Berners-Lee)가 CERN에서 제안 │
│ • 1991년: 최초의 웹 사이트 공개 │
│ • 현재: 인터넷의 가장 중요한 서비스 │
│ │
│ │
│ WWW의 3가지 핵심 기술: │
│ ───────────────────────────────────────── │
│ │
│ 1. HTML (HyperText Markup Language) │
│ • 웹 페이지를 작성하는 언어 │
│ • 문서의 구조와 내용 정의 │
│ │
│ 2. URL (Uniform Resource Locator) │
│ • 웹 자원의 주소 │
│ • 리소스의 위치 지정 │
│ │
│ 3. HTTP (HyperText Transfer Protocol) │
│ • 웹 서버와 클라이언트 간 통신 규약 │
│ • 데이터 전송 프로토콜 │
│ │
└─────────────────────────────────────────────────────────────┘웹의 동작 원리
┌─────────────────────────────────────────────────────────────┐
│ 웹의 기본 동작 │
├─────────────────────────────────────────────────────────────┤
│ │
│ [사용자] │
│ │ │
│ │ 1. URL 입력 │
│ │ "https://www.example.com/page.html" │
│ ↓ │
│ [웹 브라우저] │
│ │ │
│ │ 2. DNS 조회 │
│ │ "example.com" → "93.184.216.34" │
│ │ │
│ │ 3. HTTP 요청 │
│ │ GET /page.html HTTP/1.1 │
│ ├──────────────────────────────────→ │
│ │ │
│ [웹 서버] │
│ │ │ │
│ │ 4. 요청 처리 │
│ │ - HTML 파일 찾기 │
│ │ - 동적 콘텐츠 생성 (필요 시) │
│ │ │ │
│ │ 5. HTTP 응답 │
│ │ HTTP/1.1 200 OK │
│ │ <html>...</html> │
│ │←────────────────────────────────── │
│ │ │
│ │ 6. HTML 렌더링 │
│ │ - HTML 파싱 │
│ │ - CSS 적용 │
│ │ - JavaScript 실행 │
│ │ - 이미지 로드 │
│ ↓ │
│ [사용자에게 웹 페이지 표시] │
│ │
└─────────────────────────────────────────────────────────────┘2. HTML (HyperText Markup Language)
HTML 개념
┌─────────────────────────────────────────────────────────────┐
│ HTML │
├─────────────────────────────────────────────────────────────┤
│ │
│ 정의: │
│ • 하이퍼텍스트를 작성하는 마크업 언어 │
│ • 웹 페이지의 구조와 내용을 정의 │
│ • 태그(Tag)를 사용하여 문서 작성 │
│ │
│ │
│ 하이퍼텍스트 (HyperText): │
│ ───────────────────────────────────────── │
│ • 문서 간 링크로 연결된 텍스트 │
│ • 비선형적 정보 구조 │
│ • 하이퍼링크를 통한 탐색 │
│ │
│ │
│ 마크업 언어 (Markup Language): │
│ ───────────────────────────────────────── │
│ • 태그로 문서 구조를 표현 │
│ • 내용과 형식을 분리 │
│ • 의미론적 구조 정의 │
│ │
└─────────────────────────────────────────────────────────────┘HTML 기본 구조
HTML 문서 예시:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 첫 웹 페이지</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>환영합니다!</h1>
<nav>
<a href="index.html">홈</a>
<a href="about.html">소개</a>
</nav>
</header>
<main>
<article>
<h2>제목</h2>
<p>이것은 <strong>중요한</strong> 문단입니다.</p>
<img src="image.jpg" alt="설명">
</article>
</main>
<footer>
<p>© 2024 내 웹사이트</p>
</footer>
<script src="script.js"></script>
</body>
</html>
주요 HTML 태그:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
구조 태그:
<html> - 문서의 루트
<head> - 메타데이터
<body> - 본문 내용
<header> - 헤더
<main> - 주요 콘텐츠
<footer> - 푸터
<nav> - 내비게이션
<section> - 섹션
<article> - 독립적 콘텐츠
텍스트 태그:
<h1>~<h6> - 제목 (Heading)
<p> - 문단 (Paragraph)
<strong> - 강조 (굵게)
<em> - 강조 (기울임)
<br> - 줄 바꿈
<span> - 인라인 컨테이너
링크와 미디어:
<a> - 하이퍼링크
<img> - 이미지
<video> - 비디오
<audio> - 오디오
목록:
<ul> - 순서 없는 목록
<ol> - 순서 있는 목록
<li> - 목록 항목
표:
<table> - 표
<tr> - 행
<td> - 셀
<th> - 헤더 셀
폼:
<form> - 폼
<input> - 입력 필드
<button> - 버튼
<textarea> - 텍스트 영역하이퍼링크
┌─────────────────────────────────────────────────────────────┐
│ 하이퍼링크 (Hyperlink) │
├─────────────────────────────────────────────────────────────┤
│ │
│ 정의: │
│ • 문서 간 연결을 만드는 링크 │
│ • 클릭하면 다른 페이지로 이동 │
│ • 보통 "링크(Link)"라고 부름 │
│ │
│ │
│ HTML에서의 링크: │
│ ───────────────────────────────────────── │
│ │
│ <a href="https://www.example.com">예제 사이트</a> │
│ └─┬─┘ └──────────┬──────────┘ └────┬────┘ │
│ 태그 URL (주소) 표시 텍스트 │
│ │
│ │
│ 링크 유형: │
│ ───────────────────────────────────────── │
│ │
│ 1. 절대 URL (Absolute URL) │
│ <a href="https://www.example.com/page.html"> │
│ • 전체 주소 명시 │
│ • 다른 사이트로 연결 │
│ │
│ 2. 상대 URL (Relative URL) │
│ <a href="about.html"> │
│ <a href="../images/photo.jpg"> │
│ • 현재 위치 기준 │
│ • 같은 사이트 내 이동 │
│ │
│ 3. 앵커 링크 (Anchor Link) │
│ <a href="#section1"> │
│ • 같은 페이지 내 특정 위치로 이동 │
│ │
│ 4. 이메일 링크 │
│ <a href="mailto:user@example.com"> │
│ • 이메일 클라이언트 실행 │
│ │
│ │
│ 링크 네트워크: │
│ ───────────────────────────────────────── │
│ │
│ [페이지 A] │
│ │ │
│ ┌────┼────┬────────┐ │
│ │ │ │ │ │
│ ↓ ↓ ↓ ↓ │
│ [B] [C] [D] [E] │
│ │ │
│ ┌────┼────┐ │
│ ↓ ↓ ↓ │
│ [F] [G] [H] │
│ │
│ → 웹은 이런 링크들로 연결된 거대한 네트워크! │
│ │
└─────────────────────────────────────────────────────────────┘3. URL (Uniform Resource Locator)
URL 구조
┌─────────────────────────────────────────────────────────────┐
│ URL 구조 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 전체 URL 예시: │
│ │
│ https://www.example.com:443/path/to/page.html?id=123#top │
│ └─┬─┘ └──────┬──────┘└┬┘└──────┬───────┘└──┬──┘ └┬┘ │
│ │ │ │ │ │ │ │
│ 스킴 호스트 포트 경로 쿼리 프래그먼트│
│(프로토콜) (도메인) (매개변수) │
│ │
│ │
│ 각 구성 요소 설명: │
│ ───────────────────────────────────────── │
│ │
│ 1. 스킴 (Scheme) / 프로토콜 │
│ • https:// - 보안 HTTP │
│ • http:// - 일반 HTTP │
│ • ftp:// - 파일 전송 │
│ • mailto: - 이메일 │
│ │
│ 2. 호스트 (Host) / 도메인 이름 │
│ • www.example.com │
│ • 또는 IP 주소: 93.184.216.34 │
│ │
│ 3. 포트 (Port) │
│ • :443 (HTTPS 기본) │
│ • :80 (HTTP 기본) │
│ • 생략 가능 (기본 포트 사용) │
│ │
│ 4. 경로 (Path) │
│ • /path/to/page.html │
│ • 서버 내 리소스 위치 │
│ • 디렉토리와 파일 구조 │
│ │
│ 5. 쿼리 문자열 (Query String) │
│ • ?id=123&name=john │
│ • & 로 구분 │
│ • 서버에 데이터 전달 │
│ │
│ 6. 프래그먼트 (Fragment) / 앵커 │
│ • #top │
│ • 페이지 내 특정 위치 │
│ • 서버로 전송되지 않음 │
│ │
└─────────────────────────────────────────────────────────────┘URL 예시
다양한 URL 예시:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. 기본 웹 페이지
https://www.google.com
• 스킴: https
• 호스트: www.google.com
• 경로: / (루트)
2. 하위 페이지
https://www.example.com/blog/post-123.html
• 경로: /blog/post-123.html
3. 쿼리 포함
https://search.example.com/search?q=네트워크&page=1
• 쿼리: q=네트워크, page=1
4. 앵커 포함
https://docs.example.com/guide.html#installation
• 프래그먼트: installation
5. 포트 명시
http://localhost:8080/admin
• 호스트: localhost
• 포트: 8080
6. IP 주소 사용
http://192.168.1.100/index.html
• IP 주소로 직접 접근
7. FTP
ftp://ftp.example.com/files/document.pdf
• 스킴: ftp
8. 이메일
mailto:support@example.com?subject=문의사항
• 스킴: mailto
• 쿼리: subject=문의사항4. HTTP (HyperText Transfer Protocol)
HTTP 개념
┌─────────────────────────────────────────────────────────────┐
│ HTTP 프로토콜 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 정의: │
│ • 웹 서버와 클라이언트 간 통신 규약 │
│ • 요청-응답 기반 프로토콜 │
│ • 응용 계층 프로토콜 │
│ │
│ 포트 번호: │
│ • HTTP: 80 │
│ • HTTPS: 443 (암호화) │
│ │
│ 전송 계층: │
│ • TCP 사용 (신뢰성 필요) │
│ │
│ │
│ HTTP 특징: │
│ ───────────────────────────────────────── │
│ • 무상태 (Stateless): 각 요청은 독립적 │
│ • 비연결성 (Connectionless): 응답 후 연결 종료 (HTTP/1.0) │
│ • 텍스트 기반 프로토콜 │
│ • 확장 가능 │
│ │
└─────────────────────────────────────────────────────────────┘HTTP 요청-응답
┌─────────────────────────────────────────────────────────────┐
│ HTTP 요청-응답 과정 │
├─────────────────────────────────────────────────────────────┤
│ │
│ [웹 브라우저] [웹 서버] │
│ 클라이언트 포트 80 │
│ │ │ │
│ │ │ │
│ 1. HTTP 요청 (Request) │
│ ───────────────────────────────────────── │
│ │ │ │
│ │ GET /index.html HTTP/1.1 │ │
│ │ Host: www.example.com │ │
│ │ User-Agent: Mozilla/5.0 │ │
│ │ Accept: text/html │ │
│ │ Connection: keep-alive │ │
│ │ │ │
│ ├─────────────────────────────────────────→│ │
│ │ │ │
│ │ │ 처리 중 │
│ │ │ - HTML 찾기│
│ │ │ - 권한 확인│
│ │ │ │
│ │
│ 2. HTTP 응답 (Response) │
│ ───────────────────────────────────────── │
│ │ │ │
│ │ HTTP/1.1 200 OK │ │
│ │ Content-Type: text/html; charset=UTF-8 │ │
│ │ Content-Length: 1234 │ │
│ │ Server: Apache/2.4.41 │ │
│ │ │ │
│ │ <!DOCTYPE html> │ │
│ │ <html> │ │
│ │ <head><title>예제</title></head> │ │
│ │ <body>...</body> │ │
│ │ </html> │ │
│ │ │ │
│ │←─────────────────────────────────────────┤ │
│ │ │ │
│ │ HTML 렌더링 및 표시 │ │
│ │ │ │
│ │
└─────────────────────────────────────────────────────────────┘HTTP 요청 메시지
┌─────────────────────────────────────────────────────────────┐
│ HTTP 요청 메시지 구조 │
├─────────────────────────────────────────────────────────────┤
│ │
│ GET /index.html HTTP/1.1 ← 요청 라인 │
│ Host: www.example.com ┐ │
│ User-Agent: Mozilla/5.0 │ │
│ Accept: text/html ├ 헤더 │
│ Accept-Language: ko-KR │ │
│ Connection: keep-alive ┘ │
│ ← 빈 줄 │
│ [요청 본문 - 선택사항] ← 본문 │
│ │
│ │
│ 1. 요청 라인 (Request Line) │
│ ───────────────────────────────────────── │
│ GET /index.html HTTP/1.1 │
│ └┬┘ └────┬────┘ └───┬──┘ │
│ 메서드 URI 버전 │
│ │
│ │
│ 2. 요청 헤더 (Request Headers) │
│ ───────────────────────────────────────── │
│ • Host: 호스트 이름 (필수) │
│ • User-Agent: 클라이언트 정보 │
│ • Accept: 수용 가능한 미디어 타입 │
│ • Accept-Language: 선호 언어 │
│ • Accept-Encoding: 압축 방식 │
│ • Connection: 연결 옵션 │
│ • Cookie: 쿠키 정보 │
│ • Authorization: 인증 정보 │
│ • Referer: 이전 페이지 URL │
│ │
│ │
│ 3. 빈 줄 (Empty Line) │
│ ───────────────────────────────────────── │
│ • 헤더와 본문 구분 │
│ • CRLF (Carriage Return + Line Feed) │
│ │
│ │
│ 4. 요청 본문 (Request Body) - 선택사항 │
│ ───────────────────────────────────────── │
│ • POST, PUT 등에서 사용 │
│ • 서버로 전송할 데이터 │
│ • 예: 폼 데이터, JSON, XML │
│ │
└─────────────────────────────────────────────────────────────┘HTTP 응답 메시지
┌─────────────────────────────────────────────────────────────┐
│ HTTP 응답 메시지 구조 │
├─────────────────────────────────────────────────────────────┤
│ │
│ HTTP/1.1 200 OK ← 상태 라인 │
│ Content-Type: text/html; charset=UTF-8 ┐ │
│ Content-Length: 1234 │ │
│ Server: Apache/2.4.41 ├ 헤더 │
│ Date: Mon, 07 Jan 2026 12:00:00 GMT │ │
│ Set-Cookie: sessionid=abc123 ┘ │
│ ← 빈 줄 │
│ <!DOCTYPE html> ┐ │
│ <html> │ │
│ <head><title>예제</title></head> ├ 본문 │
│ <body>...</body> │ │
│ </html> ┘ │
│ │
│ │
│ 1. 상태 라인 (Status Line) │
│ ───────────────────────────────────────── │
│ HTTP/1.1 200 OK │
│ └───┬──┘ └┬┘ └┬┘ │
│ 버전 코드 메시지 │
│ │
│ │
│ 2. 응답 헤더 (Response Headers) │
│ ───────────────────────────────────────── │
│ • Content-Type: 콘텐츠 타입 │
│ • Content-Length: 본문 길이 │
│ • Server: 서버 정보 │
│ • Date: 응답 생성 시간 │
│ • Set-Cookie: 쿠키 설정 │
│ • Cache-Control: 캐시 제어 │
│ • Location: 리다이렉션 위치 │
│ • Content-Encoding: 압축 방식 │
│ │
│ │
│ 3. 빈 줄 (Empty Line) │
│ ───────────────────────────────────────── │
│ • 헤더와 본문 구분 │
│ │
│ │
│ 4. 응답 본문 (Response Body) │
│ ───────────────────────────────────────── │
│ • 실제 콘텐츠 (HTML, JSON, 이미지 등) │
│ • Content-Type에 명시된 형식 │
│ │
└─────────────────────────────────────────────────────────────┘5. HTTP 메서드
주요 HTTP 메서드
┌─────────────────────────────────────────────────────────────┐
│ HTTP 메서드 │
├──────────┬──────────────────────────────────────────────────┤
│ 메서드 │ 설명 │
├──────────┼──────────────────────────────────────────────────┤
│ GET │ • 리소스 조회 (읽기) │
│ │ • 가장 많이 사용 │
│ │ • 쿼리 문자열로 데이터 전달 │
│ │ • 본문 없음 │
│ │ • 예: GET /users/123 │
├──────────┼──────────────────────────────────────────────────┤
│ POST │ • 데이터 전송 (생성) │
│ │ • 서버로 데이터 전송 │
│ │ • 본문에 데이터 포함 │
│ │ • 예: 회원 가입, 게시글 작성 │
├──────────┼──────────────────────────────────────────────────┤
│ PUT │ • 리소스 전체 수정 │
│ │ • 기존 리소스 대체 │
│ │ • 본문에 전체 데이터 │
├──────────┼──────────────────────────────────────────────────┤
│ PATCH │ • 리소스 부분 수정 │
│ │ • 일부 필드만 변경 │
├──────────┼──────────────────────────────────────────────────┤
│ DELETE │ • 리소스 삭제 │
│ │ • 예: DELETE /users/123 │
├──────────┼──────────────────────────────────────────────────┤
│ HEAD │ • GET과 동일하지만 본문 없음 │
│ │ • 헤더만 조회 │
│ │ • 리소스 존재 확인 │
├──────────┼──────────────────────────────────────────────────┤
│ OPTIONS │ • 지원하는 메서드 확인 │
│ │ • CORS 사전 요청 │
└──────────┴──────────────────────────────────────────────────┘HTTP 상태 코드
┌─────────────────────────────────────────────────────────────┐
│ HTTP 상태 코드 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 1xx - 정보 (Informational) │
│ ───────────────────────────────────────── │
│ • 100 Continue: 계속 진행 │
│ • 101 Switching Protocols: 프로토콜 전환 │
│ │
│ │
│ 2xx - 성공 (Success) │
│ ───────────────────────────────────────── │
│ • 200 OK: 성공 │
│ • 201 Created: 생성됨 │
│ • 204 No Content: 내용 없음 (성공했지만 반환 없음) │
│ │
│ │
│ 3xx - 리다이렉션 (Redirection) │
│ ───────────────────────────────────────── │
│ • 301 Moved Permanently: 영구 이동 │
│ • 302 Found: 임시 이동 │
│ • 304 Not Modified: 수정되지 않음 (캐시 사용) │
│ │
│ │
│ 4xx - 클라이언트 오류 (Client Error) │
│ ───────────────────────────────────────── │
│ • 400 Bad Request: 잘못된 요청 │
│ • 401 Unauthorized: 인증 필요 │
│ • 403 Forbidden: 권한 없음 │
│ • 404 Not Found: 리소스 없음 │
│ • 405 Method Not Allowed: 허용되지 않는 메서드 │
│ • 409 Conflict: 충돌 │
│ │
│ │
│ 5xx - 서버 오류 (Server Error) │
│ ───────────────────────────────────────── │
│ • 500 Internal Server Error: 서버 내부 오류 │
│ • 502 Bad Gateway: 게이트웨이 오류 │
│ • 503 Service Unavailable: 서비스 이용 불가 │
│ • 504 Gateway Timeout: 게이트웨이 타임아웃 │
│ │
└─────────────────────────────────────────────────────────────┘6. HTTP 버전
HTTP/1.0
┌─────────────────────────────────────────────────────────────┐
│ HTTP/1.0 (1996년) │
├─────────────────────────────────────────────────────────────┤
│ │
│ 특징: │
│ • 요청마다 새로운 연결 생성 │
│ • 응답 후 연결 종료 │
│ • 비효율적 (연결 오버헤드 큼) │
│ │
│ │
│ 동작 방식: │
│ ───────────────────────────────────────── │
│ │
│ [클라이언트] [서버] │
│ │ │ │
│ │ 1. TCP 연결 (3-Way Handshake) │ │
│ ├───────────────────────────────────────→│ │
│ │ │ │
│ │ 2. HTTP 요청 │ │
│ │ GET /index.html HTTP/1.0 │ │
│ ├───────────────────────────────────────→│ │
│ │ │ │
│ │ 3. HTTP 응답 │ │
│ │ HTTP/1.0 200 OK │ │
│ │ <html>...</html> │ │
│ │←───────────────────────────────────────┤ │
│ │ │ │
│ │ 4. 연결 종료 (4-Way Handshake) │ │
│ ├───────────────────────────────────────→│ │
│ │ │ │
│ │ │ │
│ │ 다시 새 연결... │ │
│ │ 5. TCP 연결 (다시!) │ │
│ ├───────────────────────────────────────→│ │
│ │ GET /style.css HTTP/1.0 │ │
│ │ │ │
│ │
│ 문제점: │
│ • 매 요청마다 TCP 연결/종료 → 느림 │
│ • 여러 리소스 로드 시 비효율적 │
│ │
└─────────────────────────────────────────────────────────────┘HTTP/1.1
┌─────────────────────────────────────────────────────────────┐
│ HTTP/1.1 (1997년) │
├─────────────────────────────────────────────────────────────┤
│ │
│ 특징: │
│ • Keep-Alive: 연결 재사용 │
│ • 파이프라이닝: 여러 요청 동시 전송 │
│ • Host 헤더 필수 (가상 호스팅 지원) │
│ • 청크 전송 인코딩 │
│ │
│ │
│ Keep-Alive 동작: │
│ ───────────────────────────────────────── │
│ │
│ [클라이언트] [서버] │
│ │ │ │
│ │ 1. TCP 연결 (한 번만!) │ │
│ ├───────────────────────────────────────→│ │
│ │ │ │
│ │ 2. HTTP 요청 1 │ │
│ │ GET /index.html HTTP/1.1 │ │
│ │ Connection: keep-alive │ │
│ ├───────────────────────────────────────→│ │
│ │ │ │
│ │ 3. HTTP 응답 1 │ │
│ │←───────────────────────────────────────┤ │
│ │ │ │
│ │ 4. HTTP 요청 2 (같은 연결!) │ │
│ │ GET /style.css HTTP/1.1 │ │
│ ├───────────────────────────────────────→│ │
│ │ │ │
│ │ 5. HTTP 응답 2 │ │
│ │←───────────────────────────────────────┤ │
│ │ │ │
│ │ 6. HTTP 요청 3 (계속 같은 연결!) │ │
│ │ GET /script.js HTTP/1.1 │ │
│ ├───────────────────────────────────────→│ │
│ │ │ │
│ │ 모든 데이터 교환 완료 후 연결 종료 │ │
│ │ │ │
│ │
│ 장점: │
│ • 연결 재사용 → 빠름 │
│ • 오버헤드 감소 │
│ • 여러 리소스 효율적 전송 │
│ │
│ │
│ HOL (Head-of-Line) Blocking 문제: │
│ ───────────────────────────────────────── │
│ • 요청을 순서대로 처리 │
│ • 앞 요청이 지연되면 뒤 요청도 대기 │
│ │
│ 요청1 ────→ [처리 지연...] ← 요청2, 3 대기 중 │
│ │
└─────────────────────────────────────────────────────────────┘HTTP/2
┌─────────────────────────────────────────────────────────────┐
│ HTTP/2 (2015년) │
├─────────────────────────────────────────────────────────────┤
│ │
│ 특징: │
│ • 멀티플렉싱: 여러 요청/응답 동시 처리 │
│ • 서버 푸시: 서버가 먼저 리소스 전송 │
│ • 헤더 압축 (HPACK) │
│ • 이진 프로토콜 (텍스트 → 바이너리) │
│ • 스트림 우선순위 지정 │
│ │
│ │
│ 멀티플렉싱 (Multiplexing): │
│ ───────────────────────────────────────── │
│ │
│ [클라이언트] [서버] │
│ │ │ │
│ │ 하나의 TCP 연결 │ │
│ ├═══════════════════════════════════════→│ │
│ │ │ │
│ │ 스트림 1 (HTML) ─────→ │ │
│ │ 스트림 2 (CSS) ─────→ │ │
│ │ 스트림 3 (JS) ─────→ │ │
│ │ 스트림 4 (Image) ─────→ │ │
│ │ ↓ │ │
│ │ 병렬 처리 (동시에!) │ │
│ │ ↓ │ │
│ │ ←───── 스트림 3 응답 (먼저 완료) │ │
│ │ ←───── 스트림 1 응답 │ │
│ │ ←───── 스트림 2 응답 │ │
│ │ ←───── 스트림 4 응답 (늦게 완료) │ │
│ │ │ │
│ │ 순서 상관없이 완료되는 대로 응답! │ │
│ │ │ │
│ │
│ │
│ 서버 푸시 (Server Push): │
│ ───────────────────────────────────────── │
│ │
│ [클라이언트] [서버] │
│ │ │ │
│ │ GET /index.html │ │
│ ├───────────────────────────────────────→│ │
│ │ │ │
│ │ │ HTML 분석 │
│ │ │ → CSS, JS │
│ │ │ 필요 예상│
│ │ │ │
│ │ index.html 응답 │ │
│ │←───────────────────────────────────────┤ │
│ │ │ │
│ │ style.css 푸시 (요청 전!) │ │
│ │←───────────────────────────────────────┤ │
│ │ │ │
│ │ script.js 푸시 (요청 전!) │ │
│ │←───────────────────────────────────────┤ │
│ │ │ │
│ │ → 추가 요청 없이 바로 사용 가능! │ │
│ │
│ │
│ 장점: │
│ • HOL Blocking 해결 │
│ • 더 빠른 페이지 로딩 │
│ • 대역폭 효율 향상 │
│ │
└─────────────────────────────────────────────────────────────┘HTTP 버전 비교
┌─────────────────────────────────────────────────────────────┐
│ HTTP 버전 비교 │
├────────────┬─────────────┬─────────────┬──────────────────┤
│ 항목 │ HTTP/1.0 │ HTTP/1.1 │ HTTP/2 │
├────────────┼─────────────┼─────────────┼──────────────────┤
│ 연결 │ 요청마다 │ Keep-Alive │ 다중 스트림 │
│ │ 새 연결 │ (재사용) │ (멀티플렉싱) │
├────────────┼─────────────┼─────────────┼──────────────────┤
│ 처리 │ 순차 처리 │ 순차 처리 │ 병렬 처리 │
│ │ │ (파이프라인)│ │
├────────────┼─────────────┼─────────────┼──────────────────┤
│ HOL Blocking│ 있음 │ 있음 │ 없음 │
├────────────┼─────────────┼─────────────┼──────────────────┤
│ 헤더 압축 │ 없음 │ 없음 │ HPACK 압축 │
├────────────┼─────────────┼─────────────┼──────────────────┤
│ 서버 푸시 │ 없음 │ 없음 │ 지원 │
├────────────┼─────────────┼─────────────┼──────────────────┤
│ 프로토콜 │ 텍스트 │ 텍스트 │ 이진(바이너리) │
├────────────┼─────────────┼─────────────┼──────────────────┤
│ 속도 │ 느림 │ 보통 │ 빠름 │
└────────────┴─────────────┴─────────────┴──────────────────┘7. 실무 활용
웹 브라우저 개발자 도구
Chrome/Edge 개발자 도구 (F12):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Network 탭
• HTTP 요청/응답 확인
• 타이밍 분석
• 헤더 확인
• 페이로드 확인
2. Console 탭
• JavaScript 실행
• 에러 확인
3. Elements 탭
• HTML 구조 확인
• CSS 스타일 확인
4. Application 탭
• 쿠키 확인
• Local Storage
• Session Storage
Network 탭에서 확인 가능한 정보:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Name: index.html
Status: 200 OK
Type: document
Initiator: www.example.com
Size: 15.2 KB
Time: 234 ms
Headers:
General:
Request URL: https://www.example.com/index.html
Request Method: GET
Status Code: 200 OK
Response Headers:
Content-Type: text/html; charset=UTF-8
Content-Length: 15234
Server: nginx/1.18.0
Request Headers:
Accept: text/html
User-Agent: Mozilla/5.0
Accept-Language: ko-KR
Timing (각 단계별 시간):
Queueing: 2 ms
Stalled: 5 ms
DNS Lookup: 20 ms
Initial Connection: 50 ms
SSL: 100 ms
Request sent: 1 ms
Waiting (TTFB): 50 ms
Content Download: 6 mscurl 명령어
curl로 HTTP 요청:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. 기본 GET 요청
$ curl http://www.example.com
2. 헤더 포함 (-v: verbose)
$ curl -v http://www.example.com
3. 헤더만 확인 (-I: HEAD 메서드)
$ curl -I http://www.example.com
4. POST 요청
$ curl -X POST http://api.example.com/users \
-H "Content-Type: application/json" \
-d '{"name":"John","age":30}'
5. 인증 포함
$ curl -u username:password http://api.example.com
6. 쿠키 저장/전송
$ curl -c cookies.txt http://www.example.com
$ curl -b cookies.txt http://www.example.com
7. 리다이렉션 따라가기 (-L)
$ curl -L http://www.example.com
8. 다운로드 (-o: 파일명 지정, -O: 원본 파일명)
$ curl -O http://www.example.com/file.zip
$ curl -o myfile.zip http://www.example.com/file.zip
9. 속도 제한
$ curl --limit-rate 100K http://www.example.com/largefile
10. 타임아웃 설정
$ curl --connect-timeout 10 http://www.example.com웹 서버 로그 분석
Apache 액세스 로그 예시:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
192.168.1.10 - - [07/Jan/2026:12:34:56 +0900] "GET /index.html HTTP/1.1" 200 1234 "-" "Mozilla/5.0"
└────┬─────┘ └──────────┬──────────┘ └──────────┬─────────┘ └┬┘ └┬─┘ └──────┬──────┘
클라이언트 날짜/시간 요청 내용 상태 크기 User-Agent
IP 주소 코드(bytes)
로그 분석:
• 클라이언트 IP: 192.168.1.10
• 날짜/시간: 2026년 1월 7일 12:34:56
• 요청 메서드: GET
• 요청 URI: /index.html
• HTTP 버전: 1.1
• 상태 코드: 200 (성공)
• 응답 크기: 1234 바이트
• Referer: - (없음)
• User-Agent: Mozilla/5.0 (웹 브라우저)
Nginx 액세스 로그:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
192.168.1.10 - - [07/Jan/2026:12:34:56 +0900] "GET /api/users HTTP/1.1" 200 567 "https://www.example.com" "Mozilla/5.0" "0.234"
└────────┬────────┘ └──┬──┘
Referer 처리 시간
일반적인 분석:
• 404 오류가 많은 페이지 찾기
• 가장 많이 방문한 페이지
• 트래픽이 많은 시간대
• 봇/크롤러 탐지
• 응답 시간 분석핵심 정리
| 개념 | 설명 |
|---|---|
| WWW | 인터넷상의 하이퍼텍스트 정보 공유 시스템 |
| HTML | 웹 페이지 작성 마크업 언어 (태그 사용) |
| 하이퍼링크 | 문서 간 연결 링크 (클릭하면 이동) |
| URL | 웹 자원의 주소 (프로토콜://호스트/경로) |
| HTTP | 웹 서버-클라이언트 간 통신 프로토콜 (포트 80) |
| 요청-응답 | 클라이언트 요청 → 서버 응답 패턴 |
| Keep-Alive | HTTP/1.1의 연결 재사용 기능 |
| 멀티플렉싱 | HTTP/2의 병렬 처리 기능 |
웹 서버 핵심 개념
┌─────────────────────────────────────────────────────────────┐
│ 웹 서버 요약 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 1. WWW의 3가지 기술 │
│ ───────────────────────────────────────── │
│ • HTML: 문서 작성 (구조와 내용) │
│ • URL: 주소 지정 (리소스 위치) │
│ • HTTP: 통신 규약 (전송 방법) │
│ │
│ 2. HTTP 요청-응답 │
│ ───────────────────────────────────────── │
│ 클라이언트 → 요청 (GET /page.html) │
│ 서버 → 응답 (200 OK + HTML) │
│ │
│ 3. HTTP 버전 발전 │
│ ───────────────────────────────────────── │
│ • HTTP/1.0: 요청마다 연결 │
│ • HTTP/1.1: Keep-Alive (연결 재사용) │
│ • HTTP/2: 멀티플렉싱 (병렬 처리) │
│ │
│ 4. 웹 페이지 로딩 과정 │
│ ───────────────────────────────────────── │
│ URL 입력 → DNS 조회 → HTTP 요청 │
│ → 서버 처리 → HTTP 응답 → HTML 렌더링 │
│ │
└─────────────────────────────────────────────────────────────┘용어 정리
- WWW (World Wide Web): 인터넷상의 하이퍼텍스트 정보 공유 시스템
- HTML (HyperText Markup Language): 웹 페이지를 작성하는 마크업 언어
- 하이퍼텍스트 (HyperText): 링크로 연결된 비선형적 텍스트
- 하이퍼링크 (Hyperlink): 문서 간 연결 고리, 보통 “링크"라고 함
- 마크업 언어 (Markup Language): 태그로 문서 구조를 표현하는 언어
- URL (Uniform Resource Locator): 웹 자원의 주소
- HTTP (HyperText Transfer Protocol): 웹 서버와 클라이언트 간 통신 프로토콜
- 요청 (Request): 클라이언트가 서버에 보내는 메시지
- 응답 (Response): 서버가 클라이언트에 보내는 메시지
- Keep-Alive: HTTP/1.1의 연결 유지 기능
- 멀티플렉싱 (Multiplexing): HTTP/2의 여러 요청/응답 동시 처리 기능
- 서버 푸시 (Server Push): HTTP/2의 서버가 먼저 리소스를 전송하는 기능