자바스크립트의 탄생
1995년, 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍을 위한 목적으로 넷스케이프 커뮤니케이션즈(Netscape communications) 브렌던 아이크(Brendan Eich)에 의해 최초의 자바스크립트가 개발되었고, 현재 모든 브라우저의 표준 프로그래밍 언어로 자리잡았다.
자바스크립트의 표준화
마이크로소프트는 자바스크립트의 파생 버전인 JScript를 인터넷 익스플로러에 탑재하였다.
문제는 넷스케이프의 자바스크립트와 마이크로소프트의 JScript가 시장 경쟁률을 높히기 위해 자사 브라우저에서만 동작하는 기능을 추가하기 시작했다.
이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다. 결과적으로 현재에도 존재하는 크로스 브라우징 이슈보다 더 심각한 이슈들이 발생하여 정상적으로 동작하는 웹페이지를 개발하기 힘들어졌다.
이에 자바스크립트의 파편화를 방지하는 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성이 대두되었다.
이를 위해 1996년 넷스케이프 켜뮤니케이션즈는 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구 ECMA 인터내셔널에 자바스크립트의 표준화를 요청하였고, 1997년 ECMA-262라 불리는 표준화된 자바스크립트 초판이 완성되었고, 상표권 문제로 자바스크립트는 ECMAScript로 명명되었다.
현재의 우리가 흔히 자바스크립트의 버전을 표시할 때 사용하는 ES4, ES5, ES6 등이 ECMAScript의 버전별 약자이다.
자바스크립트 성장의 역사
초창기 자바스크립트는 웹페이지의 보조적인 기능 수행을 위한 한정적 용도로 사용되었다.
(서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준)
렌더링
HTML, CSS, JAVASCRIPT로 작성된 문서를 해석하여 브라우저에 시각적으로 출력하는 것
Ajax
1999년, 자바스크립트를 이용해 서버와 브라우저가 비동기방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 XMLHttpRequest라는 이름으로 등장했다.
기존의 렌더링에서 변경할 필요가 없는 부분까지 포함된 HTML 코드를 서버로부터 다시 전송 받아 발생하는 불필요한 데이터 통신 과정에서 생기는 성능 저하 문제를 해결하였다.
변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식을 통해 웹 브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면전환이 가능해졌다.
jQuery
2006년, 다소 번거롭고 논란이 있던 DOM을 더욱 쉽게 제어하고, 크로스 브라우징 이슈 해결을 목적으로 jQuery라는 자바스크럽트 라이브러리가 등장하였다.
장점으로는 자바스크립트 보다 편리한 DOM탐색, 모든 브라우저에서 동작하는 호환성이 있다.
단점으로는 라이브러리에 걸쳐 브라우저에 맞는 자바스크립트로 변환하는 과정 때문에 느린 구현 속도가 있다.
V8 자바스크립트 엔진
2008년, 기존의 자바스크립트 보다 빠르게 동작하는 자바스크립트 엔진의 필요성에 의해 구글에 의해 개발되었다.
자바스크립트는 인터프리터 언어기 때문에 코드를 해석하고 실행하는 엔진이 필요하다.
V8은 자바스크립트를 해석하고 컴파일하여 기계어로 변환한다.
V8은 C++로 작성되었으며 모든 C++ 애플리케이션에서 내장할 수 있다.
이로 인해 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자 경험을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었다.
웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동하게 되었고, 프론트엔드 영역이 주목받는 계기가 되었다.
V8엔진에 대해 보다 구체적인 내용이 궁금하였는데 이 문서를 참고하여 많은 도움을 얻었다.
Node.js
2009년, 라이언 달(Ryan Dahl)이 발표한 Node.js는 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.
런타임 환경이란 ?
런타임이란, 프로그래밍 언어가 구동되는 환경을 말한다.
JavaScript 런타임이란 JavaScript가 구동되는 환경을 말한다.
이러한 JavaScript 런타임의 종류로는 웹 브라우저(크롬, 파이어폭스 등)와 Node.js가 존재한다.
위 환경에서 JavaScript가 구동되기 때문에 JavaScript 런타임이라고 한다.
브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다.
Node.js 환경에서 동작하는 애플리케이션은 자바스크립트를 사용해 개발하는데, 프론트엔드와 백엔드 영역 모두에서 자바스크립트를 사용한다는 동형성은 별도의 언어를 학습하기 위한 시간 절약의 장점이 있다.
비동기 I/O를 지원하고 단일 스레드 이벤트 루프 기반으로 동작하기에 요청 처리 성능이 좋다.
실시간 데이터 처리를 위한 I/O가 빈번하게 발생하는 SPA(single page application)에 적합하며, CPU 사용률이 높은 애플리케이션에는 권장하지 않는다.
여기서 웹 브라우저와 Node.js의 런타임은 공통적으로 V8엔진을 사용하지만 목적 자체가 다르기에 지원하는 API의 차이가 존재한다.
브라우저의 경우, 사용자에게 웹 페이지를 보여주는 것이 목적이기 때문에 HTML 요소를 선택하고 조작하는 DOM API를 제공한다. 또한, 이런 작업을 수행하기 위해서 브라우저는 window / document 객체에 접근할 수 있다.
이와 달리, Node.js는 주로 서버에서 데이터를 다루는 목적으로 사용되기 때문에 로컬 스토리지에 파일을 생성하고 수정하는 File 시스템 관련 API가 제공된다. 이런 작업을 수행하기 위해서 Node.js는 브라우저보다 컴퓨터의 깊숙한 곳까지 제어할 수 있다.
브라우저는 사용자 컴퓨터에서 동작하기 때문에, 브라우저를 통해 사용자의 컴퓨터에 있는 파일들을 조작할 수 있다면 보안적으로 매우 위험하기 때문에 브라우저 환경에서는 이러한 기능을 제공하지 않는다.
이러한 발전을 통해 자바스크립트는 크로스 플랫폼을 위한 가장 인기있는 언어로 성장하였다.
SPA 프레임워크
자바스크립트 애플리케이션이 더이상 데스크톱 애플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공하게 되자, 그에 따른 개발 규모와 복잡도가 상승했다.
이에 따라 유연하고 확장이 쉬운 애플리케이션 프레임워크가 등장하게 되었고, 이러한 요구에 발맞춰 CBD(or CDD) 방법론을 기반으로 하는 SPA 프레임워크로 Angular, React, Vue.js, Svelte 등 다양한 프레임워크/라이브러리가 등장하였다.
자바스크립트와 ECMAScript
ECMAScript는 자바스크립트의 표준 사양인 ECMA-262를 말하며, 자바스크립트의 핵심 문법을 규정한다.
각 브라우저는 ECMAScript 사양을 준수하여 브라우저에 내장되는 자바스크립트 엔진을 구현한다.
자바스크립트의 개념은 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API를 함께 아우르는 개념이다.
자바스크립트의 특징
자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다.
자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.
인터프리터와 컴파일러의 장점을 결합하여 자바스크립트 엔진을 구현했다.
인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하여 최적화한다.
대부분의 브라우저에서 사용되는 인터프리터는 전통적인 컴파일러 언어 처럼 명시적인 컴파일 단계를 거치지 않지만, 일부 소스코드를 컴파일하고 실행한다.
이를 통해 인터프리터 언어의 장점인 동적 기능 지원과 동시에 느린 실행 속도를 극복한다.
자바스크립트는 런타임에 컴파일되고 실행 파일이 생성되지않으며 인터프리터의 도움 없이 실행할 수 없기에 컴파일러 언어라고 할 수 없다.
자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.
ES6 브라우저 지원 현황
IE를 제외한 대부분의 브라우저는 ES6를 지원하지만 100% 지원하지는 않는다.
따라서 브라우저에서 아직 지원하지 않는 최신 기능을 사용하거나 ES를 지원하지 않는 브라우저를 고려해야 한다면 바벨과 같은 트랜스파일러를 사용하여야 한다.
아래 사이트를 통해 지원현황을 쉽게 확인할 수 있다.
