브라우저란?
브라우저는 웹 페이지나 웹 애플리케이션을 보고 사용할 수 있게 해주는 프로그램입니다. 대표적인 브라우저로 Chrome, Firefox, Safari, Edge 등이 있습니다.
브라우저 동작 과정
브라우저의 동작 과정은 다음과 같습니다:
1. 데이터 요청: 사용자가 URL을 입력하면 브라우저는 웹 서버에 해당 페이지를 요청합니다.
2. 데이터 수신: 웹서버는 HTML, CSS, JavaScript 등 웹사이트를 표시하기 위한 파일을 브라우저에 보냅니다.
3. 렌더링: 브라우저는 받은 파일들을 해석(파싱)하여 화면에 보여줍니다.
브라우저 동작 원리
웹 페이지는 사실 긴 글씨와 코드가 나열된 것입니다.
브라우저가 이 긴 코드를 읽고 이해하는 과정을 파싱(Parsing)이라고 합니다.
브라우저는 코드를 이해한 결과를 나무(Tree) 모양의 구조로 만들고, 이 구조를 DOM(Document Object Model, 문서 객체 모델) 트리라고 합니다.
나무의 각 가지는 웹 페이지의 각 요소, 예를 들어 제목(h)이나 이미지(img), 버튼(button) 등을 나타냅니다.
DOM 트리를 통해 JavaScript는 웹 페이지의 각 요소에 접근하고, HTML 요소를 수정하거나 상호작용할 수 있습니다.
DOM 트리로 인해 웹사이트에 신경계가 구성되고, JavaScript가 두뇌 역할을 하며 웹사이트를 컨트롤한다고 생각하면 됩니다.
예를 들어 사용자가 버튼을 클릭하면 JavaScript는 DOM 트리에서 해당 버튼을 찾고, 버튼을 클릭했을 때 실행할 코드를 찾아 동작을 실행합니다.
DOM에 대해서는 다음 수업에서 더 자세히 알아보겠습니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!