1. Javascript와 브라우저

Javascript

자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 언어이며, 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter Language)입니다.

 

인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 최적화하는데,

대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합하여 비교적 처리 속도가 느린 인터프리터의 단점을 해결했습니다.

이를 통해 컴파일 단계의 추가적인 시간이 필요함에도 빠른 코드의 실행이 가능케 합니다.

 

ECMAScript는 자바스크립트의 표준 명세를 말하며, 언어의 타입, 값, 함수 등 핵심 문법을 규정한 것입니다.

각 브라우저 제조사는 ECMAScript를 준수하여 내장되는 자바스크립트 엔진을 구현합니다.

(Chrome V8, FireFox의 Spidermonkey, Safari의 JavascriptCore, Microsoft Edge의 Chakra 등)

 

즉, 자바스크립트는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API(DOM, Canvas, Fetch, SVG 등)을 아우르는 개념입니다.

 

Internet Explorer를 제외 한 대부분의 모던 브라우저는 ES6(ECMAScript 2015)를 지원하고 있지만 100% 지원하고 있지는 않습니다.

이런 이유로 구형 브라우저를 지원해야 할 상황이라면 babel과 같은 트랜스 파일러를 사용하여 ES5 이하의 버전으로 다운 그레이드 할 필요가 있습니다.

 

브라우저

Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용되는 범용 개발 언어가 되었지만, 가장 많이 사용되는 분야는 역시 웹 브라우저 환경에서 동작하는 Web Application입니다.

 

대부분의 프로그래밍 언어는 운영체제(Operating System, OS)에서 실행되지만

자바스크립트는 브라우저에서 HTML, CSS와 함께 실행됩니다. 따라서 웹 브라우저 환경을 고려할 때 효율적인 프로그래밍이 가능합니다.

 

브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시해주는 것입니다.

출처: MDN Web Docs

간단히 말해, 브라우저는 서버로부터 Resource(HTML, CSS, Javascript, Image 등)을 응답(Response) 받아 렌더링(Rendering)하여 웹 페이지를 표시해줍니다.

이때 브라우저에서 자바스크립트를 읽을 때에는, 앞서 말했던 자바스크립트 엔진이 처리하게 됩니다.

 

브라우저의 보다 자세한 렌더링 과정에 대해서는 다른 글에서 알아보도록 하겠습니다.