JS란?

시작하기 앞서 JS(JavaScript)의 탄생배경이나 역사를 완벽하게 공부하기보단 MDN에 작성된 글을 읽고 본인이 모르는 부분들을 찾아 추가로 이해한 내용을 정리하고 축약해서 쓰는 것이니 사실여부를 꼭 확인하길 바란다. (틀린 게 있으면 공유 부탁드려요.)

 

JS가 탄생된 목적을 이해하기 위해서는 WWW(World Wide Web)가 선행지식으로 필요하다.

WWW는 인터넷이라는 매개체를 기반으로 물리적 공간에 제약받지 않고 전 세계에서 공용으로 사용할 수 있는 공간이다. 이러한 환경이 생김으로써 인류는 정보를 보다 손쉽게 얻을 수 있게 됐다. 정보는 HyperText라는 문서를 검색이라는 동작으로 얻을 수 있고 WWW에서 검색에 필요한 요소는 URI와 URL 등이 있다. 전 세계에서 공용으로 사용할 수 있기 때문에 규약이 필요했고 HTTP(HyperText Transfer Protocol)이라는 규약을 표준으로 사용하기로 약속했다. 앞서 말한 HyperText가 중요한데 간단하게 설명하면 문서에 링크(Link)라는 요소를 통해 어떠한 행위(마우스 클릭이나 키보드 엔터키 등등...)가 발생하면 다른 문서로 자유롭게 이동하여 정보를 습득할 수 있는 문서를 뜻한다. 1990년 말에 HyperText를 문서화할 때도 표준이 필요하다 생각한 팀 버너스리는 SGML(Standard Generalized Markup Language)을 기반으로 확장된 HTML(HyperText Markup Language)의 초안을 명시했다. (HTML 표준을 관리하는 기관이 많이 바뀌었던 것 같다.)

일반 사용자가 URL를 통해 HyperText를 HTTP으로 받기 위해선 여러 컴퓨팅 자원이 필요했고 이런 요구 조건을 해결해 주는 웹 브라우저(web browser)들이 생겨나기 시작했다. 초기에 있던 WebBrowser들은 WebServer와 일반 사용자들이 쉽게 이용할 수 있도록 GUI(Graphical User Interface)의 차별성만 있었다.

 

JS는 1995년에 정적인 HTML(HyperText Markup Language) 웹 페이지에 동적 기능을 추가하기 위해 브레던 아이크에 의해 스크립트 언어로 개발됐다. 

 

JS의 발전과 표준

JS는 브라우저 전쟁(browser wars)을 통해 발전과 표준을 정의했다 해도 과언이 아닌데 전쟁은 크게 1, 2, 3차로 나눠진다.

• 1차
  브라우저 전쟁의 시작은 넷스케이프에서 JavaScript를 개발해 Navigator라는 브라우저에서 사용했고 동시대에 웹 브라우저를 제공하던 MS(MicroSoft)의 IE(Internet Explorer)에서는 J Script라는 것을 개발하여 전생이 시작됐다.
  기술력은 넷스케이프의 JavaScript가 좋았지만 MS의 J Script는 Windows에 IE를 기본으로 탑재시키는 마케팅을 통해 MS의 IE가 승리했다.
• 2차
  1차 전쟁의 승자인 MS의 IE는 압도적인 점유율은 한동안 유지됐고 패배한 넷스케이프는 결국 망해 남아있던 개발자들이 IE에 대항하기 위해 Mozilla라는 재단을 설립하게 됐다. 2004년 Mozilla의 Firefox를 발표했고 IE와 경쟁하던 중 2008년 Google의 Chrome이 발표됐다. Chrome은 V8이라는 엔진을 개발해 IE와 Firefox와 차별화된 기능과 성능을 통해 빠르게 점유율을 확보하던 중 2013년에 IE를 제치고 점유율 1위를 차지하여 웃기게도 Google의 Chrome이 승리했다.
• 3차
  IETab에 대한 내용이거나 IA 검색 관련 내용인 것 같은데 JS랑 직접적인 내용이 아니라 생각이 들어 pass

1차 브라우저 전쟁의 내용처럼 브라우저마다 각자의 Script 개발했기 때문에 개발자 입장에선 명확한 표준 없이 각 브라우저들이 지원하는 Script로 개발해야 하기 때문에 프로그램(코드)을 개발하기 어려워졌다. 이런 파편화된 환경을 개선하기 위해 1996년 넷스케이프가 컴퓨터 시스템 관련해 많은 표준을 책임지고 있던 Ecma(European Computer Manufacturers Association)에 JavaScript 기반의 Script Language 표준화를 요청했다. (지금은 Ecma International이라 해야 한다.)

