[Javascript] History of Javascript, ES6

수업에 들어가기 앞서

---

수업 과정

ECMAScript -> React -> Java -> Database -> Servlet -> Spring 

 

History of Javascript

---

자바스크립트는 웹에서 사용 가능한 목적으로 prototype 기반 함수형 언어로 만들어졌다.

자바스크립트는 자바와 연관은 없으며, 이름만 자바스크립트로 불려졌다.

 

당시, 자바스크립가 처음 생기고 이 언어를 가지고 표준화를 진행하려고 했다.

이때, 표준화를 비영리 표준기구인 ECMA에서 진행하였고, ECMAScript라는 이름으로 표준화가 진행된다.

 

Javascript와 ECMAScript가 같다고 볼 수 있을까?

같지 않다. JavaScript는 ECMAScript와 환경에 따른 알파가 합쳐진 개념이다.

흔히 말하는 JavaScript는 스크립트 언어인 ECMAScript + client side web API(예, BOM, DOM ... )

                                                                                 + HOST API (node js 환경일 때) 가 합쳐진 것이라고 할 수 있다.

 

ECMAScript의 등장

ECMAScript의 버전은 ECMAScript 2015와 같은 방식으로 표기한다. 여기에 해당되는 배포판은 ES6로 표기된다.

ES는 1년에 한 번씩 배포판이 업데이트되는데 되는데 1년이 지나면 뒤에 있는 숫자가 올라가게 된다.

 

ECMAScript2015 - ES6

ECMAScript2016 - ES7

...

ECMAScript2021 - ES12

 

지금까지 나온 ES의 가장 최신 버전은 현재 기준으로 ES12이다.

 

그 중 왜 ES6이 가장 대표적으로 널리 알려진 버전일까?

ES6이 가장 대표적인 버전으로 알려진 이유는 ES5에서 ES6 버전으로 넘어갈 때 대격변이 일어났기 때문이다.

프론트의 가장 큰 문제는 브라우저마다 돌아가는 방식이 다르다. 따라서 모든 브라우저에서 잘 돌아갈 수 있는 버전이 바로 ES6버전이다.

 

Jscript의 등장

ECMAScript와 반대로 MS에서는 JScript라는 언어를 만든다.

그리고 이를 표준 아닌 표준처럼 사용하기 시작했다.

이로인해 fragmentation(파편화) 현상이 나타나기 시작했다.

똑같은 코드가 여기에선 동작되고, 어디에선 잘 동작하지 않은 현상이 일어나기 시작했다.

JQeury의 등장

ES6가 나오기 전의 자바스크립트에 대한 분위기는 자바스크립트는 언어 자체가 모호하고, 명확하지 않은 언어로 평가받았다.

따라서 구현이 어려워 지기 시작했고, 이를 해결하기 위해 JQuery 라이브러리가 등장하기 시작했다.

 

JQuery는 프레임워크가 아닌 라이브러리이므로 유지보수 측면에서 문제가 발생하기 시작했다.

JQuery의 등장으로 ECMAScript(JavaScript)가 사람들에게 점점 잊혀지기 시작했다.

HTML 5의 등장

History of HTML, CSS

HTML과 CSS는 W3C가 표준을 관장했다.

표준을 잘 만들고 잘 써오다가 1999년 12월 W3C가 HTML4.0.1버전을 마지막으로 더이상 업데이트는 없다고 발표를 한다.

 

바로 HTML의 단점이 나타났기 때문이다.

1. 조금 틀려도 브라우저에 렌더링이 된다. (정형성에 문제) -> 유지보수가 어려워지게 된다.

2. 정해져 있는 태그를 사용하기 때문에 언어의 확장성이 없다. (확장성에 문제)

 

W3C도 HTML에 문제가 있는 것을 알고 있는 상태였다.

이를 해결하기 위핸 HMTL에 XML를 섞어서 새로운 표준을 만들어낸다 -> XHMTL

 

1999년 HTML4.0.1 버전으로 마지막으로 더이상 업데이트는 없다고 선언한 후,

2000년도 HTML에 XML이 합쳐진 새로운 표준인 XHTML1.0 나오면서 XHTML이 나오기 시작한다.

 

History of HTML 5

WHATWG에서 XML을 제외하고 HTML을 독자적으로 발전시킬 수 있는 연구를 시작한다. 여기서 탄생한 것이 HTML5다.

 

HTML5의 인기가 높아지자 W3C도 XHTML이 아닌 HTML5을 표준으로 지정한다. 따라서 HTML5가 표준화가 된다.

기존의 HTML은 화면에 정보를 보여주는 목적이었다면, HTML5가 지향하는 바는 브라우저 내에서 동작하는 애플리케이션을만드는 것이었다. 

Web Application

브라우저에 내에서 돌아가는 프로그램이다.

JavaScript 내에 있는 WEB API가 들어오면서 Web Application이 실행될 수 있는 것이다.

HTML5

HTML5 = HTML + CSS3 + JavaScript web API

                  2%         5%                 70%

 

이로 인해 JavaScript의 위상이 점점 올라가게 된다.

HTML5 둥장으로 ES5가 2009년에 등장하게 된다. 다시 열심히 표준화가 진행이 되버린다.

 

번외 ) TypeScript

 

TypeScript는 microsoft에서 2013년에 만든 언어이다.

TypeScript를 transfile하면(컴파일 하면X) ECMA (JS)코드가 나온다. => 이러한 작업을 메타 프로그래밍(Meta Programming)라고 한다.

(컴파일은 머신 코드로 바꿔주는 과정이다.)

 

메타 프로그래밍을 하는 이유 - Javascript에 없는 기능을 추가할 수 있다.

JavaScript는 클래스 기반 객체지향 프로그램이 아닌데 TypeScript를 통해 구현해낼 수 있다.

ES6와 ES7을 감싸고 있는 것이 TypeScript라고 볼 수 있다.

TypeScript는 ECMAScript의 super set이다.

Javascript의 위상이 높아지다

NodeJS의 등장으로 JavaScript로 실제 독립적인 애플리케이션을 만듨 수 있게 되었다.

JavaScript의 코어에 해당되는 ECMAScript가 점점 바빠지기 시작한다.

이후 ECMA2015인 ES6버전이 나오게 된다.

Javascript 기본 용어

---

- Package Manager

대표적인 패키지 매니저 : npm

모듈간의 버전을 맞춰주면서 제대로 동작할 수 있게 해주는 역할을 한다.

- Transpiler

대표적인 트랜스파일러 : TypeScript

- 자동화 도구

빌드, 테스트, 배포하는 과정을 자동화 하는 도구 : gulp

- 모듈화(module화)

대표적인 모듈화 : webpack (내가 작성한 리소스들을 하나의 파일로 묶어서 모듈화)

- 프레임워크(framework)

대표적인 프레임워크 : Angular, Reacts, Vue.js (React, Vue 추천)

Javascript Engine

JavaScript를 실행하려면 Javascript Engine이 있어야한다.

해당 Engine은 브라우저 안에 내장되어 있다. 각각의 브라우저가 사용하는 Engine은 다르다.

 

Chrome - V8 Engine

Edge - chakra Engine

Safari - Webkit Engine

firefox - Spider Monkey Engine