[모던 자바스크립트 Deep Dive] 02장. 자바스크립트란?

 

02장. 자바스크립트란?

 

2.1 자바스크립트의 탄생

자바스크립트는 1995년 개발자 브랜던 아이크에 의해 만들어졌으며 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어라는 목적을 가지고 있었습니다. 

 

2.2 자바스크립트의 표준화

1996년 8월, 마이크로소프트는 자바스크립트의 파생 버전인 "JScript"를 인터넷 익스플로러에 탑재했습니다. 넷스케이프 커뮤니케이션즈와 마이크로소프트는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하였고 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생했습니다. 

이에 표준화된 자바스크립트의 필요성이 대두되었고, 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA 인터내셔널에서 1997년 7월, ECMA-262라 불리는 표준화된 자바스크립트 초판(ECMAScript 1) 사양이 완성되었으며 상표권 문제로 자바스크립트는 ECMAScript로 명명되었습니다. 

 

2015년에 공개된 ECMAScript 6 (ECMAScript 2015, ES6)에서 let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같이 범용 프로그래밍 언어로서 갖춰야 할 기능을 대거 도입합니다. 

 

2.3 자바스크립트의 성장과 역사

초창기 자바스크립트는 웹페이지의 보조적인 기능만 맡았습니다. 이 시기에 대부분의 로직은 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 데이터를 단순히 렌더링하는 수준이었습니다. 

 

렌더링(Rendering)
렌더링이란 HTML, CSS, 자바스크립트로 작성된 문서롤 해석해서 브라우저에 시각적으로 출력하는 것을 의미합니다. 때로는 서버에서 데이터를 HTML로 변환하여 브라우저에게 전달하는 과정(SSR; Server Side Rendering)을 가리키기도 합니다. 

 

2.3.1  Ajax (1999)

자바스크립트를 이용해 서버와 브라우저가 비동기(asynchronous) 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax(Asynchronous javaScript and XML)가 XMLHttpRequest라는 이름으로 등장했습니다. Ajax의 등장으로 웹페이지에서 변경할 필요가 없는 부분을 제외하고 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 렌더링하는 방식이 가능해졌습니다. 이로써 빠른 성능과 부드러운 화면 전환이 가능해졌습니다. 

 

2.3.2  jQuery (2006)

jQuery의 등장으로 DOM을 더욱 쉽게 제어할 수 있게 되었고 크로스 브라우징 이슈도 어느 정도 해결되었습니다. 학습 난이도가 상대적으로 높은 자바스크립트보다 배우기 쉽고 직관적인 jQuery를 더 선호하는 개발자들이 양산되기도 했습니다.  

 

2.3.3  V8 자바스크립트 엔진 (2008)

등장한 구글의 V8 자바스크립트 엔진의 등장으로 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자 경험(UX; user experience)을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었습니다.

V8 자바스크립트 엔진으로 촉발된 자바스크립트의 발전으로 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동했고, 이는 웹 애플리케이션 개발에서 프론트엔드 영역이 주목받는 계기가 되었습니다.

 

2.3.3  Node.js (2009)

라이언 달이 발표한 Node.js는 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(runtime environment)이며 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 해줍니다. 프론트엔드뿐만 아니라 백엔드 영역에서도 자바스크립트를 사용할 수 있다는 동형성(isomorphic)은 별도의 언어 학습을 위해 필요한 시간을 덜어줍니다. Node.js는 비동기 I/O를 지원하며 단일 스레드(single thread) 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋고 SPA(Single Page Application)에 적합합니다. 이제 자바스크립트는 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있습니다. 

 

2.3.3  SPA 프레임워크

모던 웹 어플리케이션은 높은 성능과 우수한 사용자 경험을 필수적으로 제공해야 했고 더불어 개발 규모와 복잡도도 상승했습니다. 이러한 변화에 따라 CBD(Component based development) 방법론을 기반으로 하는 SPA(Single Page Application)가 대중화되면서 Angular, React.js, Vue.js, Svelte 등 다양한 SPA 프레임워크/라이브러리가 출현했습니다. 

 

2.4 자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준 사양인 ECMA-262를 말하며, 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정합니다. 각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현합니다.

 

2.5 자바스크립트의 특징

•  HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
• 개발자가 별도의 컴파일 과정을 수행하지 않는 인터프리터 언어(Interpreter language) (현대 엔진은 인터프리터+컴파일러 방식 채택)
• 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
• 프로토타입 기반의 강력한 객체지향 언어

2.6 ES6 브라우저 지원 현황

인터넷 익스플로러를 제외한 대부분의 모던 브라우저는 ES6를 지원하지만 100%는 아닙니다. 따라서 브라우저에서 지원하지 않는 최신 기능을 사용하거나 인터넷 익스플로러 또는 구형 브라우저를 고려해야 하는 상황이라면 바벨(Babel)과 같은 트랜스 파일러를 사용해 소스코드를 ES5 이하의 사양으로 다운그레이드해야 합니다.