웹이 뭔데?


Mozilla Developer Network 에 의하면,

웹은 인터넷을 통해 액세스할 수 있는
공용 웹 페이지의 상호 연결된 시스템

웹과 인터넷은 엄연히 다르다.
웹은 인터넷 위에 구축된 많은 응용 프로그램 중 하나이다.
이메일, 네비게이션, 스트리밍, 게임 등

그렇다면, 인터넷이란?

전 세계 컴퓨터들을 하나로 연결하는 거대한 컴퓨터 통신망
클라이언트와 서버로 구성
TCP/IP 라는 기본 프로토콜을 통해 제공


웹은 다음과 같은 요소로 이루어져 있다.


  • 서버와 클라이언트 간의 데이터 전송을 제어하는 HTTP
  • 웹 구성 요소 클라이언트가 제공하는 고유한 범용 식별자, URL 또는 URI
  • 가장 일반적인 웹 문서 형식인 HTML

자원을 연결하는 하이퍼링크를 통해 웹은 거미줄처럼 연결된 문서 모음으로서 존재,
이는 웹의 정의이자 정체성 (World Wide Web)


서버? 클라이언트?


오라클 문서 에 의하면,

서버란?


네트워크의 다른 시스템에 서비스를 제공하는 시스템


클라이언트란?


서버의 원격 서비스를 사용하는 시스템
일부 클라이언트는 디스크 저장 용량이 제한되거나 아예 없으며,
작동하려면 서버의 원격 파일 시스템에 의존해야 한다.



HTTP?


Mozilla Developer Network 및 W3Schools 에 의하면,

Hypertext Transfer Protocol

웹에서 하이퍼미디어 문서를 전송할 수 있도록 하는 기본 네트워크 프로토콜
서버가 클라이언트 상태를 보존하지 않음
기본적으로 연결을 유지하지 않음(리소스 절약) 클라이언트와 서버 간에 요청-응답 프로토콜로 작동(단방향 통신)

클라이언트가 서버에 HTTP 요청을 보내면
서버가 클라이언트에 응답을 반환한다.
이때, 응답에는 상태 정보가 포함되어 있다.
요청 및 요청된 내용을 포함할 수도 있다.



요청 및 응답


HTTP 요청과 응답의 구조는 서로 닮았으며, 그 구조는 다음과 같다.

  1. 시작 줄(start-line) 에는 실행되어야 할 요청, 또은 요청 수행에 대한 성공 또는 실패가 한 줄로 기록되어 있다.
  2. 옵션으로 HTTP 헤더 세트 가 들어가는데, 요청에 대한 설명, 혹은 메시지 본문에 대한 설명이 들어있다.
  3. 요청에 대한 모든 메타 정보가 전송되었음을 알리는 빈 줄(blank line)이 삽입된다.
  4. 요청과 관련된 내용(HTML 폼 콘텐츠 등)이 옵션으로 들어가거나, 응답과 관련된 문서(document)가 들어있다.
    본문 의 존재 유무 및 크기는 첫 줄과 HTTP 헤더에 있다.

HTTP 메시지의 시작 줄과 HTTP 헤더를 묶어서 요청 헤드(head) 라고 부르며,
HTTP 메시지의 페이로드는 본문(body) 이라고 한다.


요청 - 시작 줄


HTTP 요청은 서버가 특정 동작을 취하게끔 만들기 위해 클라이언트에서 전송하는 메시지이며,
시작 줄은 다음과 같이 세 가지 요소로 이루어져 있다.


  • HTTP 메서드
    영어 동사(GET, PUT,POST) 혹은 명사(HEAD, OPTIONS)를 사용
    GET, POST, PUT, HEAD, DELETE,
    PATCH, OPTIONS, CONNECT, TRACE
    ex) GET 은 리소스를 클라이언트로 가져다 달라는 뜻
    POST 는 데이터가 서버로 들어가야 함을 의미


  • 요청 타겟
    주로 URL, 또는 프로토콜, 포트, 도메인의 절대 경로로 나타낼 수도 있으며
    요청 타겟 포맷은 HTTP 메소드에 따라 달라진다.
    • origin 형식
      끝에 ?와 쿼리 문자열이 붙는 절대 경로
      이는 가장 일반적인 형식이며, GET, POST, HEAD, OPTIONS 메서드와 함께 사용
    • absolute 형식
      완전한 URL 형식
      프록시에 연결하는 경우 대부분 GET 과 함께 사용
    • authority 형식
      도메인 이름 및 옵션 포트 (:가 앞에 붙는다.) 로 이루어진 URL의 authority component
      HTTP 터널을 구축하는 경우에만 CONNECT 와 함께 사용
    • asterisk 형식
      OPTIONS 와 함께 * 하나로 간단하게 서버 전체를 나타냄


  • HTTP 버전
    메시지의 남은 구조를 결정
    응답 메시지에서 써야 할 HTTP 버전을 알려주는 역할


요청 - 헤더


