웹과 브라우저의 기본 개념과 동작 원리

새로운 프로젝트에서 개발업무를 시작하게 되었다. 그에 앞서 웹 기술에 대한 지식과 개념이 너무나 부족하고 정리가 안되있어, 본격적인 기술스택 학습에 앞서 사전 학습을 하게 되었다.

웹 페이지를 만들기위한 마크업 언어이다. 꺽쇠괄호를 사용한 태그를 이용해, 글자, 링크이동, 제목 등을 표현한다.

HTML은 실제 웹 페이지가 어떻게 표시되는 지, 즉 작성형식, 디자인을 지정하는 것이 어렵다. 그렇기 때문에 CSS파일에 따로 웹 페이지의 디자인(글자의 크기, 글자체, 배경 색상 등..)을 정의한다.

자바 스크립트는 객체기반의 스크립트 언어이다. 클라이언트 단의 웹 페이지 동작을 담당한다. 동적으로 컨텐츠를 바꾸고, 멀티미디어 등을 다룬다.
HTML, CSS, 자바 스크립트는 웹을 구성하는 대표적인 요소, 3요소등으로 표현된다.

웹 브라우저와 같은 클라이언트로부터 HTTP요청을 받아, 웹 페이지를 클라이언트로 보내주는 서버. 그림, HTML, CSS, 자바 스크립트를 포함 HTML 문서를 클라이언트에게 전송한다. 아파치, nginx 등이 있다.

웹 서버로 부터 받은 HTML문서, 이미지 등을 화면에 표현해주는 소프트웨어. 대표적으로 익스플로러, 크롬 등이 있는데, 이 브라우저들은 각각의 방식으로 HTML문서를 해석하고 화면에 나타낸다.

web

네이버 홈페이지를 접속하는 것을 예로 생각해보면, 웹 브라우저는 입력받은 URL로 네이버 웹 서버에 http요청을 보낸다. 이 요청을 받은 서버는 네이버 홈에 대한 HTML, CSS, JS, 이미지 등을 응답으로 보내준다.

naver

브라우저는 이 응답을 파싱하고 화면에 변환하여 표시해준다.

DOM이란? 문서객체모델의 약자로, 브라우저에선 HTML문서의 태그, 속성, 프로퍼티, 텍스트 등은 모두 별도의 객체로 파싱되고 이 객체들을 DOM이라고 한다.

dom

이 객체모델(DOM)에 대한 API들이 존재한다. 자바 스크립트는 이 API들을 이용해 웹 페이지를 동적으로 구동되도록 한다.

<html>
  <body>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "Hello World!";
    </script>
  </body>
</html>

브라우저가 웹 서버로부터 받은 HTML문서를 어떻게 파싱하여 화면에 표시하는 지 좀 더 구체적으로 알아보자.