브라우저의 동작 원리

베하~ 안녕하세요 인사통입니다!

오늘은 우리가 정말 자주 사용하는 브라우저(browser)의 동작 원리에 대해서 알아보겠습니다.

 

우리가 자주 접하는 웹 화면

 

우선 우리가 매번 보는 이 화면이 어떻게 구성이 되어있는지, 어떻게 작동하는지 알고 사용하는 사람은 IT 관련업에 종사하거나 관심이 없다면 알 수 없습니다.

 

브라우저의 주요 기능은, '선택한 자원을 서버에게 요청하고, 전송받은 자원을 브라우저 화면에 표시' 하는 것입니다.

​

자원의 종류는 아래와 같은 요소들이 될 수 있습니다.

- HTML

- CSS

- JavaScript

- PDF

- Image

- 기타 등등

 

그렇다면 위에 언급한 자원은 브라우저가 어떻게 서버에게 요청을 할 수 있는 것일까요?

 

바로 URI(Uniform Resource Identifier) 덕분입니다.

​

URI는 각 자원의 서버 주소를 말합니다. 이 주소는 서버에 명시되어 있고, 명시된 주소를 통해 서버에게 해당 주소의 자원을 요청하여 받아오게 됩니다.

​

URI를 통한 자원 요청 방법은 브라우저에 있는 주소입력 창이 될 수도 있고, 데이터 요청을 위한 API 주소가 될 수도 있습니다

 

우리가 브라우저 주소입력 창에 www.naver.com을 입력했습니다.

그러면 해당 주소에 맞는 페이지를 브라우저 화면에 보여주기 위해 HTML, CSS, Javascript 파일을 포함하여 해당 페이지에 관련된 모든 리소스 파일(이미지, 동영상 파일 등)들을 네이버 서버에게 요청을 하고 받아올 것이죠.

​

그러면 여기서 'www.naver.com'은 URI가 되고,
페이지를 보여주기 위해 요청해서 받아온 모든 파일들이 자원이 되는 것입니다.

 

 

그러니 내가 브라우저를 통해 특정 주소를 띄운다는 것은 해당 페이지의 자원이 어디 위치하는 것임을 찾는 것부터

시작입니다.

 

만일 우리가 www.google.com을 탐색한다면 HTML 페이지는 IP 주소가 00.000.000.00인 서버에 위치하고 있습니다.

만약 이 사이트를 한 번도 방문한 적이 없다면 DNS 조회가 필요합니다.

브라우저는 DNS 조회를 요청합니다. 이는 최종적으로 이름 서버에 의해서 처리되고, IP 주소로 응답합니다.

 

IP 주소를 알고난 후에는, 브라우저는 서버와 TCP 3방향 핸드셰이크를 통해 연결을 설정합니다.

 

https://btcd.tistory.com/1558

TCP와 UDP의 차이(1)

TCP 3방향 핸드셰이크에대해 정리해 놓은 글입니다!

 

이후 웹서버로 한 번 연결이 성립되고 나면, 브라우저는 유저 대신에 초기 HTTP GET request를 보냅니다.

 

이후 렌더링 엔진의 동작으로 인해 우리가 자주 보는 웹페이지의 화면을 볼 수가 있습니다.

렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진입니다.

브라우저 동작 원리 전체 flow

 

이것으로 웹 브라우저 동작 원리에 대해 마치겠습니다!

다음에는 더욱더 양질의 정보를 가지고 돌아올게요! 베빠~!