[Dreamhack] HTTPS + Web과 웹 서비스 구조 + 웹 리소스 + 서버와 웹 클라이언트의 통신과정 + 웹 브라우저 + URL + Domain Name과 IP Address + 웹 렌더링

1 - 0 - 2. HTTPS + Web과 웹 서비스 구조 + 웹 리소스 + 서버와 웹 클라이언트의 통신과정 + 웹 브라우저 + URL + Domain Name과 IP Address + 웹 렌더링

 

 

 

# HTTPS(HTTP over Secure soket layer)

: TLS(Transport Layer Security) 프로토콜을 도입하여 HTTP 에서 발생할 수 있는 정보 탈취 등의 문제를 보완한 것

 

+ TLS 프로토콜이란?

: 서버와 클라이언트 사이에 교환되는 모든 HTTP 메세지를 암호화하여 HTTP 통신을 도청 및 변조로부터 보호하는 역할을 하는 프로토콜

 

HTTP 프로토콜

 

HTTPS 프로토콜

+ 위 사진에서 빨간색 글자는 모두 요청, 파란색 글자는 모두 응답

 

 

 

 

# Web과 웹 서비스 구조

: 인터넷 기반의 서비스 중 HTTP 를 이용하여 정보를 공유하는 서비스

웹 서버(Web Server)	웹 클라이언트(Web Client)
정보 제공 주체	정보 수용받는 이용자

 

 

- 웹 서비스 구조

프론트엔드(Front-end)	백엔드(Back-end)
웹의 서비스 구조에서 이용자의 요청을 받는 부분이며, 이용자에게 직접 보여지는 부분	이용자의 요청을 처리하는 부분

 

 

 

- 웹 리소스(Web Resource)

: 웹에 갖춰진 정보 자산으로, 프론트엔드를 구성한다.

 

+ 모든 웹 리소스는 고유한 URI(Uniform Resource Indicator)을 가지고 있고, 이를 사용하여 식별됨

+ 대표적인 웹 리소스

HTML (Hyper Text Markup Language)	CSS (Cascading Style Sheets)	JavaScript (JS = Client-Side Script)	그 외
웹 문서 구조의 살, 뼈대를 담당하며 구조화된 문서 작성을 지원	웹 문서의 외양을 지정하는데 사용하는 웹 리소스들의 시각화 방법을 기재한 스타일 시트	클라이언트가 실행하고, 이용자의 브라우저에서 실행되는 웹 문서의 동작을 정의하는데 사용하는 리소스	문서, 폰트, 이미지 등

 

 

 

 

# 웹 클라이언트와 서버의 통신과정

 

 

1. 이용자가 브라우저를 통해 웹 서버에 접속

2. 브라우저가 이용자의 요청을 해석

3. 브라우저가 해석한 정보를 HTTP 형식으로 웹 서버에 리소스를 요청

4. 서버에서 HTTP 형식으로 전달된 이용자의 요청 해석한 후 적절한 동작 수행

5. 서버에서 이용자에게 보낼 리소스를 HTTP 형식으로 이용자에게 전달

6. 브라우저가 서버로부터 응답받은 웹 리소스를 시각화하여 이용자에게 보여줌

 

 

 

 

# 웹 브라우저

: 서버와 HTTP의 통신을 대신하고, 수신한 리소스를 시각화하는 역할을 함으로써 뛰어난 UX(User eXperience)를 제공한다.

 

ex) 주소창에 이용자가 특정 주소를 입력했을 때 브라우저가 동작하는 순서

1. 웹 브라우저의 주소창에 입력된 주소 분석 ( = URL 분석 )

2. 입력된 주소에 해당하는 주소를 탐색 ( = DNS 요청 )

3. HTTP 통해 입력된 주소에 요청

4. 해당 주소의 HTTP 응답을 수신

5. 웹 렌더링과 리소스 다운로드 작업 실시

 

 

 

 

# URL(Uniform Resource Locator)

: 웹에 존재하는 리소스의 위치를 표현하는 문자열로, 브라우저를 통해 특정 웹 리소스에 접근할 때 이를 사용하여 서버에 요청을 보낸다.

 

 

- URL 의 구성 요소

Scheme	Host	Port	Path	Query	Fragment
웹 서버와의 통신에서 사용할 프로토콜의 종류	Authority의 일부이자, 접속할 웹 서버 주소에 대한 정보 표시	Authority의 일부이자 접속할 웹 서버의 포트에 대한 정보 표시	접근할 웹 서버의 리소스 경로	웹 서버에 전달되는 파라미터	메인 리소스 안의 서브 리소스에 접근할 때 이를 식별하기 위한 정보 보유

+ 파라미터란?

: 매개 변수라는 의미로, 어떠한 시스템이나 함수의 특정한 성질을 나타내는 변수를 말한다.

 

 

 

 

# Domain Name과 IP Address

- Domain Name

: Host 가 가지는 값 중 하나로, 이를 Host 값으로 이용할 때 브라우저가 DNS(Domain Name Server)에 Domain Name 을 질의하고 DNS 가 응답한 IP Aderess를 사용하는 과정을 거친다.

 

+ 리눅스나 윈도우 환경에서 nslookup 명령어를 통해 Domain Name 에 대한 정보를 확인할 수 있음

 

 

+ DNS(Domain Name Server)란?

: Host의 도메인 이름을 IP로 변환하거나 반대로 IP를 도메인 이름으로 변환하는 역할을 하는 서버

 

 

 

- IP Address

: 네트워크상에서 통신이 이루어질 때 장치 식별을 위해 사용하는 불규칙한 숫자로 이루어진 주소

 

 

 

 

# 웹 렌더링(Web Rendering)

: 서버로부터 받은 리소스를 이용자에게 시각화하여 보여주는 행위로, 웹 브라우저가 서버의 응답을 받은 후 리소스 타입을 확인하여 적절한 방식으로 이용자에게 전달하는 과정을 거친다.

 

+ 웹 렌더링은 웹 렌더링 엔진에 의해 이뤄지고, 브라우저별로 상이한 엔진을 사용한다.

ex) 크롬의 경우 블링크(Blink)를, 파이어폭스의 경우 개코(Gecko) 사용