웹 브라우저 안에서 웹페이지를 볼 때 무슨 일이 일어나는가?
클라이언트와 서버
웹에 연결된 컴퓨터는 클라이언트와 서버라고 한다. 그들은 아래와 같은 그림으로 상호작용한다.
- 클라이언트는 일반적인 웹 사용자의 인터넷이 연결된 장치들(컴퓨터, 스마트폰)과 이런 장치들에서 이용가능한 웹에 접근하는 소프트웨어(크롬, 사파리)이다.
- 서버는 웹페이지, 사이트, 또는 앱을 저장하는 컴퓨터이다. 클라이언트의 장비가 웹페이지에 접근을 요청할 때, 서버로부터 클라이언트의 장치로 웹 브라우저에서 보여지기 위한 웹 페이지의 사본이 다운로드 된다.
웹이 도로라고 상상해보자.
인터넷(길)이라는 인프라를 통해 집과 상점이 연결되었고 그 위에 웹(도로)이라는 서비스가 구축되어 원활하게 통신이 가능하게 되었다.
도로의 한 쪽 끝은 클라이언트의 집이 있으며 다른 한 쪽 끝은 여러분이 뭔가를 사길 원하는 서버라는 상점이 있다.
TCP/IP는 패킷 통신을 위한 인터넷의 규약이다. IP는 데이터 조각들을 최대한 빨리 목적지로 보내는 역할을 하고, TCP는 IP 위에서 동작하는 프로토콜로 데이터의 전달을 보증하고, 보낸 순서대로 받게 해준다.
TCP가 없다면 IP가 전달하는 데이터는 패킷 전달 여부를 보증할 수 없고 보낸 순서와 받는 순서가 다를 수도 있다.
DNS(Domain Name System Servers)는 웹사이트를 위한 주소록과 같다. 숫자로 이루어진 IP 주소를 통해 웹사이트에 접근할 수 있지만, 직관적이고 기억하기 쉬운 도메인 이름을 사용하여 접근할 수 있게 해주는 역할을 한다.
클라이언트가 상품을 사기 위해 도착한 서버에서는 각기 다른 파일들로 만들어진 다양한 종류의 상품이 있다. HTML, CSS, JavaScript로 이루어진 코드 파일이 있으며 이 외의 이미지, 음악, 비디오같은 추가적인 자원들도 있다. 코드파일과 컴포넌트는 잘 조합되고 정리되어 클라이언트에게 보여지게 되는데 이 두 파일을 컴포넌트 파일 이라고 한다.
상품의 구매를 위해 클라이언트와 서버는 의사소통을 해야하는데 이런 의사소통을 위한 언어를 정의하는 규약이 HTTP(Hypertext Transfer Protocol)이다.
의사소통을 하고 필요한 상품들을 클라이언트가 다시 집으로 가져가야하는데 이 때의 상품(데이터)들은 가장 작은 덩어리인 패킷 단위로 전송이 된다. 너무 큰 단위로 전송하면 전송 속도도 늦을 뿐더러 전송 중 위험한 상황이 많이 발생할 수 있기 때문이다.
웹 브라우저
브라우저는 위에서 본 웹의 동작 방식을 이용할 수 있게해주는 하나의 소프트웨어인데 크롬, 파이어폭스, 사파리 등을 생각하면 된다.
클라이언트에게 친화적인 환경으로 구성되어있으며 서버에서 받은 컴포넌트 파일들을 렌더링 엔진과 자바스크립트 엔진(V8) 등을 이용하여 클라이언트에게 시각적으로 보여주게 된다.
브라우저가 작동하는 방법을 간략하게 설명하면, 우선 서버로부터 전송받은 HTML을 기반으로 DOM 트리를 구성하고 그 동안 브라우저는 렌더 트리를 구축하여 시각적인 순서에 맞게 그려낼 수 있도록 한다. 이때 Script태그를 만나게 되면 자바스크립트 엔진으로 제어 권한을 넘겨 해석하는 방식으로 작동한다.
