Vanilla JS를 공부하면서 JS의 근본에 대해 궁금증이 생겼다.
이를 시작으로, 앞으로 JS의 기본이 되는 여러 개념과 정보들을 하나씩 정리해보려 한다.
1. 1993년 MOSAIC 웹 브라우저
- MOSAIC은 UI가 적용된 최초의 웹 브라우저로 기본적인 HTML의 형식을 갖추고 있다.
- MOSAIC 브라우저를 만든 Marc Andreessen은 후에 Netscape의 창업주가 되어 간단한 HTML 형식과 CSS를 갖춘 Netscape Navigator라는 브라우저를 출시하게 된다.
- 당시 80%의 시작점유율을 갖고 있던 Netscape Navigator는 정적인 웹사이트였고 이를 동적으로 구현하여 사용자에게 dynamic한 경험을 선사하기위해 많은 고민 끝에 scripting언어를 추가하기로 한다.
- 새로운 scripting언어를 개발하기 위해서 당시 잘나가던 Java를 사용하는 것을 고려했으나 너무 무거웠고, Scheme이라는 scripting언어를 개발한 Brendan Eich를 스카웃하며 Netscape는 Scheme을 기반한 Java문법을 갖는 새로운 scripting언어를 개발하게 된다. (Netscape사 내부에서는 Mocha로, 이 후 LiveScript라는 언어로 출시한다)
2. 1994년 JavaScript의 등장
- 이렇게 개발된 LiveScript는 Netscape Navigator에 적용되어 LiveScript를 이해하고 실행할 수 있는 엔진, LiveScript Interpreter가 장착되어 출시된다.
- LiveScript를 마케팅하기 위해 당시 잘나가던 Java의 명성을 이용해 LiveScript라는 이름을 JavaScript로 바꾸게되면서 현재의 JavaScript라는 이름을 갖게 된다.
3. 1995년 Internet Explorer의 등장
- Netscape사의 브라우저가 잘 나가게 되면서 MS사에서도 브라우저 사업에 참여하게 된다.
- MS사는 Reverse Engineering을 통해 JavaScript를 분석하여 JScript라는 언어를 개발하였고 이를 장착한 Internet Explorer를 출시하게 된다.
4. 1996년 Netscape와 ECMA의 JavaScript 표준화
- MS와 Netscape의 브라우저마다 고유의 scripting 언어를 사용함으로 인해 표준화의 필요를 느낀 Netscape는 ECMA International(정보통신 표준을 제공하는 비영리 표준화 기구)을 찾아가 JavaScript를 기반으로 표준화를 진행한다. 이것이 현재 사용되는 JavaScript이며, ES(ECMAScript)라는 이름이 붙여지게 된 이유다.
5. 2000년 IE의 시장점유율 증가
- IE의 시장점유율이 90%를 넘어가면서 ECMA의 표준화에 더이상 참가하지 않고 다른 길을 걷게된다. 이로인해, 2000년 ES4 이후로 표준화 진행이 주춤하게된다.
6. 2004년 Firefox의 등장
- Mozilla사의 Firefox가 새로운 브라우저로 시장에 등장하면서, Mozilla사가 개발한 ActionScript라는 언어와 이를 사용할 수 있는 Tamarin 엔진으로 ECMA와 표준화를 진행하려고 하였다. 그러나 기존에 진행되던 ES표준과 너무 다른 형태의 언어였기 때문에 쉽게 표준화가 진행되지 않았다.
- 이렇게 IE, Navigator, Firefox 3사의 치열한 표준화 공방전이 시작되면서 그로인한 피해는 개발자들에게 돌아갔다. 브라우저마다 고유의 script언어를 사용함으로써, 개발한 웹사이트를 배포하기위해 브라우저마다 다른 Scripting 언어를 사용해 개발해야 했고 이로인해 개발자들은 Scripting 언어에 대한 표준화를 필요로 했다.
7. 2004년 AJAX의 등장
- Jesse James Garrett이 개발한 AJAX(Asynchronous JavaScript and XML)가 출시된다. AJAX는 JavaScript와 XML을 이용해 웹에서 비동기적으로 데이터를 서버에서 받아오고 처리할 수 있는 기술이다.
- JavaScript를 이용한 신기술이 등장함에도 불구하고, ECMAScript 표준화는 진행되지 않았다.
8. 다양한 브라우저의 등장
- 시장에 계속적으로 다양한 브라우저가 등장함에 따라, 웹시장은 빠르게 확장 및 성장하게 되었다.
- 시장이 커질수록 수요가 증가하므로, 다양한 개발자들이 웹개발 분야에 참여하게 되었고 특정 브라우저를 전문으로 하는 개발자들이 생기기 시작하였다.
- 특정 브라우저를 전문으로 하는 개발자들이 생기면서 각 브라우저 커뮤니티가 형성되고 각 브라우저마다 다양한 라이브러리가 개발된다. ex) jQuery, dojo, MooTools
- 이런 라이브러리가 개발된 이유는 개발자들이 다른 브라우저와의 호환성을 고려하지 않아도 되기 때문이다. 이 흐름으로 인해 API 개발이 가속화 되었다.
* 좋은 API란? - API의 구현사항이 변경되더라도 이미 작성된 사용자의 코드에는 변화가 없는 API
9. 2008년 Google의 Chrome 등장
- Chrome 브라우저는 JIT(Just In Time Compilation)라는 엔진을 탑재하고 있다. 이는 JavaScript를 타 브라우저에 비해 매우 빠른 속도로 실행하는 엔진이다.
- 압도적인 성능을 가진 Chrome의 등장으로 다른 브라우저 회사들은 성능개선이라는 비상이 걸리게 되었으며, 표준화에 대한 경쟁을 멈추고 Google, Mozilla, Netscape, MicroSoft는 웹 시장에서 서로 win-win 할 수 있는 전략에 대한 생산적인 대화를 시작하게 되었다.
- 이로써 ECMAScript의 표준화가 재개된다.
10. 2009년 ES5, 2015년 ES6의 등장
- ES5와 ES6의 표준화로 현재 JavaScript의 모습을 갖추게 되었다.
- 지금도 계속해서 표준화가 진행되고 있으며 JavaScript의 표준화로 인해 jQuery, dojo, MooTools 등의 라이브러리를 사용할 필요가 없어졌다.
- 이제는 각 브라우저마다 ES 표준화에 최적화된 엔진을 보유하게 되었다.
ex) V8(Chrome), SpiderMonkey(Firefox), JSCore(Safari), Chakra(MS Edge), Carakan(Opera), Tamarin(Adobe Flash) - Chrome에서 사용하는 V8 엔진은 nodeJS와 ELECTRON에서도 사용하고 있다.
11. 최신 ES를 사용하는 방법 - TypeScript & BABEL
- 모든 브라우저가 최신 ES 표준을 사용하고 있는 것은 아니다. 그러므로 최신 ES를 사용하고 싶은 개발자들은 TypeScript를 이용하여 개발을 한 뒤에 사용자에게 배포할 때 BABEL이라는 JavaScript transcompiler를 이용하여 각 브라우저의 엔진이 갖고있는 ES버전으로 변환하여 코드가 번역될 수 있게 한다.
12. 최신 동향 - SPA(Single Page Application)
- 더 이상 웹사이트를 만드는 것은 충분하지 않게 되었다. SPA는 하나의 페이지에서 필요한 부분만 부분적으로 업데이트하는 기술을 말한다. 이를 구현하기 위해 React, Angular, Vue 등의 라이브러리 또는 프레임워크를 이용하여 SPA를 더욱 쉽게 개발할 수 있다.
- JavaScript를 이용한 Front-end의 동적인 구현뿐만 아니라 Back-end(NodeJS), mobile(React, Cordova), desktop(ELECTRON) 어플리케이션을 개발할 수 있다.
- 모든 브라우저에서 동작할 수 있는 유일한 언어는 JavaScript 하나 뿐이였는데, 이제는 WA(Web Assembly)의 등장으로 C, C++, Java, Python, GO 등 다양한 언어를 사용하여 웹 어플리케이션을 만드는 것이 가능해졌다.
[정보 출처]
www.youtube.com/watch?v=wcsVjmHrUQg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=1
'Front-end > Vanilla JS' 카테고리의 다른 글
JS 근본 공부 - 데이터 타입 (0) | 2020.10.24 |
---|---|
JS 근본공부 - JS의 동작원리 (0) | 2020.10.23 |
Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(2) (0) | 2020.10.16 |
Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(1) (0) | 2020.10.12 |
Vanilla JS - 지역 저장소(Local Storage) (0) | 2020.10.10 |
댓글