Ecma는 요청을 받아 들어 1997년에 ECMA-262라는 표준화된 EcmaScript 1이라는 명세가 발표됐고 TC39 그룹이 관리하게 된다. 개발자들이 ES5, ES6, ES7, ES8 이렇게 불리는 것들이 EcmaScript 5, 2015, 2016, 2017 명세를 줄여 말하는 것이다.

• ES1(1997)
• ES2(1998)
• ES3(1999)
• ES4(2000~2008) 엄청 많은 내용이 있지만 결국 폐기
• ES5(2009)
• ES6(2015)
• ES7(2016)
• ES8(2017)

위에 나열한 것들 말고 2022년까지 ES13까지 나온 것 같다.

EcmaScript는 웹 브라우저들이 지원하는 JS의 표준일 뿐이지 모든 웹 브라우저들이 표준의 모든 기능들을 지원하는 것은 아니다. 그중 Chrome은 표준을 제일 잘 따르고 적용하고 있는 것 같다.

 

1999년 JS가 큰 발전을 하게 되는데 XMLHttpRequest를 사용해 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 API가 나왔다.  2004~5년에 Google에서 애플리케이션을 개발할 때 사용하는 기술을 소개하는 기사에서 AJAX(Asynchronous Javascript And Xml)라는 용어를 정의했다.

 

2006년 DOM(Document Object Model)을 자유자재로 쉬고 편리하게 제어 및 관리할 수 있도록 도와주는 JQuery Library가 나오기도 했다.

 

2008년 Google에서 ES3 표준을 C++로 구현한 JS Runtime engine인 V8이 오픈소스로 공개됐다.

 

2009년 JS로 ServerSide 환경을 빌드 및 실행시켜 주는 V8을 기반으로 한 nodejs가 공개된다.

 

선행지식으로 JS는 원래 module이라는 개념이 없는 script language였다.

 

2009년 웹 브라우저 환경에서만 사용되던 JS를 다른 환경에서도 모듈 생태계의 표준을 설립하기 위해 Mozilla의 엔지니어가 CommonJS라는 사양을 공개한다. CommonJS는 module이라는 object(객체)를 통해 exports property를 이용해 module을 외부로 공개하고 공개한 module을 require function(함수)을 사용해 import 하여 사용한다. 단점은 import 할 때 Blocking 방식을 사용하기 때문에 server side는 괜찮을 수 있어도 client side에서는 import 한 내용이 많으면 많을수록 파일을 전부 다운로드할 때까지 기다려야 하므로 안 좋은 UX(User eXperience)을 제공할 수 있다. nodejs는 CommonJS를 따름.

CommonJS 내부에서 비동기적으로 모듈 관리에 대한 논의 중 합의하지 못하고 독립한 그룹들이 AMD(Asynchronous Module Definition)라는 표준을 만든다. AMD 표준을 적용해 만든 RequireJS Library가 있다.

 

2010년 애플리케이션을 개발하기 위해 필요했던 여러 모듈들과의 의존성을 편리하게 관리할 수 있게 도와주는 npm(Node Package Manager)이 발표된다. 

 

2015년 ES6가 JS의 모듈화 관련 표준이 발표되며 CommonJS와 AMD(RequireJS)랑 다른 방식의 모듈화가 생겼다. 하지만 모든 브라우저에서 표준에 맞춰 개발하여 지원하지 않아 생기는 문제점(Cross-browser compatibility)이 나타났다. ES6의 모듈 표준에서는 import와 export 예약어를 사용하며 브라우저에선(HTML) <script> tag의 type attribute의 값을 module으로 사용하면 ES6 방식을 사용할 수 있다.

JS 모듈과 관련된 Cross-browser compatibility을 해결하는 방법으로 webpack과 babeljs를 사용해 애플리케이션을 bundling 해서 해결하기도 한다. webpack은 bundling을 하기 위한 library이며, babeljs(transpiler)는 ES5보다 후에 발표된 표준들을 ES5 표준에 맞게 transpiling을 위해 사용한다.

 

 

JS를 이해하기 위해선 더 많은 정보가 필요하지만 이 정도면 JS 환경에 대해 이해하는데 도움 될 것 같다.

 

references

1. https://erokuma.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%97%AD%EC%82%AC%EC%99%80-ECMAScript-%EB%8C%80%ED%95%B4
2. https://fathory.tistory.com/161
3. https://velog.io/@dongjun187/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8JavaScript%EC%9D%98-%ED%83%84%EC%83%9D-%EC%9D%B4%EC%9C%A0%EC%99%80-%EC%97%AD%EC%82%AC
4. https://ko.wikipedia.org/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EB%8C%80%EB%AC%B8
5. https://developer.mozilla.org/ko/docs/Web/JavaScript