Browser & window

브라우저가 하는 일

크롬, 사파리, 파이어폭스, 네이버 웨일과 같은 것들이 브라우저이다. 우리는 "브라우저" 라는 소프트웨어 프로그램을 통해서 웹 페이지에 접근할 수 있다. 

브라우저에서 웹 페이지를 열면 어떤 일이 일어날까?

브라우저의 주소창에 우리가 원하는 웹 페이지의 주소를 입력하면, 우리는 웹 페이지를 볼 수 있게된다. 그 뒤에서는 어떤 일들이 일어나고 있을까?

window에 저장되어 있는 데이터 | window

자바스크립트는 웹 브라우저에서 실행시키기 위해 만들어진 프로그래밍 언어이다. 지금은 브라우저 뿐만 아니라, 브라우저 밖(ex. web-server)에서도 실행시킬 수 있도록 진화했다. 브라우저나 웹 서버와 같이, 프로그래밍 언어가 실행되는 환경을 Host Environment라고 한다. 각각의 호스트 환경에서는 프로그래밍 언어가 이해할 수 있는 객체나, 함수를 제공한다. 브라우저는 자바스크립트에게 웹 페이지를 제어할 수 있는 객체와 함수를 제공한다. 

 

다음은 브라우저에서 자바스크립트 코드를 실행할 때, (창을 띄울 때) 브라우저가 제공하는 객체를 나타낸 것이다. 

window는 다음 두 가지 의미를 갖는다

1. 자바스크립트 코드가 실행되는 전역 객체(root object)로서의 의미
   • ex) window.alert(); 
2. 브라우저가 띄우는 시각적인 창(window)으로서의 의미
   • ex) window.innerHeight; 

DOM | Document Object Model

브라우저는 html 파일을 분석할 때, 코드 한줄 한줄을 자신이 이해할 수 있는 자바스크립트 문법으로 변환한다. 이렇게 자바스크립트 객체로 변환된 웹 페이지의 컨텐츠를 DOM이라고 부른다. css 파일 역시 자바스크립트 객체로 변환되어야 하며, 이것을 CSSOM이라고 한다. 

BOM | Browser Object Model

DOM이 Document를 객체로 변환한 것을 의미한다면, BOM은 Browser와 관련된 객체 일 것이라고 추측해 볼 수 있다. 사실 BOM의 공식적인 정의는 없지만, 대부분 브라우저에서 제공하는 object 중에 document와 관련된 작업을 하지 않는 object를 BOM으로 일컫는다. 특히 모던한 브라우저들에서 공통적으로 제공하고 있는 기능이나 속성을 모두 일컫는 용어로 사용한다.

자주 사용되는 것에는 Navigator, fetch, location 등이 있다.

JavaScript Core

Array

 

DOM APIs와 Web browser가 제공하는 APIs는 모두 JS 코드로 작성되어있다. 브라우저가 이런 APIs를 이해하고, 실행시킬 수 있는 것은 window 객체가 JS 자체에 내장된 객체를 알고있기 때문이다(JS는 배열과 함수 모두 객체의 한 종류이다). 즉 윈도우 객체에는 JS의 객체가 데이터로 저장되어있고, 이것을 바탕으로 우리가 작성하는 JS 파일에서 DOM APIs와 Web APIs를 이용할 수 있다. 

APIs란? 

Application Programming Interface의 약자로, 프로그래머와 프로그래밍을 연결해 주는(inter-face) 도구라고 생각하면 쉽다. 예를 들어 Browser가 제공하는 web APIs 중에는 alert라는 함수가 있는데, 이 함수를 코드로 작성한 뒤에 브라우저에서 실행시키면 우리가 전달한 메세지가 경고창으로 뜬다. 

 

alert('경고창을 띄울 수 있습니다!');

 

우리는 alert이 어떻게 브라우저 창에 뜨는지는 알 수 없다. 어떻게 항상 브라우저 상단의 중앙에 뜨는지, 확인 버튼을 누르면 왜 창이 닫히는지... 하지만 이 모든 원리를 이해하지 못하더라도 우리는 브라우저에 경고창을 띄울 수 있다. 이것이 API의 핵심 개념으로, "모든 복잡한 원리를 숨기고, 프로그래머가 쉽게 프로그래밍할 수 있게 만드는 것"을 일컫는다.