백엔드 로드맵으로 정리해보는 CS기초 [1-1] Internet

 

인터넷이란?

전세계에 걸처 원거리 접속이나 파일 전송, 전자 메일 등의 데이터 통신 서비스를 받을 수 있는 컴퓨터 네트워크 시스템을 말한다. 인터 네트워크(inter-network)라는 말에서 시작되었으며, 이제는 전 세계 컴퓨터들을 하나로 연결하는 통신망을 말한다. 인터넷은 클라이언트와 서버로 구성되며, TCP/IP라는 기본 프로토콜로 제공되고 있다.

 

인터넷 작동원리

인공위성을 위한 전송은 엄청난 거리를 통한 전송으로 지연이 발생할 확률이 높다. 

따라서 광섬유 케이블을 통해 데이터 센터 내 SSD(서버의 내부 메모리 역할)에 저장된 데이터를 가져오는 방식이 인터넷의 작동원리이다. 광섬유케이블에 보내진 광펄스는 라우터에서 전기적 신호로 변경되고 이더넷 케이블로 응답데이터를 기기로 받게 된다.

 

클라이언트는 직접적으로 인터넷과 연결되어 있는 서버가 아니며, ISP(internet service provider)에 연결되어 인터넷을 통해 서버에 요청할 수 있게 된다. 장치에 연결된 ISP가 장치의 IP 주소를 부여한다. 그리고 데이터는 작은 데이터 단위로 나눈 패킷의 형태로 전달한다. 패깃은 근접 라우터를 통해 다음 라우터에 보내지고 목적 서버나 클라이언트 IP로 도달하게 된다.

 

HTTP란?

HTTP는 hyper text transfer protocol의 약자입니다. TCP 연결기반 위에서 동작하는 프로토콜. 인터넷에서 정보를 주고 받을 수 있는 프로토콜(규약)로 서버에서 클라이언트의 요청에 대한 정보를 담아 메시지를 보낼 때 이를 HTTP 메시지라고 합니다. HTTP 통신을 통해 클라이언트는 명시된 바에 따라 HTML, JSON, XML 등의 형태로 정보를 주고 받는다.

HTTP는 연결을 유지하지 않는 프로토콜이기 때문에 요청/응답 방식으로 동작한다. 따라서 한 번에 요청에 응답을 하고 응답이 끝나면 연결을 끊는다. 연결에 따라 발생하는 핸드 셰이크는 오버헤드 발생의 원인이 되기도 한다.

 

HTTP 메시지

HTTP 메시지는 시작줄(첫줄)과 헤더, 본문으로 나뉜다. 메시지 타입은 요청과 응답에 따라 2가지 타입으로 구분된다.

 

Requests HTTP 메시지

시작줄에는 GET, DELETE, PUT, POST와 같은 요청의 종류와 사이트 주소와 HTTP 버전이 들어간다. 헤더에는 요청에 대한 정보를 담고 있고, 본문은 요청을 함께 보낼 데이터를 담는 부분이다.

 

Responses HTTP 메시지

시작줄은 상태줄이라고도 하며, 프로토콜(HTTP)의 버전, 상태코드(성공여부), 상태 텍스트로 구분된다. 

그리고 응답 헤더와 본문(생략될 수도 있음)이 있다.

 

HTTP/2 프레임

HTTP/1.x 버전이 가진 소모적인 비효율성을 해결할 수 있다. HTTP/2의 등장으로 헤더의 압축, 연속된 메시지의 비슷한 헤더 반복전송 문제들을 해결하고, 다중전송이 가능해졌다. 개선된 성능!

여러 개의 요청으로 연결할 필요없이 멀티플랙싱이 가능해져서 병렬처리도 할 수 있도 파이프라이닝과 달리 HOL 문제를 해결할 수 있다. 

요청없이도 필요한 리소스를 제공하는 서버 푸시 기능이 추가됐다.

스트림: 구성된 연결 내에서 전달되는 바이트의 양방향 흐름, 하나 이상의 메시지가 전달가능하다.
메시지: 논리적 요청 또는 응답 메시지에 매핑되는 프레임의 전체적인 시퀀스이다.
프레임: HTTP/2 통신의 최소단위이며 각 최소단위에는 하나의 프레임 헤더가 포함된다. 최소한으로 프레임이 속하는 스트림을 식별한다.

 

 

MDN HTTP 메시지 예시

 

서버와 클라이언트

서버는 어떤 자료에 대한 접근을 관리하는 네트워크 상의 시스템이고, 클라이언트는 자료에 접근할 수 있는 프로그램이다. 즉 서비스 정보에 대한 요청자이다.

 

브라우저

웹 브라우저란 HTML 문서와 그림, 멀티미디어 파일 등 WWW을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램의 총칭이다. 그래픽 사용자 인터페이스를 기반으로 한 응용 소프트웨어이다. 주요 웹브라우저는 구글 크롬, 파이어폭스, 엣지, 인터넷 익스플로러, 오페라, 사파리 등이 있다.

최초의 웹 브라우저는 1990년 팀 버너스 리가 발명하였다. 월드와이드웹이라는 이름에서 넥서스로 이름이 바뀌었다.

 

브라우저의 구조

브라우저는 사용자 인터페이스, 브라우저엔진, 렌더링 엔진, UI 백엔드, 자바스크립트 해석기, 자료저장소로 구분된다.

여기서 렌더링 엔진은 요청받은 내용을 브라우저 화면에 표시하는 것으로 HTML, CSS 등의 문서와 이미지를 표시할 수 있다. 파이어폭스는 모질라에서 직접 만든 게코(Gecko) 엔진을 사용하고 사파리와 크롬은 웹킷(Webkit) 엔진을 사용한다. 

 

브라우저의 작동방식

브라우저는 웹 페이지를 띄우기 위해 웹서버가 사용하는 HTTP로 통신한다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다.

 

렌더링 엔진의 동작과정

DOM 트리구축을 위한 HTML을 파싱하고 렌더 트리를 구축, 배치하고 그리는 과정을 통해 요청받은 내용을 브라우저에 표시한다. 각 과정은 순차적으로 전과정이 완전히 끝난 뒤 진행되는 것이 아니라 파싱된 부분부터 구축, 배치, 그리기 과정이 시작된다. 

 

웹킷 동작과정

 

파싱

여기서, 파싱이란 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 말한다. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱트리 또는 문법 트리라고 부른다. 문서는 파서에 의해 어휘분석과 구문분석 과정을 거치게 된다. 만들어진 파싱트리는 변환과정을 통해 기계코드로 전환된다.

 

 

---

https://roadmap.sh/backend

Oxford Languages

코딩의 시작, TCP School

(HTTP) HTTP란 무엇인가 - 웹 개발자의 역할 - ZeroCho Blog

HTTP란 무엇인가?

HTTP 메시지 - HTTP | MDN

HTTP/2 알아보기 - 1편 | 와탭 블로그

HTTP/2에서 Frame, Stream의 의미

웹 브라우저 - 나무위키

웹 브라우저 - 위키백과, 우리 모두의 백과사전

브라우저는 어떻게 동작하는가?

인터넷은 어떻게 작동될까요?