JS는 왜 이래요?

JS 진입장벽이 낮고 비전공자들이 처음 입문하는 경우가 많은 언어이다. 그렇지만 깊게 파면 어려운데다 다른 언어에 비해 덕지덕지 뭘 붙인 것 같은 느낌을 준다. 버전별 차이도 심하다. 그런데 이 덕지덕지도 다들 이유를 가지고 있고, JS의 역사를 이해하면 좀 받아들일 수 있을 것이다.

아래에 역사를 이해하기 위한 기반 지식을 써놨다. 나도 정리를 좀 하고 싶어져서. 근데 스크립트 언어가 뭔지, 네트워크가 뭔지 안다면 스킵해도 된다.

글이 드림코딩 자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)(https://www.youtube.com/watch?v=wcsVjmHrUQg)를 많이 참고했다.

JS 공식 로고도 없네... 어쩔 수 없이 화난 햄스터를 드리겠습니다.

스크립트 언어

JS는 처음에 스크립트 언어였다. 내용에서 계속 **스크립트 언어**라는 말이 나오는데, 미리 설명하고 들어가겠다.

스크립트 언어란 **기존에 존재하는 어떤 다른 프로그램들을 제어**하기 위해 만들어진 것이다. 약간 애매하긴 한데, 하여튼 다른 컴파일러로 번역되는 언어와는 좀 다르다. 응용 소프트웨어에서 스크립트 언어에 맞는 API를 제공, 응용 소프트웨어와 상호작용하면서 돌아가게 되고, 주로 인터프리터 방식이다. 이 개념을 적용하면 python도 스크립트 언어이다.
예를 들어 Adobe photoshop같은 프로그램에 파일 메뉴를 보면 자동화나 스크립트라는 메뉴가 있을 것이다(사람들이 잘 사용 안했는지 포토샵 버전마다 좀 차이가 있다). 여기서 Adobe용 Script파일을 넣어서 포토샵이 자동으로 돌아가게 제어할 수 있다. 완전 Script이다.

처음에 **Javascript**는 브라우저 환경에서 돌아가며 웹페이지를 제어하기 위해 만든 언어였다. 이름도 JavaScript. 지금은 Node.js(JS 서버 구축해서 돌릴 수 있게 해주는 런타임 환경)가 등장하고, 다양하게 보완되고 고도화되면서, 단순히 스크립트 언어라고 부르기 힘들어졌다.

그렇지만 JavaScript가 C나 C++같은 언어와 같은 등위라고 생각하면, 굉장한 오해가 생긴다.

네트워크

네트워크란 컴퓨터들이 통신망을 통해 서로 그물처럼 연결된 체계이다. 나는 이론적인 거 하나도 모르고 냅다 클론코딩해서 웹 개발한게 시작이었기 때문에, 이 개념도 나중에야 이해했다. 그것 때문에 좀 고생했으므로, 혹시 초보 웹개발자 누가 글을 읽는다면 미리 알길 바란다.

계산기에 메모리 장치가 달린 컴퓨터가 있고, 남의 컴퓨터와 내 컴퓨터를 연결해서 데이터, 전기신호를 주고 받을 수가 있다. 그래서 나는 모르는 멋진 기술들을 이용해서 컴퓨터들을 모두 연결할 수 있게 한 것이다. 그물처럼. 해저 케이블로 나라마다 연결하고, 나라에서 KT, SKT 같은 회사들에 위탁하여 이런 기반 시설을 만들게 하고, 랜선을 내 컴퓨터에 연결하고 공유기를 연결해서.

내가 네이버에 들어가면, 네이버의 서버컴퓨터와 내 컴퓨터가 연결되어 정보를 주고 받고 연결이 끊긴다. 당신이 들어가는 모든 사이트는 다 다른 남의 컴퓨터들에서 받아온 정보이다. (서버 컴퓨터도 그냥 성능이 좋은 컴퓨터이고 내 컴퓨터랑 근본적으로 다르진 않다. 그냥 용도를 얘기하는 거다. 내 컴퓨터에서 서버 돌리면 그게 서버 컴퓨터.)

**내 컴퓨터와 다른 컴퓨터가 데이터를 주고 받기 위한 프로토콜(규칙)이 있고, 규칙에 맞춰서 정보를 주고 받고, 브라우저가 데이터를 가공해서 보여주는 멋진 과정**들이 있다. 정보를 받고 보내고 DB에 저장하는 것이 백엔드, 브라우저에서 어떻게 가공하고 보이게 할지 처리하는 것이 프론트엔드이다. 그러니까 이 길고 긴 과정에서 오직 브라우저를 위한, 처음에는 굉장히 한정되게 만들어진 것이 JavaScript인 것이다.

JS의 역사

동적인 웹을 위한 언어

웹 브라우저를 제어하는 스크립트 언어

더글라스 엥겔바트가 개발한 NLS은 인터넷의 탄생에 기초가 됐고, 팀 버너스 리는 인터넷과 하이퍼텍스트를 결합해 월드 와이드 웹이라는 새로운 정보검색 방식을 개발해냈다. 팀 버너스 리라는 이름 웹 관련 수업 들을 때마다 5초씩 나와서 어딘가 익숙하다...

1993년 미국 일리노이 대학교 NCSA 연구소의 대학생이었던 마크 앤드리슨과 에릭 비나가 넷스케이프라는 회사를 세우고 MOZAIC 웹 브라우저라는 것을 만든다. 기존에 웹 브라우저가 없었던 건 아닌데, 텍스트 위주였던 것을 이미지를 표시할 수 있게 한 것이다.

여기서 개발 책임자 마크 앤드리슨이 동료들을 데리고 나와서(그래서 MOZAIC는 개발이 중지된다.) 좀 더 발전된 Netscape Navigator를 만든다. 당시에는 html, css로 정적인 웹페이지만 가능했는데, 넷스케이크 버전 2에 **동적인 웹페이지가 구현 가능하도록 스크립팅 언어를 넣어서 출시**한다. 그렇다. JavaScript이다.

Scheme Script를 기반으로 LiveScript(10일만에 만들라고 했다고 한다...)라는 것을 만들었고, 당시 Java가 굉장히 잘 나갔기 때문에, 이름을 슬쩍 JavaScript로 바꾼다. 내부적으로는 Mocha라고 불렸다. Mocha가 더 귀엽다.

너무 많은 버전과 표준안

브라우저 호환성 문제와 ECMAScript

그런데 이 웹 브라우저가 굉장히 잘나가기 시작했다. 이를 본 마이크로소프트사에서 1995년 Internet Explorer, 내가 초등학생 때 잘나갔지만 지금은 지원 종료된 웹 브라우저를 만들어 출시한다. 기존 MOZAIC 웹 브라우저를 인수한 스파이글래스라는 회사에 저작권료를 지급하여 MOZAIC의 소스코드를 활용하고, 리버스 엔지니어링(만들어진 프로그램 바이너리 코드 분석해서 소스 코드 복원하는... 배껴버리는 거)해서 JScript라고 이름 붙인 Script 언어까지 만들어서.

이것이 지금도 웹개발자들을 괴롭게 하는, 브라우저 호환성 문제의 시작이었다. 그러니까 웹 사이트들이 Internet Explorer에 맞지만 Netscape Navigator에 안 맞거나, Netscape Navigator에 맞지만 Internet Explorer에 안 맞는 문제들 말이다. 결국 Netscape사는 ECMA Interational사를 찾아가서 표준안을 만들어달라고 부탁한다. 그래서 **ECMAScript라는 브라우저용 Script 표준**을 제공한다. 문법과 convention, error handling 관련한 내용들이다.

ECMAScript는 다양한 제안을 받고 적용하면서 class가 추가되는 등 좀 높은 기준을 요구하게 되었는데, 마이크로소프트사는 스크립트 언어에 그런 복잡한 기능이 추가되는 것이 사용 목적에 적합하지 않다고 생각했다. 마이크로소프트 사의 IE가 ECMA 표준을 따르지 않게 되었다. 당시 Netscape Navigator를 밀어내고 95%의 점유율을 차지한 IE가 지키지 않는 표준안은 거의 무용해보여서, 새로 만들려는 움직임이 약간 시들해진다.
이런 상황에서 Netscape사에서 파생된(Netscape가 IE에 밀려서 인수당하고 Netscape의 개발자들이 떨어져 나와서 만든) Mozilla사의 FireFox가 나온다. Mozilla는 ECMA사에 Tamarin이라는 새로운 엔진과 ActionScript3라는 새로운 스크립트 언어를 제안하게 된다. 그러나 ActionScript는 다른 스크립트들과도 너무 달랐고, 3사가 표준 관련하여 공방을 벌인다.

많은 브라우저와 신기술의 등장

이렇게 표준이 세워지지 않을 동안, 더 많은 브라우저들이 등장했고, 웹개발 시장은 점점 커지고 많은 개발자들이 들어왔다. 그러면서 개발자들 사이의 커뮤니티가 등장하고, 더 많은 웹을 위한 신기술이 등장했다. 대표적인 것은 비동기처리가 가능하게 하는 AJAX. 그 중 Jquery, dojo, mootools 등은 이 들이 제공하는 api를 따르면 어떤 브라우저에서 돌아가는지 신경쓰지 않을 수 있었다.
확실한 표준안이 없는 채로 신기술들, JavaScript와 유사한 Script 언어를 돌리는 다양한 엔진들이 나타나면서, JS는 너무 다양한 버전과 문법을 가지게 되고 말았다...

그런데 그 때 크롬이 나타났다

그런데, 지금도 내가 글을 쓰고 있는 velog에 접속시켜준 크롬 브라우저가 2008년에 등장한다. google사에서 만든 이 크롬은 **JIT라는 강력한 엔진을 포함하여 JavaScript의 실행 속도를 획기적으로 높혔다.** 현재도 점유율의 절반 정도를 먹고 있다. JavaScript convention도 구글에서 제공하는게 제일 잘 나간다.
나머지 브라우저 회사들은 큰 자극을 받고, 드디어 모여서 표준안을 새로 낸다. 모든 회사들이 이 표준안을 따르면서 JavaScript는 드디어 확정이 난다. **엔진은 다 다르지만, 모두 ECMAScript 표준안을 따른다.** 그러면서 Jquery, dojo, mootools 등은 필요 없어져 버렸고.

+그리고 JavaScript를 다른 환경에서도 돌리려는 시도들도 일어났다.
Chrome에서 사용하는 V8엔진을 node.js와 electron에서도 사용한다.

ES5, ES6

그렇게 모두가 따르기 시작해서 드디어 ECMAScript5는 표준안다운 표준안이 된다. ECMAScript를 줄여서 주로 ES5, ES6처럼 부른다. ES5, ES6 정도가 이전 버전과 큰 차이를 지니며 그 뒤는 큰 차이가 없다.

ESNEXT

그래서 개발자들은 이제 ECMA사에서 내놓을 새로운 표준에 큰 관심을 가지게 되었고, 제일 최신 버전의 표준안을 ESNEXT라고 부른다.

즉 어딘가 ESNEXT라는 코드로 쓰여있으면, 여태 나온 모든 표준안에서 허용되는 모든 것들을 다 허용해서 작성한다는 것이다.

여전히 여러 버전이 혼용된다

Babel

근데 옛날 브라우저를 사용하고 있는 공기관은? 최신버전으로 업데이트하지 않는 사람들한테는? 그냥 우리 페이지 들어오지 말라고 할까? 그럴 수도 있겠지만, 아량을 베풀어서 우리 페이지를 잘 쓸 수 있게 하자.
프론트엔드라면 들어봤을 Babel은 배포할 때 ES 최신 표준에 맞춰 쓴 코드를 다른 JS 버전을 요구하는 엔진에서도 돌아갈 수 있게 코드를 컴파일해준다.

common.js

common.js는 Mozilla사의 엔지니어였던 Kevin Dangoor가 2009년에 당시에 JavaScript가 웹 브라우저 밖에서 돌아갈때 모듈화를 어떻게 할건지에 대한 내용이 없어서 만든 것이다. 그래서 주로 모듈 import export 형식 관련된 내용이다. 문제는 ES에서도 이것과 겹치는 내용을 제공한다.
node.js나 TypeScript는 common.js의 모듈 사용 문법과 ES5,6의 모듈 사용 문법을 모두 지원한다. TypeScript의 tsconfig 파일에는 컴파일을 어떻게 할지 쓰는 옵션도 있다.

{
   "compilerOptions": {
       "target": "es5",
       "module": "commonjs",
   }
}

글을 읽었다면, 이제 이게 뭘 의미하는지 알 것이다.

JavaScript는 뭐랄까... 웹이 너무 잘 나가버려서 단순 스크립트 언어라고 부르기 어려워진... 많은 파생버전과 엄청난 보완을 거친... 어떤 문법 흐름인 것이다...
다른 언어 역사는 공부한 적이 없어서 걔네도 이런지 모르겠지만요...

참고자료

JS 역사 전체 흐름
https://www.youtube.com/watch?v=wcsVjmHrUQg

JS 역사 일부 참고
https://it.donga.com/20721/

모자이크 웹 브라우저 관련
https://ko.wikipedia.org/wiki/%EB%AA%A8%EC%9E%90%EC%9D%B4%ED%81%AC_(%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80)

웹브라우저의 역사 참고
https://www.heecheolman.dev/post/%EC%9B%B9-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EC%97%AD%EC%82%AC/

ESnext가 뭔지
https://stackoverflow.com/questions/56521178/what-is-esnext

common.js가 왜 만들어졌는지 관련
https://medium.com/@lisa.berteau.smith/commonjs-and-the-history-of-javascript-modularity-63d8518f103e#:~:text=CommonJS%20was%20started%20by%20Mozilla,is%20executed%20in%20its%20namespace.

넷스케이프 네비게이터 관련
https://ko.wikipedia.org/wiki/%EB%84%B7%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%EB%82%B4%EB%B9%84%EA%B2%8C%EC%9D%B4%ED%84%B0#:~:text=%EB%84%B7%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84%20%EB%82%B4%EB%B9%84%EA%B2%8C%EC%9D%B4%ED%84%B0(Netscape%20Navigator%2C%20%EB%98%90%EB%8A%94,Jim%20Clark)%EC%9D%B4%20%ED%88%AC%EC%9E%90%ED%96%88%EB%8B%A4.