아래 내용은 드림코딩: 자바스크립트의 역사와 현재 그리고 미래 영상을 참고한 글입니다. 유익한 내용 전해주신 엘리 님께 감사를 표하며, 영상을 통해 학습한 내용을 아래에 정리해 보았습니다.
자바스크립트의 역사를 왜 알아야 합니까
새로운 언어를 배울 때 바로 문법 공부에 전념하는 것보다 그 언어의 탄생 배경에 대해 이해하는 것이 중요하다고 한다.
과거를 알아야 현재가 보이고, 미래를 예측할 수 있다고 하지 않나. 자바스크립트가 어떻게 탄생했으며 어떤 문제를 해결하기 위해 만들어졌고, 이 언어를 다룰줄 알면 어떤 분야에 더 활용할 수 있는지 알 수 있기 때문이 아닐까 싶다. 문법 공부보다는 상대적으로 우선순위가 낮을 수 있지만, 알아두면 재미있는 자바스크립트의 역사에 대해 정리해 보자.
태초에 모자이크라는 게 있었단다
1993년, 집집마다 컴퓨터가 없었던 그 시절에는 컴퓨터를 잘 모르는 사람들도 쉽게 쓸 수 있는 UI 요소가 더해진 MOSAIC 웹브라우저가 시장에 나오게 된다.
@researchgate
이 MOSAIC 웹브라우저의 개발 팀을 이끌던 Marc Andreessen은 대학 졸업 후, Netscape라는 회사를 설립하여, 이전에 만들었던 MOSAIC 웹브라우저의 경험을 토대로 조금 더 UI 요소가 더해진 Netscape Navigator를 시장에 내놓았다.
@arnnet
이 당시에는 HTML과 CSS로 간단하게 웹 페이지를 만들 수 있었다. 단, HTML(Hyper Text Markup Language)의 텍스트에 링크를 걸어서 페이지와 페이지 사이에 이동만 가능한 정적인 웹 사이트만 구현이 가능했다. 이 Netscape Navigator는 시장에서 80%의 점유율을 자랑하면서 급격히 성장해 나간다.
@arnnet
그리고 Marc Andreessen는 어떻게 하면 동적인 웹사이트를 만들 수 있을까. 즉, 사용자들이 웹사이트를 더 다이나믹하게 사용할 수 있는 방법을 고민한다. 이에 그는 스크립팅 언어를 추가하자는 결론을 내린다. 사용자들에게 보여주고 있는 웹사이트 안에서 DOM 요소들을 조작하면서 다이나믹한 웹사이트를 만들기 위해 새로운 언어를 추가하기로 결심한다.
언어를 10일 안에 개발하라고?
처음으로 고려되었던 것은 그때 한참 뜨고 있었던 Sun Microsystems의 Java 언어였다. 하지만 웹사이트를 주로 개발하던 개발자들이 쓰기에는 다소 무겁고 어려운 언어였기 때문에 고려 대상에서 제외되었다.두 번째로 시도한 것은 Brendan Eich 라는 사람을 스카우트해서 기존에 존재했던 scheme script 언어를 조금 변형하는 시도였다. 그리하여 이들은 본인들만의 새로운 언어를 만들면서도, 기존 scheme script 언어의 컨셉을 유지하고 문법은 Java스럽게 만들기로 했다.
@ninyachristina
게다가 무려 이 언어를 무려 10일 안에 만들기로 한다. 이게 어떻게 가능했을까? 그는 천재다.. 놀랍게도 정말 10일 안에 프로토타입을 베이스로 한 유연성 쩌는 언어를 개발한다.
모카는 커피 아니고 언어입니다
1994년 9월, 내부적으로는 Mocha 라고 불렸던 새로운 언어가 탄생하게 된다. 이것이 추후 LiveScript로 이름이 바뀌게 되고, Netscape Navigator는 LiveScript를 이해하고 실행할 수 있는 LiveScript 엔진 즉, Interpreter가 포함이 되어서 브라우저가 출시된다.
MOCHA
이는 이제 웹 개발자들이 LiveScript를 이용해 웹 페이지를 만들면 Netscape Navigator 브라우저가 그 언어를 이해하면서 그 언어가 실행하고자 하는 것에 알맞게 DOM 요소들을 조작할 수 있는 것이 가능해지게 된다는 의미이기도 했다.
자바랑 자바스크립트랑 같은거 아냐?
그리고 그 당시에 Java의 인기가 치솟고 있었는데 Netscape사는 어떻게 하면 Java에 인기의 살짝 얹혀서 잘 올라탈 수 있을까 고민하면서 LiveScript의 이름을 JavaScript로 변경하게 된다. 그래서 이것 때문에 종종 Java와 JavaScript가 비슷한 것으로 오해하는 일들이 생기곤 한다. 나 또한 개발 공부를 처음 시작할 때는 Java와 JavaScript가 비슷한 것인 줄 알았다..
@iteachrecruiters
이렇게 하여 1995년도에 공식적으로 Netscape Navigator 브라우저 위에 JavaScript와, JavaScript를 이해할 수 있는 엔진이 포함이 되어 출시가 된다.
자바스크립트 베끼자
이런 Netscape의 성공 사례를 목격하고 Microsoft사는 자기들만의 브라우저를 출시해야 겠다는 위기감을 느끼기도 한다. 그래서 이들은 Netscape에서 출시한 브라우저를 reverse 엔지니어링하게 된다. 여기서 reverse 엔지니어링은 만들어진 프로그램의 binary 코드를 분석해서 소스코드를 복원해 내는 과정을 말한다.
@amazon
그래서 결국은 Netscape사에서 만든 JavaScript와 그 엔진의 소스코드를 베껴 와, 약간의 기능들을 변경해서 자신들만의 언어인척 언어를 하나 만들게 된다. 게다가 JScript라고 이름을 변경해 시장에 내놓게 된다.
그리하여 1995년도 마이크로소프트사에서도 Internet Explorer를 시장에 내놓게 된다.
제발 표준 좀 만들어줘..
그리고 이는 개발자들의 고통의 시작이기도 했다. 웹 개발자들은 너무나 다른 이 두 브라우저 위에서도 잘 동작할 수 있는 웹사이트들을 만들어야 했다.
@eyerys
그래서 그 당시에는 웹사이트에서 위와 같은 문구들을 보는 게 너무나 자연스러웠기도 했다. 이 사태를 더 이상 참지 못한 Netscape사는 ECMA International 라는 단체에 찾아가서 본인들이 만든 JavaScript로 표준안을 만들어보자라고 제안하게 된다.
ECMAScript의 탄생
그리하여 1997년 7월, 드디어 첫 번째 ECMAScript1이 시장에 나오게 된다. ECMAScript는 브라우저에서 동작하는 언어를 만들 때, 그리고 그 언어를 이해할 수 있는 엔진이 이해하기 위한 문법적인 사항들을 잘 정리한 문서다.
@sowon-dev.github.io
그리고 그 뒤에 새로운 버전들이 계속 나오는데, 특히 ECMAScript3 에서는 새로운 에러 핸들링 방식의 관련된 문법이나, 관계 연산자 등이 새로 추가되었다. 그리고 ECMAScript4부터는 class, original type annotation 등 다양한 아이디어가 논의된다. 뒤에서 말할 것이지만 그냥 논의만 되었다. 논의만..
Internet Explorer의 반격
이렇게 많은 것들이 논의되는 동안 Internet Explorer의 시장점유율이 급격히 상승한다. 2023년인 현재 익스플로러는 없는 이 세상과는 다르게 당시에는 무려 95%의 사용자들이 Internet Explorer를 사용한다.
이렇게 큰 시장 점유율을 확보하게 된 마이크로소프트사는 건방져지기 시작한다. 즉, 본인들이 만든 Internet Explorer가 표준이라는 주장을 하며 더 이상 ECMAScript 표준안에 동의하지 않게 된다. 이로 인해 ECMAScript4는 빛을 보지 못하며 버려지고 이후 표준화 진행이 더뎌졌기에, 결과적으로 ECMAScript4 논의 이후 ECMAScript5가 나올 때까지 약 10년 간의 공백이 있었던 것이다.
나도 좀 껴주라
그리고 4년 뒤인 2004년도에 드디어 Mozilla사에서 Firefox 브라우저가 출시된다.
@computerhoy
그리고 Mozilla사는 ECMA International 단체를 찾아가서 본인들이 가지고 있는 ActionScript와 이 언어를 이해할 수 있는 Tamarin이라는 엔진으로 표준화를 다시 검토해 보자고 제안한다. 하지만 ActionScript와 Tamarin은 기존의 브라우저에서 쓰이고 있는 JScript와 JavaScript와는 너무나 달랐기 때문에 다시 표준안을 진행하기에는 조금 무리가 있었다.
이같이 표준화를 앞에 두고 Netscape, Microsoft, Mozilla 3사의 치열한 신경전이 계속 벌어지고 있었다. 그동안 불쌍한 개발자들은 시장에 존재하는 다양한 브라우저에서 잘 동작할 수 있도록 웹 페이지를 만들어야 했기 때문에 쌩고생을 하면서 웹페이지를 만들어 나가야 했다.
그리고 2004년, 웹 시장에서는 굉장히 획기적인 일이 발생하게 되는데..
Ajax의 등장
바로 Jesse James Garrett 라는 사람이 Ajax(Asynchronous JavaScript and XML)라는 것을 세상에 내놓는다. 이는 비동기적으로 데이터를 서버에서 받아오고 처리할 수 있도록 도와주는 것이다.
@wikipedia
하지만 이러한 Ajax의 도입에도 불구하고 여전히 ECMAScript 표준화를 앞두고 3사의 치열한 신경전은 계속되었다. 게다가 그동안 시장에는 Opera 브라우저나 다른 브라우저들이 많이 나오게 되었고, 개발자들은 다양한 브라우저에서 동작하는 웹 페이지를 만드느라 여전히 고생을 하고 있었다. 이렇게 웹 시장에 수요가 많아짐에 따라 많은 개발자들이 이 웹 시장으로 들어오게 되기도 했다.
jQuery의 등장
그리고 이런 많은 개발자들 사이에서 서서히 강력한 커뮤니티가 형성되기 시작한다. 이런 커뮤니티 사이에서 jQuery, dojo, mootools 등 라이브러리들이 많이 나오게 된다.
@wikipedia
이런 라이브러리들이 해결하고자 하는 공통된 문제점은 딱 하나였다. 개발자들이 더 이상 다른 브라우저에 구현 사항을 신경 쓰지 않아도 되게 만드는 것이었다. 그중에서도 "write less, do more" 이라고 하는 jQuery가 많은 사랑을 받게 되었다.
강력한 Chrome의 등장
이런 변화들 속에서도 웹 시장을 급격하게 바꾸는 진취적인 사건이 하나 있었다. 그것은 바로 2008년에 Google에서 현재 우리가 잘 사용하고 있는 Chrome 브라우저를 출시한 것이다.
@Google
Chrome 브라우저는 Just-in-time compilation 이라는 굉장히 강력한 엔진이 포함된 브라우저다. JavaScript를 실행하는 속도가 엄청 빠른 강력한 엔진이 포함된 것이다. 이러한 크롬의 획기적인 등장에 시장의 다른 브라우저들은 성능 개선에 대한 필요성을 느끼며 좋은 자극을 받게 되기도 한다.
이제는 통일 좀 하자
드디어.. 드디어! 2008년 7월에 모든 브라우저들이 모여, 표준화를 만들고 서로 윈윈할 수 있는 관계를 형성하자며 생산적인 대화를 한다. 그리하여 2009년에 ECMAScript5가 나오게 되고, 뒤이어 2015년도에는 우리가 잘 아는 ECMAScript6가 나오게 된 것이다.
우리가 현재 사용하는 class나 arrow function, const와 let 등이 모두 ECMAScript6에 정의되었다. 그 뒤로도 매 해 새로운 버전들이 나오고 있는데 조금조금씩 수정된 부분들일뿐, 거의 커다란 변화들은 ECMAScript5와 6에서 모두 정의되었다고 볼 수 있다.
성숙해지고 잘 정착했다
ECMAScript6를 기점으로 JavaScript는 “Mature, Settled down”이라는 말이 나오게 된다. 그리고 모든 브라우저들이 ECMAScript의 표준 사항을 잘 따라가고 있기 때문에 더 이상 jQuery 같은 라이브러리들의 도움 없이도 충분히 JavaScript와 웹 APIs에서 제공하는 API들 만으로도 모든 브라우저에서 잘 동작할 수 있는 웹 사이트나 웹 애플리케이션을 만들 수가 있게 되었다.
@The Depths of JavaScript Newsletter
그리고 각각의 브라우저들마다 ECMAScript의 표준안을 따라가는 다양한 엔진들(Chrome은 V8, Firefox는 SpiderMonkey, 그리고 Safari에는 JSCore)이 존재하게 된다. 이 중에서도 Chrome의 V8 JavaScript 엔진은 Nodejs와 Electron에서도 이용되기도 한다. 그리고 뒤이어 2020년 2월에는 Microsoft사에서도 V8 엔진을 대체해서 사용하기 시작했다.
버전이 다 다르면 어떡해
시장에서 다양한 사용자들은 다양한 브라우저들을 쓰고 있고, 모든 사용자들이 최신 브라우저 버전을 쓰고 있는 것은 아니다. 하지만 개발자들은 최신 버전의 ECMAScript로 개발 하고 싶으므로 개발할 때는 최신 버전의 ECMAScript를 쓰고, 사용자에게 배포할 때만 JavaScript Transcompiler를 이용하게 된다.
@Babel
즉, ECMAScript의 최신버전을 5나 6으로 변환해서, 변환된 코드를 생산해 주는 Transcompiler가 바로 그 유명한 Babel이다.
자바스크립트 하나만 잘해도..
현재는 Single Page Application도 JavaScript만으로 충분히 구현할 수 있지만, 더 쉽고 효율적으로 개발하기위해 React, Angular, Vue 같은 것들이 탄생하기도 했다. 표준화된 ECMAScript, 그리고 강력한 V8 엔진으로 인해 백엔드에서도 구현할 수 있도록 Node js가 등장하기도 했다. React Native를 이용해 모바일 어플리케이션도 충분히 만들 수 있고, Electron으로 Desktop 애플리케이션도 만들 수 있게 되었다.
velog.io/@godori
정리하며
@devrant.com
즉, JavaScript만 잘 배워두면 이용할 수 있는 분야는 무궁무진하다는 뜻이다. 물론 TypeScript 등 다양한 것들이 생겨나고 있지만, 오늘 알아본 것처럼 결국 뿌리는 JavaScript이기 때문에 JavaScript 하나만 잘해두어도 다른 기술 섭렵은 비교적 쉬울 것이다.