Skip to content

Latest commit

 

History

History
100 lines (53 loc) · 5.96 KB

01. Introduction.md

File metadata and controls

100 lines (53 loc) · 5.96 KB
Raw

1. Introduction

자바스크립트의 역사와 특징에 대하여 다룬다.

자바스크립트의 역사

  • 탄생: 웹 페이지의 기능을 보조하기 위해 자바스크립트가 탄생했다.
  • 표준화: 크로스 브라우징 이슈를 해결하기 위해 자바스크립트를 표준화한다.
  • 성장: 자바스크립트가 브라우저로부터 독립된 환경에서 동작할 수 있게 된다.

탄생

  • 1995년: 넷스케이프 커뮤니케이션즈가 웹 페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정. 브렌던 아이크가 자바스크립트를 개발
  • 1996년: 넷스케이프 내비게이터 2에 탑재. 모카(Mocha) - 라이브스크립트(LiveScript) - 자바스크립트(JavaScript)로 최종 명명

표준화

  • 1996년 8월: 마이크로소프트가 IE(인터넷 익스플로러) 3.0에 JS의 파생 버전 JScript 탑재
  • 자바스크립트외 JScript는 호환되지 않았기 때문에 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생한다. 따라서, 모든 브라우저에서 동작하는 표준화된 자바스크립트가 필요했다.
  • 1996년 11월: 넷스케이프 커뮤니케이션즈가 ECMA 인터내셔널에 자바스크립트의 표준화 요청
  • 1997년 7월: 표준화된 자바스크립트 초판(ECMAScript 1) 사양 완성된다. 이 ECMA-262 기술 규격에 의해 정의된 자바스크립트를 ECMAScript라고 한다.

성장

  • 렌더링(rendering): HTML, CSS, 자바스크립트로 작성된 문서를 해석하여 브라우저에 시각적으로 출력하는 것을 뜻한다. 웹페이지는 서버로부터 전달받은 HTML과 CSS를 웹페이지 전체에 렌더링하는 방식으로 동작하여, 화면이 전환되면 변경할 필요가 없는 부분까지 다시 전송받고 다시 렌더링해야했다. 이는 성능면에서 비효율적이었고 시각적으로는 화면이 전환될 때 깜빡이는 문제가 있었다. 이러한 렌더링 방식을 **서버 사이트 렌더링(SSR; server side rendering)**이라고 한다.
  • 1999년: 자바스크립트로 비동기 통신을 할 수 있는 **Ajax(Asynchronous JavaScript and XML)**가 XMLHttpRequest API로 구현되어, 필요한 부분만 전송받고 렌더링할 수 있게 되었다.
  • 2006년: jQuery로 DOM(Document Object Model)를 쉽게 제어할 수 있게 되었고 크로스 브라우징 이슈를 일부 해결했다.
  • 2008년: 구글의 V8 자바스크립트 엔진은 이전보다 훨씬 빠르게 동작하여 데스크탑 애플리케이션과 유사한 사용자 경험(UX; user expression)을 제공할 수 있게 된다. 이제 웹 서버에서 수행되던 로직들을 클라이언트(브라우저)에서 수행하게 되었고, 프론트엔드 영역이 주목받게 된다.
  • 2009년: V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(runtime environment)인 Node.js가 발표된다. 이제 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트가 브라우저 이외의 환경에서 동작할 수 있게 된다. 백엔드 영역에서도 자바스크립트를 사용하여 서버 사이드 애플리케이션 개발에 사용할 수 있게 된다.
  • 데스크탑 애플리케이션에 비견하는 성능과 UX를 제공하기 위해 모던 웹 애플리케이션의 개발은 더욱 복잡해지고 그 규모가 커졌다. 따라서 애플리케이션 아키텍처가 변경에 유연하고 확장하기 쉽도록 프레임워크가 등장한다. 현재는 CBD(Component Based development) 방법론을 기반으로 하는 SPA(Single Page Application) 프레임워크와 라이브러리를 많이 사용한다.

자바스크립트와 ECMAScript

  • ECMAScript는 자바스크립트 표준 사양인 ECMA-262이다.
  • 브라우저 제조사는 ECMAScript 사양을 준수하여 브라우저에 탑재된 자바스크립트 엔진을 구현한다.
  • 자바스크립트는 프로그래밍 언어인 ECMAScript와 브라우저가 지원하는 클라이언트 사이드 Web API를 아우르는 개념이다.

클라이언트 사이드 Web API

  • 클라이언트 사이드 Web API 사양은 WSC(Wolrd Wide Web Consortium)에서 관리한다.
  • 클라이언트 사이드 Web API에는 DOM, BOM, Canvas,XMLHTTPRequest, fetch, requestAnimationFrame, SVG, Web storage, Web Component, Web Worker가 있다.

자바스크립트의 특징

  1. **스크립트 언어(scripting language, 애플리케이션을 제어하는 프로그래밍 언어)**이다.
  2. 프로토타입을 기반으로 한 객체 지향 언어이다.
  3. dynamic typing, loosely typed(5.1 Dynamic Typing 참고)
  4. 크로스 플랫폼 언어이다: 클라이언트(브라우저), 서버, 자바스크립트 엔진이 내장된 모든 디바이스에 동작할 수 있다.

ECMAScript와 브라우저

  • 브라우저가 ECMAScript의 최신 버전을 지원하지 않을 수 있다.
  • 이 경우 바벨(Babel)과 같은 트랜스파일러를 사용하여 사양을 다운그레이드 한다.

자바스크립트 엔진

브라우저와 엔진

브라우저에는 자바스크립트 가상 머신이 엔진으로 내장되어있다.

코드네임 사용처
V8 크롬, 오페라
SpiderMonkey 파이어폭스
Trident/Chakra IE
ChakraCore MS Edge
SquirrelFish 사파리

엔진의 동작

  1. 파싱: 엔진이 스크립트를 읽는다.
  2. 컴파일: 읽어 들인 스크립트를 기계어로 변환한다.
  3. 실행: 기계어로 변환한 코드를 실행한다.

참고