이번 포스트에서는 인터넷에 대하여 다룰 것이다.
2025 백엔드 개발자 로드맵에서 제일 먼저 볼 수 있듯이, 백엔드 개발자에게 인터넷이란 중요한 개념이다.
✔️ 인터넷(Internet) 이란?
참고
http://www.tcpschool.com/webbasic/intro
1) 정의
인터넷은 컴퓨터로 연결하여 TCP/IP 를 이용해 정보를 주고받는 컴퓨터 네트워크이자, 네트워크와 장치 사이의 통신을 목적으로 상호연결된 글로벌 컴퓨터 네트워크 시스템이다.
2) 구성
인터넷은 컴퓨터 네트워크(클라이언트와 서버가 서로 연결되어 구성된 망)가 전세계적으로 많이 모여 이루어진 일종의 컴퓨터 네트워크 시스템이다.
=> 클라이언트와 서버로 구성된 네트워크의 집합체
3) 특징
- 쌍방향 통신 제공
- 컴퓨터가 인터넷에 연결되어만 있다면 언제든지 메세지를 주고받을 수 있음
- 이미지, 음성, 동영상 등 다양한 포맷을 주고받을 수 있음
✔️ 인터넷(Internet) 의 동작 원리
참고
https://developer.mozilla.org/ko/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work
두 개의 컴퓨터를 연결해야하는 단순한 네트워크의 경우 다른 컴퓨터와 물리적으로 또는 무선으로 연결되어야한다.
하지만 컴퓨터가 두 대 그 이상이라면, 연결해야할 컴퓨터의 개수가 늘어날 수록 복잡해진다.
이 문제를 해결하기 위해 라우터라고 하는 특수한 소형 컴퓨터를 사용한다. 라우터는 올바른 대상에게 메세지가 전달되도록 하며, 다른 대상에게 메세지가 전달되지 않도록 한다.
그렇다면, 하나의 라우터에 연결하기 버거울 정도로 컴퓨터가 늘어난다면?
라우터는 특수한 소형 컴퓨터이므로, 여러대를 설치할 수 있다.
컴퓨터를 라우터에 연결, 라우터에서 라우터로 확장하면 되는 것이다.
하지만 아주 먼 곳까지 케이블로 연결할 수는 없는 법이다.
이미 세계 어느 곳과도 연결되어있는 전화기 기반의 시설이 이의 해답이 될 수 있다.
네트워크를 전화 시설과 연결하기 위해선 모뎀이라는 특수한 장비가 필요하다.
모뎀은 네트워크 정보를 전화 시설에서 처리할 수 있는 정보로 바꾸며, 이 반대의 상황도 가능하다.
모델을 통해 네트워크에 연결된 후에는, 네트워크에서 도달하려는 네트워크에 메세지를 보내는 것이다.
ISP는 모두 함께 연결되는 몇몇의 특수한 라우터를 관리하고, 다른 ISP의 라우터에도 액세스 할 수 있는 인터넷 서비스 제공 업체이며, 네트워크로 보낼 메세지는 ISP 네트워크의 네트워크를 통해 전달된다.
✔️ 브라우저와 동작 방식
참고
https://d2.naver.com/helloworld/59361
브라우저는 사용자가 원하는 페이지를 서버에 요청하고, 서버에서 보낸 HTML, JS등 응답을 받는다. 이 결과를 화면에 띄워준다.
1) 브라우저의 구성 요소
| 사용자 인터페이스 | 브라우저에서 렌더링되는 화면을 제외한 부분 (주소 표시줄 등) |
| 브라우저 엔진 | 사용자 인터페이스와 연동되어 렌더링 엔진과 통신하는 중심 역할 |
| 렌더링 엔진 | HTML, CSS 파일 렌더링 담당 |
| JS 해석기 | 자바스크립트 코드를 해석함. 자바스크립트는 브라우저 엔진에서 직접 실행되지 않고, JS 엔진이 해석해 실행한다. |
| UI 백엔드 | 베이직한 위젯 컴포넌트(windows/combo boxes) 를 그리는 역할을 함 |
| 통신 | HTTP 요청과 관련된 네트워크 기능 담당 |
| 데이터 저장소 | 데이터 저장 역할. 로컬 스토리지 / 쿠키 타입으로 나눌 수 있다. |
2) 브라우저의 동작 과정
먼저 사용자가 사용자 인터페이스에 URL을 입력한다.
변환된 IP 주소로 HTTP/HTTPS 요청을 보내고, 서버는 이에 대한 응답으로 HTML 문서를 반환한다.
HTML 파싱 과정에서 추가 리소스(CSS, JS, 이미지 등)가 발견되면 브라우저가 다시 서버에 요청을 보낸다.
다음, 렌더링 엔진이 HTML과 CSS 파일을 파싱하여 화면에 나타낸다.
렌더링 엔진은 HTML 문서 파싱 후, 콘텐츠 트리 내부에서 태그를 DOM 트리로 변환한다.
그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱하여 CSSOM 트리로 만든다.
스타일 정보와 HTML 표시 규칙은 렌더 트리라고 부르는 또 다른 트리를 생성한다.
렌더 트리는 시각적 요소가 있는 사각형을 포함하고 있는데, 정해진 순서대로 화면에 표시된다.
렌더 트리가 생성되면 각 화면의 정확한 위치에 노드가 표시된다(렌더 트리 배치).
배치가 끝나면 UI 백엔드에서 렌더 트리를 그린다.
브라우저의 JS 엔진(V8 등)이 자바스크립트를 해석하고 실행한다.
JS는 DOM과 CSSOM을 동적으로 변경할 수 있으며, 이로 인해 렌더 트리, 레이아웃, 페인팅 과정이 다시 수행될 수 있다.
- 리플로우(Reflow): DOM/CSSOM 변경으로 레이아웃을 다시 계산하는 과정
- 리페인트(Repaint): 요소의 색상, 배경 등 스타일만 변경되어 다시 그리는 과정
렌더링 엔진은 좀 더 나은 사용자 경험을 위해 네트워크로부터 받은 내용의 일부를 먼저 화면에 표시하고, 나머지 일부를 기다린다.
다음 포스트에 이어서 인터넷에 관한 개념 정리를 정리하겠다..
감사합니다 (^◕.◕^)
'Internet' 카테고리의 다른 글
| [Internet] Internet에 대하여 (2) - DNS, Domain Name, Hosting (0) | 2025.09.04 |
|---|