[JS] 자바스크립트란?

 

자바스크립트란?

웹 페이지는 기본적으로 HTML, CSS, Script 요소들로 이루어져 있습니다.

• HTML: 어떻게 브라우저에 보여줄지 구조(layout)를 잡습니다.

• CSS: 구조를 잡은 것을 어떻게 보여줄지 스타일을 입혀줍니다. (위치, 크기, 색상 등..)

• SCRIPT: HTML과 CSS로 만들어진 정적인 페이지를 동적으로 동작할 수 있게 만들어줍니다.

초기의 자바스크립트는 웹페이지의 보조적 기능을 수행하기 위한 용도로 사용되었으나, 프론트엔드와 백엔드 영역의 프로그래밍 언어로 사용할 수 있는 애플리케이션 개발 언어로 성장했습니다.

중요한 로직들은 서버사이드에서 처리하고, 클라이언트단에서는 받은 데이터 또는 HTML등을 렌더링 해주는 수준이었습니다. JQuery 같은 라이브러리의 등장으로 DOM을 쉽게 다룰 수 있어졌고, 브라우저 엔진과 웹의 발전으로 서버사이드에서 하던 일들의 많은 부분들을 클라이언트 단으로 이동되었습니다.

자바스크립트의 프로그래밍 스타일은 함수형 프로그래밍과 객체지향 프로그래밍을 함께 사용합니다.

 

역사

• 1997년: DOM 제어를 이용하여 컨텐츠와 스타일의 변화를 주는 것이 가능해졌습니다.
• 1999년: IE5에서 서버요청을 보내고 텍스트 형식의 데이터를 받는 것이 가능해졌습니다.
• 2001년: 더글락스 크락포드는 텍스트 형식으로 데이터를 저장하는 문법을 JSON이라 칭하고 문서화했습니다.
• 2005년: 비동기 방식의 Ajax의 등장 대표적으로 Google Maps가 있으며, Ajax 등장 이후 JSON이 인기를 끌기 시작했습니다. DOM을 다룰 일이 많아졌습니다.
• 2006년: DOM을 간편하게 할 수 있도록 JQuery가 API를 제공하여 Javascript에게 날개를 달아 주는 시기였습니다.
• 2007년: 애플이 Webkit엔진을 소개하여 모바일 시작을 지배했습니다. (안드로이드의 메인 엔진, iOS의 유일한 엔진)
• 2008년: 구글 크롬  V8엔진의 등장으로 자바스크립트의 느리다 는 인식을 바꿔주는 큰 발전이었습니다.
• 2009년: Node.js의 등장 서버사이드 언어를 자바스크립트로 구성할 수 있게 되었습니다. (HTML5와 함께 출현한 표준안이며 JSON, strict mode, 접근자 프로퍼티, 프로퍼티 어트리뷰트 제어, 향상된 배열 조작 기능(forEach, map, filter, reduce, some, every)
• 2015년: ES6, let, const, class, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당, 스프레드 문법, rest파라미터, Symbol, promise, Map/Set, iterator, for...of, generator, Proxy, module import/export 가 추가되었습니다.
• 2016년: 지수(**) 연산자, Array.prototype.includes, String,prototype.includes
• 2017년: Object 정적 메소드(Object.values, Object.entries, Object.getOwnpropertyDescriptors)
• 2018년: Object Rest/Spread프로퍼티, Promise.prototype.finally, asyncgenerator, for await...of
• 2019년: Object.fromEntries, Array.prototype.flat, Array.prototype.fleatMap, optional catch binding
• 2020년: String.prototype.matchAll, BigInt, Promise.allSettled, globalThis

런타임 자바스크립트(Node.js)의 등장으로 Javascript 세계에도 Bundle, Module이라는 개념이 발전되어 현재의 Webpack, React, Vue 등 발전된 프론트엔드 생태계를 구성할 수 있게 되었습니다.

 

브라우저의 동작 원리 이해

웹킷 동작 과정

사용자가 URL을 입력하게 되면, 해당 웹페이지의 리소스를 서버에 요청하고 브라우저는 서버로부터 HTML, CSS, JavaScript 파일을 응답받아 페이지에 그려줍니다.

HTML과 CSS 파일은 파서를 통해 DOM트리를 만들어집니다. DOM에 접근하기 위해서는 Document라는 객체로 접근하게 되는데 이때 Document의 접근이 가능한 이유 또한 DOM Tree가 만들어졌기 때문입니다.

HTML 파서는 Script태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에게 제어권한을 넘깁니다.

*태그 위치에 따라 DOM 생성이 지연되므로 <script> 태그를 </body> 태그 바로 위쪽에 붙이는 포인트!

CSS 같은 경우 CSS파서에 의해 파싱 되어 CSS Object Model트리가 만들어집니다.

DOM Tree가 만들어지면 사용자가 볼 수 있는 페이지를 만들기 위해 렌더 트리(렌더링 트리)라는 것이 필요합니다.

위에서 만들어진 DOM Tree와 CSSOM을 바탕으로 렌더링 트리가 구성되어 비로소 사용자가 페이지를 볼 수 있게 됩니다.

 

 

인터프리터

결론부터 말하자면, 자바스크립트는 인터프리터 동작 방식 언어다

 

인터프리터란?

전체를 컴파일하여 실행하는 것이 아닌, 위에서부터 아래로 순차적으로 실행하며 코드를 한 줄 한줄 기계어로 변환해가며 실행하는 방식

 

컴파일 언어와 인터프리터 언어

 

컴파일 언어 - 최초 실행 시, 적성된 모든 코드를 컴파일하여 속도가 느립니다. 컴파일된 후에 다시 컴파일을 거칠 필요가 없기 때문에 빠른 속도를 보입니다.

인터프리터 언어 -  최초 실행 시, 컴파일 과정을 거치지 않기 때문에 속도는 빠릅니다. 하지만 이후 한 줄 한줄 컴파일을 해야 되기 때문에 효율성이 떨어질 수 있습니다.

 

JIT (Just-In-Time) 컴파일이란?

모던 자바스크립트는 JIT(Just-In-Time)라는 컴파일 방식을 채택하였습니다.
컴파일 + 인터프리터 방식입니다. 프로그램 실행 시점에 필요한 부분을 바로 컴파일하는 동적 컴파일 방식입니다.
기존 인터프리터 방식보다 빠른 실행 속도를 보여주지만 JIT 컴파일링은 최초 실행되기 때문에 최초 실행에서는 조금 느릴 수 있습니다.