📌브라우저는 무엇이며 어떻게 동작할까?
자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션이다. 대부분의 프로그래밍 언어는 운영체제(Operating System, OS) 위에서 실행되지만 웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 보다 효율적인 자바스크립트 프로그래밍이 가능하다.
브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다.
브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.
🖥️ 브라우저 주요 기능
사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
- 자원: 보통 HTML문서이나 PDF이미지 또는 다른 형태일 수 있다. 주소는 URI에 의해 정해짐
브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다. 과거에는 브라우저들이 일부만 이 명세에 따라 구현하고 독자적인 방법으로 확장함으로써 웹 제작자가 심각한 호환성 문제를 겪었지만 최근에는 대부분의 브라우저가 표준 명세를 따른다.
브라우저의 사용자 인터페이스는 서로 닮아 있는데 다음과 같은 요소들이 일반적이다.
- URI를 입력할 수 있는 주소 표시 줄
- 이전 버튼과 다음 버튼
- 북마크
- 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
- 홈 버튼
브라우저의 사용자 인터페이스는 표준 명세가 없음에도 불구하고 수 년간 서로의 장점을 모방하면서 현재에 이르게 되었다. HTML5 명세는 주소 표시줄, 상태 표시줄, 도구 모음과 같은 일반적인 요소를 제외하고 브라우저의 필수 UI를 정의하지 않았다. 물론 파이어폭스의 다운로드 관리자와 같이 브라우저에 특화된 기능도 있다.
🖥️ 브라우저 기본 구조
✨UI (사용자 인터페이스)
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등,
요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
✨브라우저 엔진 (Brower Engine)
UI와 렌더링 엔진 사이의 동작을 제어
✨렌더링 엔진 (Rendering Engine)
요청한 콘텐츠를 브라우저 화면에 표시. HTML 및 XML 문서와 이미지를 표시할 수 있다.
✨통신 (Network)
네트워크 호출에 사용
✨자바스크립트 해석기 (JavaScript Interpreter)
JavaScript 코드를 해석하고 실행한다.JavaScript Engine 이라고도 한다.
✨UI 백엔드
기본적인 위젯을 그리는 인터페이스(select, input 등...)
✨자료 저장소 (Data Storage)
Cookie, Local Storage 등과 같이 브라우저 메모리를 활용하여 데이터를 저장
레퍼런스
https://minemanemo.tistory.com/121
https://d2.naver.com/helloworld/59361
사실 많이 어려워서 한번에 보기가 힘들다. 생각보다 엄청난 내용이었다.
