Wanna be a thinker

■HTML이란?

• HTML은 HyperText Markup Language의 약자이다.
• 웹페이지를 기술하기 위한 "마크업 언어"이다.
  • 마크업 언어란 문서나 데이터의 구조를 태그 등을 이용하여 명기하는 언어를 의미한다.

■HTML5이란?

• 2014년 10월 28일, 차세대 웹 표준으로서 등장하였다.
• 다음과 같은 기능이 추가되었다.
  • 멀티미디어 : 플래시와 같은 플러그인의 도움 없이, 비디오 및 오디오 기능을 자체적으로 지원한다.
  • 그래픽 : SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원한다.
  • 통신 : 이전에는 단방향 통신만 가능했으나, 이제 소켓 통신을 지원하여 서버와 양방향 통신이 가능하다.
  • 디바이스 접근 : 카메라, 동작센서 등 하드웨어 기능을 직접 제어할 수 있다.
  • 오프라인 및 저장소 : 오프라인 상태에서도 App을 동작할 수 있게 되어 HTML5를 플랫폼으로서 사용 가능하다.
  • 시맨틱 태그 : HTML 요소의 의미를 명확히 설명하는 태그를 도입하여, 브라우저, 검색엔진, 개발자가 요소의 의미를 명확히 해석한 데이터를 활용하는 시맨틱 웹의 실현이 가능하다.
  • CSS3 : HTML5는 CSS3을 완벽하게 지원한다.

■HTML의 역사

출처 : https://poiemaweb.com/html5-syntax

용어

• LAN : 캠퍼스, 건물, 한 층의 협소한 네트워크
• WAN : 도시, 국가 간을 묶는 광범위한 네트워크(여러 LAN을 결합)
• Host : IP 주소가 부여된 컴퓨터
• Standalone : 네트워크 접속 없이 컴퓨터를 사용하는 형태
• Batch Processing : 처리할 프로그램을 일정 시간 축적하여, 일괄 처리하는 방식
• OS : 컴퓨터의 CPU, 메모리, 주변 기기, 실행 프로그램을 관리하는 소프트웨어
• Multi Vendor : 인터넷을 경유한 서로 다른 기종 간의 접속
• Downsizing : 컴퓨터의 성능 향상으로 대형 컴퓨터를 소형 컴퓨터로 대체
• Mac(Media Access Control) : 물리적인 매체간의 접속을 제어

개요

