본문 바로가기

Development/JavaScript

JavaScript를 공부하기 전에 알고 있으면 좋은 내용 정리

'역사는 미래를 비추는 거울'이라는 말이 있지 않은가? 따라서, JavaScript를 제대로 공부하기 전에 JavaScript의 탄생 배경, 역사와 일화 등을 간략히 정리해보았다. 이를 통해 앞으로 어떠한 방향으로 웹 개발을 공부해야 하는지 파악하기 위한 정보가 되었으면 한다.

최초의 UI 기반 웹 브라우저 Mosaic의 등장

1993년, 최초로 UI요소가 더해진 Mosaic Web Browser가 등장하였다. Mosaic Web Browser의 개발팀을 이끌던 Marc Andreessen은 대학교 졸업과 동시에 Netscape를 설립하였고, Mosaic Web Browser 보다 다양한 UI 요소가 더해진 NetScape Navigator라는 웹 브라우저를 시장에 내놓았다. 이 당시 모든 웹 사이트는 HTML과 CSS로만 작성된 정적인 웹 페이지만으로 구성되어 있었으므로, NetScape Nivagater는 80%라는 시장 점유율을 토대로 가파른 성장을 하게 된다.

동적 웹 페이지를 위한 프로그래밍 언어 출시

Marc Andreessen는 DOM(Document Object Model) 요소를 조작하면서 다이나믹한 동적인 웹 페이지를 만들기 위한 오랜 고민을 해오던 끝에 웹에 script 언어를 추가하는 것을 검토하였다. 이때, 처음 검토되었던 언어는 Java인데, 이는 웹 개발자들에게 다소 무겁고, 어렵게 느껴졌기 때문에 검토 대상에서 제외되었다. 이후 1994년, Marc Andreessen는 Brenden Eich를 고용하였고, Brenden Eich는 기존에 존재했던 Scheme Script를 변경하여 prototype 기반의 유연한 언어인 Mocha를 개발하였다. Mocha는 이후 LiveScript로 개명되었다.

Java와 JavaScript의 연관성

NetScape는 웹에서 LiveScript가 실행되기 위한 Interpreter를 탑재한 버전의 NetScape Navigator 브라우저를 출시한다. 이 당시 Java의 인기가 매우 높았는데, NetScape는 이러한 Java의 유명세에 LiveScript를 포함시키고자 JavaScript로 개명한다.

아직까지도 많은 입문자들이 Java와 JavaScript를 헷갈려하는 이유인 것 같다.

이후 1995년, NetScape는 공식적으로 JavaScript가 실행되기 위한 Interpreter를 탑재한 버전의 NetScape Navigator 브라우저를 출시한다.

Internet Explorer의 등장

NetScape의 성공 사레를 눈여겨 보던 Microsoft는 웹 브라우저의 무한한 잠재성을 확인하여 NetScape Navigator 브라우저 역공학(Reverse engineering)하기 시작한다.

역공학은 프로그램의 Binary Code를 분석해서 프로그램의 소스 코드를 복원해내는 과정이라고 할 수 있다.

Microsoft는 NetScape Navigator 브라우저의 JavaScript와 JavaScript RunTime Engine을 복원하는데 성공하였고, 일부 기능만 변경한 후 JScript라는 이름의 복제 언어를 시장에 출시하였다. 뿐만 아니라, 자체적인 웹 브라우저 또한 출시하였는데 이것이 바로 Internet Explorer(IE)이다.

Microsoft의 Internet Explorer 등장이 웹 개발자의 고통이 시작되는 시점의 시.발.점이라고 할 수 있다.

IE가 등장한 이후, 웹 개발자들은 서로 다른 웹 브라우저에도 정상적으로 동작하는 웹 사이트를 개발하여야 했으며, 그 당시 대부분의 웹 사이트에는 NetScape Navigator와 IE를 홍보하기 위한 문구가 포함된 경우가 많았다고 한다.

ECMAScript의 등장

경쟁사가 등장하고, 여러 브라우저로 인해 개발자들이 고통받는 상황을 더이상 지켜볼 수 없었던 NetScape는 ECMA International에 JavaScript 표준을 만들어보자고 제안을 한다. 그리하여, 1997년 7월, 첫 번째 ECMAScript가 시장에 출시되었다.

  • ECMAScript는 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어이며, ECMAScript 사양(ECMAScript specification)이라고도 한다. 이는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다.
  • ECMA-262는 기술 규격에 따라 범용 목적의 스크립트 언어(독립된 시스템에서 작동하도록 특별히 설계된 프로그래밍 언어)에 대한 명세이다.
  • JavaScript는 ECMAScript 사양을 준수하는 범용 스크립트 언어이다.

이후에는 매년 새로운 버전의 ECMAScript를 출시하였고, 2000년에는 Optional type annotaion, Class, Enterprise scale 등의 기능을 추가한 ECMAScript 4를 출시하였다.

