본 내용은 모던 자바스크립트 Deep Dive. 이웅모 저. 에 출처하며 자바스크립트에 숨참고 deep dive 합니다.

2장. 자바스크립트란?

2.1 자바스크립트의 탄생

• 1995년, 웹 브라우저 시장을 지배하던 넷스케이프 커뮤니케이션즈는 브라우저에서 동작하는 경량 프로그래밍 언어를 도입한다. 그래서 탄생한 것이 브랜던 아이크가 개발한 자바스크립트다.

  • 이렇게 탄생한 자바스크립트는 현재 모든 브라우저의 표준 프로그래밍 언어로 자리 잡았다.

• 하지만 자바스크립트가 탄생한 뒤 얼마 지나지 않아 자바스크립트의 파생버전인 JScript가 출시되어 자바스크립트는 위기를 맞는다.

2.2 자바스크립트의 표준화

• 1996년, 마이크로소프트는 자바스크립트의 파생 버전인 “JScript”를 인터넷 익스플로러 3.0에 탑재했다.

  • 문제는 JScript와 Javascript가 표준화되지 못하고 적당히 호환됐다.

  • 그러자 각 회사는 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가

• 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했고, 결과적으로 모든 브라우저에서 정상적으로 동작하는 웹페이지를 개발하기 무척 어려워졌다.

• 표준화를 위해 넷스케이프 커뮤니케이션즈는 ECMA에 자바스크립트의 표준화를 요청한다.

• 1997년, ECMA-262라 불리는 표준화된 자바스크립트 초판이 완성되었고, 상표권 문제로 자바스크립트는 ECMAScript로 명명되었다.

• 2015년 공개된 ECMAScript 6에서 범용 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입했다.

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

• 초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다.
  • 이 시기 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML과 CSS를 렌더링하는 수준이었다.

2.3.1 Ajax

• 1999년, 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 XMLHttpRequest라는 이름으로 등장했다.

• 이전의 웹페이지는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다.

  • 화면이 전환되면 서버로부터 새로운 HTML을 받아 웹페이지 전체를 처음부터 다시 렌더링했다.
  • 이러한 방식은 변경할 필요가 없는 부분까지 처음부터 다시 렌더링 하므로 성능면에서 불리했다.

• Ajax의 등장으로, 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 것이 가능해졌다. → 부드러운 화면전환

  ex) 2005년 발표된 구글 맵스 (자바스크립트의 가능성을 확인하는 계기)
  

2.3.2 JQuery

• 2006년, JQuery의 등장으로, 다소 번거롭고 논란이 있던 DOM을 더욱 쉽게 제어할 수 있게 되었고 크로스 브라우징 이슈도 어느 정도 해결되었다.

2.3.3 V8 자바스크립트 엔진

• 자바스크립트의 시장이 넓어지면서 더욱 빠르게 동작하는 자바스크립트 엔진의 필요성이 대두되었다.

• 2008년 등장한 구글의 V8 자바스크립트 엔진은 이러한 요구에 부합하는 빠른 성능을 보여주었다.

  • 이로서 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자경험 (UX)을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었다.
  • 엔진으로 촉발된 자바스크립트의 발전으로 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동했고, 이는 웹 애플리케이션 개발에서 프런트엔드 영역이 주목받는 계기로 작용했다.

2.3.4 Node js

• 2009년 라이언 달이 발표한 Node.js는 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.

• Node.js는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다.

  • 서버 사이드 애플리케이션 개발에 주로 사용되며, 이에 필요한 빌트인 API를 제공한다.

• Node.js는 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다.

  • 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합
  • CPU 사용률이 높은 애플리케이션에서는 권장하지 않는다.

• 자바스크립트는 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있다.

  • 웹, 모바일 하이브리드 앱, 서버 사이드, 데스크톱, 머신러닝, 로보틱스 ..

2.3.5 SPA 프레임 워크

• 모던 웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공 하는 것이 필수가 되었고, 더불어 개발 규모와 복잡도도 상승했다.

• 이전의 개발 방식으로는 복잡해진 개발 과정을 수행하기 어려워졌고, 이에 따라 많은 패턴과 라이브러리가 출현했다. 또한 필연적으로 프레임워크가 등장하게 되었다.

• 이러한 요구에 발맞춰 CBD 방법론을 기반으로 하는 SPA가 대중화되면서 Angular, React, Vue.js, Svelte 등 다양한 SPA 프레임워크/라이브러리 또한 많은 사용층을 확보하고 있다.

2.4 자바스크립트와 ECMAScript

• ECMAScript는 자바스크립트의 표준 사양인 ECMA-262를 말하며, 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정한다.

  • 각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현한다

• 자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript 와 브라우저가 별도 지원하는 클라이언트 사이드 Web API (DOM, BOm, Canvas..)를 아우르는 개념이다.

  • 클라이언트 사이드 Web API 는 ECMAScript와는 별개로 월드 와이드 웹 콘소시엄에서 별도의 사양으로 관리하고 있다.

2.5 자바스크립트의 특징

• 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다.

• 자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어다.

  • 대부분의 모던 자바스크립트 엔진(크롬의 V8, 파이어폭스의 SpiderMonkey..)은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결했다.

인터프리터와 컴파일러의 차이

https://velog.io/@congaweb/compiler-interpreter