[Web] 브라우저 원리 - ( week 1)

크롬을 기준으로 웹 개발에 대해서 학습한다.

 

웹 브라우저 원리

크롬 브라우저를 열어서 네이버에 접속한다.

그리고 아무거나 요소를 선택해서 '우클릭 > 검사'를 클릭하면 개발자 모드 창이 활성화된다.

 

 

다시 한번 텍스트로 된 요소를 검사하면 개발자도구 창에서 해당 텍스트를 안내해 주는데 텍스트를 더블클릭하고 수정해 보면 현재 페이지가 입력한 대로 수정되는 걸 확인할 수 있다.

 

 

하지만 새로고침을 하거나 다른 페이지에 방문 후 돌아와 보면 다시 원래대로 돌아와 있게 된다.

 

이번엔 브라우저를 띄운 채로 인터넷 연결을 끊어본다.

그래도 페이지는 여전히 띄워진 채로 있으며 다른 페이지로의 이동하게 되면 인터넷 연결 에러가 보인다.

 

여기서 발생하는 의문점이 있다.

어떻게 내가 보고 있는 페이지는 수정이 되는 것이며 인터넷 연결이 끊겨도 현재 보이고 있는 브라우저에는 문제가 없는 것일까?

 

이것은 웹이 동작하는 방식을 이해하고 나면 알 수 있다.

 

웹의 동작

브라우저를 열어서 웹 페이지에 접속을 하면 브라우저는 해당 웹 페이지를 저장하고 있는 서버에 요청을 보낸다.

요청을 받은 서버는 해당 페이지를 그리는데 필요한 HTML, CSS, JavaScript 등의 정보를 브라우저에게 제공한다.

 

여기서 요청 보내고 정보를 받아오는 과정은 미리 서버에서 만들어진 API를 통해서 이루어지며 이는 단순히 주소창에 웹 페이지의 주소를 입력하고 엔터를 입력하는 것만으로도 이루어지게 된다.

 

그렇기 때문에 현재 내가 보고 있는 페이지를 수정해도 페이지를 다시 열게 되면 요청과 정보를 받아오는 과정이 이루어지면서 서버에서 이미 만들어진 페이지를 볼 수 있게 된다. 그리고 이때 이미 내 컴퓨터에 해당 정보를 받아왔기 때문에 이후 인터넷 연결을 끊더라도 이미 그려진 브라우저 화면에는 문제가 발생하지 않게 되는 것이다.

 

프런트엔드 백엔드

브라우저처럼 눈에 보이는 화면을 프런트엔드라고 한다.

그리고 눈에 직접적으로 보이지 않지만 API를 통해서 서버로부터 정보를 받아오는 것을 백엔드라고 하며 웹 개발은 프런트엔드와 백엔드 이 두 가지를 통해서 개발이 이루어진다.