IE의 인기 상승과 독점

이와 같이 ECMAScript에 대한 다양한 아이디어 논의되는 동안 2000년도부터 IE의 시장 점유율이 95%까지 상승하며, 사실상 웹 브라우저의 1인자의 자리를 차지하게 되었다. 시장에서 유리한 위치를 차지한 Microsoft는 더이상 ECMAScript 개발에 참여하지 않는다는 공식적인 의사를 밝혔고, 2000년도 이후로 ECMAScript 4에 대한 표준화가 더디게 진행되었다.

Firefox의 등장과 삼파전

2004년, Mozila에서 Firefox 웹 브라우저를 출시하였다. 당시 Firefox에는 Termarin Engine이 탑재되어 있었고, ActionScript3라는 언어가 실행되는 환경이었다. 이후, Mozlia는 ECMA Internatinal에 ActionScript3로 새로운 표준을 만들어보자고 제안하였으나, ActionScript와 그 Engine인 Termarin은 기존의 웹 브라우저에 사용된 JavaScript 및 JScript와는 다른 점이 많았기 때문에 해당 제안은 거절되었다. 이렇게 NetScape, Microsoft, Mozlia 간의 ECMAScript 표준 논쟁이 시작되었고, 그 동안 많은 웹 개발자들은 각기 다른 브라우저의 환경을 고려한 웹 사이트를 개발하느라 많은 고생을 하게 된다.

방대해진 웹 개발 시장

삼파전이 진행되는 동안 Ajax(Asyncronous JavaScript and XML)wiki이라 불리우는 비동기식 통신 기법이 공식적으로 도입되었고, Opera와 같은 다양한 브라우저들이 등장하기 시작하였다. 이렇게 웹 개발 시장의 규모가 커짐에 따라 기존의 개발자들의 웹 개발 분야로 뛰어들기 시작했고, 이들은 다양한 커뮤니티를 통해 JQuery, dojo, mootools과 같은 여러 라이브러리를 개발하였였다.

이러한 라이브러리가 해결하고자 하는 궁극적인 목표는 서로 다른 웹 브라우저 간의 환경을 신경쓰지 않도록 하는 것이다.

Chrome의 등장과 ECMAScript 5, 6

2008년도, 당시 JavaScript 실행 속도가 가장 빠른 JIT(Just-in-time Complication) Engine이 탑재된 Chrome 브라우저가 등장하였다. Chrome의 등장은 여러 웹 브라우저 개발사에게 긍정적인 자극제 역할을 하였다. 그해 7월, 모든 브라우저 개발사가 모여 서로 Win-win 할 수 있는 생산적인 방법을 강구하게 되고, 그로인해 2009년에 ECMAScript 5, 2015년에 ECMAScript 6가 등장하였다.

2019년까지 ECMAScript 10까지 출시되었으나, ECMAScript 6 이후에 출시된 버전은 ECMAScript 5 또는 6 버전의 내용을 약간 수정한 정도라고 하며, 그로인해 아직까지도 ECMAScript 6가 가장 최신 버전으로 알려져 있다.

이로써 JavaScript는 성숙하고(Mature), 안정된(Settled) 스크립트 언어로 자리잡게 되었다. 또한, 모든 웹 브라우저들은 ECMAScript 5 또는 6의 표준 사항을 준수하고 있으므로 더이상 JQuery, dojo, mootools와 같은 라이브러리의 도움 없이 JavaScript와 WebAPIs만으로도 모든 웹 브라우저에서 정상적인 동작이 가능한 웹 사이트 또는 웹 애플리케이션을 개발할 수 있는 환경이 조성되었다.

많은 사용자들은 각자의 상황에 따라 다양한 웹 브라우저를 사용하고 있으나, 모든 사용자들이 최신 버전의 브라우저를 사용하고 있는 것은 아니다. 반면, 개발자들은 최신 기능의 ECMAScript를 준수하는 웹 서비스를 개발하는데, 이 경우 버전 차이에 따른 문제가 발생할 수 있다. 따라서, 개발 환경에서는 최신 기능의 ECMAScript를 적용하고, 배포 환경에서는 JavaScript Transcomplier를 통해 ECMAScript 5 또는 6로 변환해주어야 하는데, 이를 위한 도구가 바로 Babel이다.

V8 Engine의 등장과 마무리

각각의 웹 브라우저는 ECMAScript의 표준을 준수하는 각기 다른 Engine을 사용하는데, 이를 나열해보면 다음과 같다.

  • Chrome : V8
  • Firefox : SpiderMonkey
  • Safari : JSCore
  • MS Edge : Chakra
  • Opera : Carakan
  • Adobe Flash : Tamarin

이중에서 Chrome의 V8 엔진은 Node.js와 Electron 등에서 많이 사용되는데, 글이 너무 길어졌기 때문에 이 부분은 Node.js와 묶어서 따로 포스팅하도록 하겠다.