1. 컴퓨터 네트워크의 개요 및 등장 배경
1. 컴퓨터의 다양화, 소형화, 가격 저하로 보급이 확산
2. 네트워크를 통해 컴퓨터 간 정보 공유, 빠른 송수신이 가능
3. 사적인 네트워크간 결합이 활발히 이루어져 인터넷이 탄생
4. 인터넷의 보급이 정보의 공유를 촉진
2. 컴퓨터와 네트워크의 발전사
1. 1950년대 : Batch Processing
• 대규모 계산을 위해서만 컴퓨터를 사용
• 잡지식
• Batch처리를 위해 COBOL, FORTRAN 언어가 개발
2. 1960년대 : Time Sharing System(TSS)
• TSS에서는 여러 단말이 하나의 컴퓨터를 사용
• 네트워크와 컴퓨터의 결합이 시작
• 잡지식
• TSS는 Star형 네트워크 구성
• 유저가 단말을 통해, 직접 컴퓨터를 조작
• TSS의 OS에 의해, 컴퓨터가 여러 프로그램을 동시에 처리
• 동시 처리를 통해, 가상적으로 단말과 컴퓨터간 1:1로 통신
• 대화형 조작이 실현
• TSS 용으로 Basic 언어가 개발
3. 1970년대 : 컴퓨터간 통신
• 컴퓨터의 소형화, 저가화로 기업이 컴퓨터를 도입
• 사무 처리의 효율화를 위해 컴퓨터 간의 데이터 송수신 기술이 실현
• 잡지식
• 이전에는 자기 테이프, 플로피 디스크 등 외부 매체를 이용하여 컴퓨터간 데이터 이동
4. 1980년대 : 컴퓨터 네트워크 등장
• 다른 종류의 컴퓨터 간의 통신을 위해 네트워크가 등장
• Windows 시스템의 등장으로, 여러 프로그램의 동시 사용을 실현
• 네트워크와 Windows 시스템을 결합하여, 네트워크 내의 서로 다른 컴퓨터 자원을 자유로이 활용
5. 1990년대 : 인터넷의 보급
• 값싸게 여러 메이커의 컴퓨터를 접속해 시스템을 구축하기 위한 Downsizing, Multi vendor가 유행
• WWW에 의한 웹 서비스의 보급으로 여러 메이커가 각자의 통신 기술을 인터넷에 대응
6. 2000년대 : 인터넷 기술이 중심
• 개별적으로 발전한 기술을 도입하여 인터넷이 발달
• 예로, 전화망을 기반으로 구축된 인터넷은 IP망으로 대체
• IP망 위에 전화, TV, 컴퓨터 통신, 인터넷이 구축
• 컴퓨터 외에도 인터넷에 접속
7. 모든 것의 핵심은 TCP/IP
• 인터넷 기술 = TCP/IP
• 다양한 통신 기술을 결합하는 응용성을 보유
3. 프로토콜
1. 개요
• 컴퓨터간 통신하기 위한 약속
• 프로토콜만 일치하면 메이커, CPU, OS 등의 차이는 무의미
• 통신을 위해서는 물리적 단계에서 응용 프로그램의 종류까지 명확한 약속이 필요
• 사람으로 치면 언어(영어, 일본어, 한국어 등)
2. 패킷 교환
• 패킷은 '소포'라는 뜻
• 큰 데이터를 작은 데이터로 분할한 것
• 패킷에 헤더를 부착하여 송신자, 수신자, 패킷내용 등을 지정
• 많은 컴퓨터가 한 회선을 공유해도 헤더를 통해, 목적지에 도달 / 재조립이 가능
• 프로토콜은 헤더의 작성법, 해독법에 대한 약속을 정의한 것
4. 프로토콜 표준화
1. 표준화란?
• 서로 다른 메이커의 네트워크 장비 간 통신할 수 있도록 공통된 프로토콜을 제정
2. 배경
• 컴퓨터의 사용량은 증가, 하지만 기업별 프로토콜이 달라, 타 기업 네트워크 장비와 통신할 수 없는 문제 발생
• 회사의 부도, 서비스 중단 등으로, 고객은 모든 장비를 타사의 장비로 교체해야 하는 문제 발생
• 호환성에 대한 니즈가 증가가 네트워크 오픈화, 멀티 벤더화로 직결
3. 대표적 모델
• OSI(Open Systems Interconnection, 개방형 시스템간 상호 접속)
• ISO(International Organization for Standardization, 국제 표준화 기구)에 의해 제정
• 통신에 필요한 기능을 7 계층으로 분할
• TCP/IP
• IETF(Inter Engineering Task Force)라는 민간 조직에서 표준화
• 인터넷 상의 Defact Standard로 자리 매김
5. 프로토콜 계층화
1. 계층화란?
• 복잡한 네트워크 프로토콜을 단순화 하기 위해, 기능에 따라 여러 계층으로 분할
• 각 층은 하위층에서 특정 서비스를 제공 받아, 상위층에 특정 서비스를 제공
2. 장점
• 각 층이 독립하여, 변경에 의해 타 층에 영향이 없음
• 단순화 되므로, 프로토콜을 만들기 쉬움
• 각 층마다 책임이 명확함
3. 프로토콜과 인터페이스
• 인터페이스 : 상위층과 하위층이 서로 서비스를 주고 받는 것에 대한 약속
• 프로토콜 : 통신 상대의 같은 계층과의 통신에 대한 약속
4. OSI 참조 모델
• 각 층은 역할에 따라 구분된다.
• Application
• 응용 프로그램의 통신 관련 부분을 정한다.
• 전자 메일, 파일 전송, 원격 접속 등
• Presentation
• 상하위층간 데이터 포맷을 상호변환한다.
• 기기 고유의 포맷 또는 네트워크 공통 포맷
• Session
• 데이터 전송을 관리한다.
• 논리적 통신로인 커넥션의 확립 / 절단, 전송할 데이터의 길이 등을 관리
• Transport
• 목적지의 Application 계층까지 데이터를 전송한다.
• 통신을 하는 양 쪽 노드에서만 처리가 일어난다.
• Network
• 목적지까지 데이터를 전송한다.
• 주소 체계, 전송 경로의 선택도 담당한다.
• Data Link
• 물리적으로 연결된 노드 간 통신을 가능하게 한다.
• 2진수의 숫자열을 의미를 가지는 덩어리인 프레임으로 나누어 상대에게 전달한다. (프레임의 생성, 수신)
• Physical
• 디지털 신호(비트열)와 아날로그 신호(전압의 고저 혹은 점멸)를 상호 변환한다.
• 케이블이나 커넥터의 형상을 규정한다.
• OSI 참조 모델에 의한 통신처리
• 각 층의 프로토콜은, 헤더 등 데이터 포맷과 데이터 처리 수순 등을 구체적으로 정의하고 있다.
• Application 층
• 송신 시
• 메시지, 수신자 등에 대한 메타데이터를 패킷에 부착한다.
• 수신 시
• 헤더와 패킷을 분리하여 해석한 후, 비휘발성 메모리에 보존한다.
• 수신 불가 시, 에러 메세지를 반환한다.
• Application 고유의 에러 처리도 Application 층의 역할이다.
• Presentation 층
• 이기종 간의 데이터 표현 형식의 정합성을 보장한다.
• 송신 시
• 컴퓨터 고유의 데이터 표현 형식을 네트워크 공통 표현 방식으로 변환한다.
• Presentation 층 간의 데이터 부호화 방식 식별을 위해 헤더를 부착한다.
• 수신 시
• 데이터 부호화 방식 식별을 위해 헤더와 패킷을 분리한다.
• 네트워크 공통 표현 방식을 컴퓨터 고유의 데이터 표현 형식으로 변환한다.
• Session 층
• 목적지로의 통신로 확보, 데이터 송신 준비 등 가상 커넥션을 확립한다.
• 커넥션 확립, 데이터 전송 등의 타이밍을 관리한다.
• 헤더에 데이터의 전송 수순에 대한 정보를 담아 부착한다.
• Transport 층
• 실제 커넥션의 확립 / 절단한다.
• 데이터 전송의 신뢰성을 보장한다.
• 데이터 도착 여부 확인
• 데이터 미도착, 데이터 파손시 재송신
• Network 층
• 목적지를 특정하기 위한 IP주소, 포트 등의 정보를 헤더에 담아 송신할 패킷에 부착한다.
• Data Link 층
• 물리적 통신 매체로 연결된 기기 간 데이터 송수신을 가능하게 한다.
• Physhical 층
• 0과 1의 디지털 데이터를 전압이나 빛의 펄스로 변환하여 물리적 통신매체에 흘려 보낸다.
• 직접 접속된 기기간 식별하기 위해 MAC 주소가 사용된다.
• 헤더에 MAC 주소가 포함된 정보를 담아 패킷에 부착한다.