요청에 들어가는 HTTP 헤더는 HTTP 헤더의 기본 구조를 따른다.
대소문자 구분없는 문자열 다음에 :` 이 붙으며, 그 뒤에 오는 값은 헤더에 따라 달라진다.
헤더는 값까지 포함해 한 줄로 구성되지만 꽤 길어질 수 있다.

다양한 종류의 요청 헤더가 있는데, 이들은 다음과 같이 몇몇 그룹으로 나눌 수 있다.

General 헤더: Via와 같은 헤더는 메시지 전체에 적용된다.

Request 헤더: User-Agent (en-US), Accept-Type와 같은 헤더는 요청의 내용을 좀 더 구체화 시키고(Accept-Language), 컨텍스를 제공하기도 하며(Referer), 조건에 따른 제약 사항을 가하기도 하면서(If-None) 요청 내용을 수정한다. Entity 헤더: Content-Length와 같은 헤더는 요청 본문에 적용된다. 당연히 요청 내에 본문이 없는 경우 entity 헤더는 전송되지 않는다.


요청 - 본문


본문은 요청의 마지막 부분에 들어가지만, 모든 요청에 본문이 들어가지는 않는다.
GET, HEAD, DELETE, OPTIONS 처럼 리소스를 가져오는 요청은 보통 본문이 필요 없다.
(HTML 폼 데이터를 포함하는) POST 요청일 경우 업데이트를 하기 위해 서버에 데이터를 전송한다.

넓게 보면 본문은 두가지 종류로 나뉜다.

단일-리소스 본문(single-resource bodies): 헤더 두 개(Content-Type와 Content-Length)로 정의된 단일 파일로 구성된다.
다중-리소스 본문(multiple-resource bodies): 멀티파트 본문으로 구성되는 다중 리소스 본문에서는 파트마다 다른 정보를 지니게 된다.
보통 HTML 폼과 관련이 있다.


응답 - 상태 줄


HTTP 응답의 시작 줄은 상태 줄(status line)이라고 불린다.

ex) HTTP/1.1 404 Not Found.

프로토콜 버전 : HTTP/1.1
상태 코드 : 요청의 성공 여부, 404
상태 텍스트 : 상태 코드에 대한 설명, Not Found.


응답 - 헤더


응답에 들어가는 HTTP 헤더는 다른 헤더와 동일한 구조를 따른다.
대소문자를 구분하지 않는 문자열 다음에 : 이 오며, 그 뒤에 오는 값은 구조가 헤더에 따라 달라진다.
헤더는 값을 포함해 전체를 한 줄로 표시한다.

General 헤더: Via와 같은 헤더는 메시지 전체에 적용된다.
Response 헤더: Vary와 Accept-Ranges와 같은 헤더는 상태 줄에 미처 들어가지 못했던 서버에 대한 추가 정보를 제공한다. Entity 헤더: Content-Length와 같은 헤더는 요청 본문에 적용된다. 당연히 요청 내에 본문이 없는 경우 entity 헤더는 전송되지 않는다.


응답 - 본문


본문은 응답의 마지막 부분에 들어가며, 201, 204과 같은 상태 코드를 가진 응답에는 보통 본문이 없다.

넓게 보면 본문은 세가지 종류로 나뉜다.

이미 길이가 알려진 단일 파일로 구성된 단일-리소스 본문: 헤더 두개(Content-Type와 Content-Length)로 정의한다.
길이를 모르는 단일 파일로 구성된 단일-리소스 본문: Transfer-Encoding가 chunked로 설정되어 있으며, 파일은 청크로 나뉘어 인코딩 되어 있다.
서로 다른 정보를 담고 있는 멀티파트로 이루어진 다중 리소스 본문: 이 경우는 상대적으로 위의 두 경우에 비해 보기 힘들다.


URL? URI?


Uniform Resource Identifier

인터넷에 존재하는 각종 정보들의 유일한 이름이나 위치를 표시하는 식별자
URI 에는 고유한 위치를 표시하는 URL 과 고유한 이름을 표시하는 URN 이 있다.

scheme://host :port/path?query

scheme : 인터넷 서비스 유형 (http, https 등)
host : 웹 서버, 내부적으로 도메인을 ip주소로 변환하여 인식
port : 호스트의 포트번호 (80, 443 등, 브라우저에서 생략)
path : 서버 경로 (생략된 경우: 사이트의 루트 디렉터리)
query : 쿼리 데이터를 path 로 전달

Uniform Resource Locator
네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약

웹 브라우저는 URL을 사용하여 웹 서버에서 페이지를 요청한다.

scheme://prefix.domain :port/path/filename

prefix : 도메인 접두사 (http 의 기본값은 www)
domain : 인터넷 도메인 이름 (w3schools.com)
filename : 문서 또는 리소스의 이름

Uniform Resource Names

웹 문서의 물리적인 위치와 상관없이 웹 문서 자체를 지시
URN은 URL과는 달리 정보의 실제위치에 관계없이 해당 정보에 접근 가능

urn:[namespace identifier]:[namespace specific string]

urn : 형식 지정, 나는 urn 이다.
ex) urn:isbn:096139210x


HTML?


W3Schools 에 따르면,

Hyper Text Markup Language

웹 페이지를 만들기 위한 표준 마크업 언어

마크업 언어?
태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어

HTML 은…

웹 페이지의 구조를 설명한다.
elements 로 구성되어 있다.
elements 는 브라우저에 내용을 표시하는 방법을 알려준다.
elements 는 content 레이블을 지정한다. (head, title 등)

HTML 문서를 웹 브라우저가 읽고 표시한다.
HTML 태그는 직접 표시되지 않지만, 문서를 표시하는 방법을 결정하는 데 사용한다.


HTML 샘플 문서


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

<!DOCTYPE html> : 이 문서는 HTML5 문서
<html> : HTML의 루트 요소 페이지
<head> : HTML 페이지에 대한 메타 정보
<title> : HTML 페이지의 제목
<body> : 문서의 본문, 보여지는 모든 내용
<h1> : 큰 제목 (heading)
<p> : 단락 (paragraph)