목적

HTTP에 대한 전체상을 이해합니다.

목차

1. 정의

2. 특징

3. HTTP 기반 시스템의 구성 요소

    3.1. 클라이언트

    3.2. 서버

    3.3. 프록시

4. HTTP로 제어할 수 있는 것

    4.1. 캐시

    4.2. origin 제약완화

    4.3. 인증

    4.4. 프록시, 터널링

    4.5. 세션

5. HTTP 흐름

6. HTTP 메시지

    6.1. 요청의 구성 요소

    6.2. 응답의 구성 요소

1. 정의

HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜

2. 특징

- 웹상에서의 메시지(요청, 응답)를 통한 데이터 교환의 기초이다.

- 전송 프로토콜인 TCP나 TLS(암호화된 TCP)를 통해 메시지를 전송한다.

- HTTP 프로토콜은 애플리케이션 계층에 속한다.

- 서버, 클라이언트 구조이다.

3. HTTP 기반 시스템의 구성요소

3.1. 클라이언트

- HTML 문서 요청 후, 추가적으로 다음 리소스들을 요청하여 혼합한다.

    - 실행할 스크립트인 HTML

    - 이미지, 비디오 등 하위 리소스

    - 레이아웃 정보를 담은 CSS

3.2. 서버

- 클라이언트의 요청에 대한 문서를 제공한다.

- 논리적으로 단일 컴퓨터지만, 부분적으로 문서를 생성하는 서버들의 집합일 수 있다.

- 여러 개의 서버를 동일 머신 위에서 호스팅 할 수 있다.

- HTTP/1.1과 Host 헤더로 동일한 IP 주소를 공유할 수 있다.

3.3. 프록시

- 애플리케이션 계층에서 클라이언트와 서버 사이에 위치하는 컴퓨터로, 다음 기능을 수행한다.

    - 캐싱

    - 필터링

    - 로드 밸런싱

    - 인증

    - 로깅

4. HTTP로 제어할 수 있는 것

4.1. 캐시

    - 서버 : 캐시의 대상, 기간을 프록시와 클라이언트에게 지시할 수 있다.

    - 클라이언트 : 저장된 문서를 무시하도록 중간 캐시 프록시에게 지시할 수 있다.

4.2. origin 제약완화

    - 보안을 위한 origin 제약을 HTTP 헤더로 완화할 수 있다.

4.3. 인증

    - HTTP의 WWW-Authenticat 또는 유사 헤더, 쿠키를 사용한 특정 세션 설정

    - 특정 사용자만이 접근할 수 있도록 할 수 있다.

4.4. 프록시, 터널링

    - 실제 주소를 숨길 수 있다.

4.5. 세션

5. HTTP 흐름

서버와 클라이언트 간 통신의 흐름

1) TCP 연결

2) HTTP 메시지 전송

3) 서버에 의해 전송된 응답을 읽어들임

4) 연결을 닫거나 다른 요청들을 위해 재사용

6. HTTP 메시지

6.1. 요청의 구성 요소

    1) HTTP 메소드

    2) 요청할 리소스의 경로

    3) HTTP 프로토콜 버전

    4) 요청 헤더

    5) (전송할 리소스)

6.2. 응답의 구성 요소

    1) HTTP 프로토콜 버전

    2) 상태 코드

    3) 상태 메시지

    4) 응답 헤더

    5) (전송받은 리소스)

출처 : developer.mozilla.org/ko/docs/Web/HTTP/Overview