JavaScript 탄생배경 및 활용

Intro

• 드림코딩 by 엘리 채널을 보며 공부하고 정리한 내용입니다.

• 새로운 언어를 배울 땐 바로 문법 공부를 하기보다는 탄생 배경이 아는 것이 좋다고 생각하여 JavaScript 탄생배경을 알아보겠습니다.
• 어떻게 탄생했으며, 어떤 문제를 해결하기 위해 만들었는지, 어떤 분야에 활용할 수 있는지 이해하기 위해 알아보았습니다.

역사

1993년

• 컴퓨터를 잘 모르는 사람들도 쉽게 쓸 수 있는 UI 요소가 더해진 Mosaic Web Broweser가 시장에 나오게 됩니다.

• 이를 개발한 Marc Andreessen은 대학을 졸업한 후 Netscape을 만들게 됩니다.

• 그 이후 Netscape Navigator을 개발했는데, 간단하게 HTML과 CSS를 이용해 만들었습니다.
  • Netscape Navigatior은 시장 점유율 80%를 차지하였습니다.
• Marc Andreesen의 고민
  • 그는 어떻게 하면 동적인 웹사이트를 만들 수 있을지 고민하였고, Scripting 언어를 추가하기로 결심했습니다.

1994년 9월

• Marc Andreesen은 Java 언어를 고려했지만, 웹사이트를 개발하기엔 다소 무거운 부분이 있었습니다.
• Brendan Eich를 영입해 Scheme Script를 유지하며, 문법은 Java스럽게 만들자고 하며 그는 결국 내부적으로 Mocha라는 언어를 만들게 됩니다 (10일만에)
• Mocha는 추후 LiveScript라는 이름으로 바뀌고, Netscape Navigator안에는 LiveScript를 이해하고 실행할 수 있는 LiveScript 엔진, LiveScript Interpreter이 포함되어 배포됩니다.
  • 이를 통해 웹 개발자들이 LiveScript를 이용해 웹페이지를 만들게 되면 Netscape Navigator 브라우저가 그 언어를 이해하면서, 그 언어가 실행하고자 하는 것에 알맞게 DOM 요소들을 조작하는 것이 가능해졌습니다.
• Netscape사는 당시 인기 많았던 Java에 살짝 ‘숟가락’을 얹기 위해 LiveScript라는 이름을 JavaScript라는 이름으로 바꿨습니다.

1995년

• Netscape사는 Netscape Navigator에 JavaScript Interpreter를 넣어 출시합니다.
• 이 때, Microsoft가 이 브라우저의 잠재성을 확인하고, 자신만의 browser를 출시해야한다고 생각하게 됩니다.
  • Microsoft는 바로 Reverse Engineering을 하게 됩니다. 만들어진 프로그램에 binary code를 분석해서 source code를 분석해내게 됩니다. 그래서 그대로 복원하고 베껴와서 자신들만의 언어인척 JScript라는 언어를 출시합니다.
• 그와 동시에 Microsoft에서도 Internet Explorer도 시장에 내놓게 됩니다.

1996년

• 개발자들의 고통 시작
  • Netscape Navigator과 Internet Explorer가 둘 다 다른 브라우저기 때문에 JScript, JavaScript 각각 배워서 개발을 해야했습니다.
• 11월: 참다못한 Netscape는 ECMA International을 찾아가 JavaScript의 표준을 만들고자합니다.

1997년 7월

• ECMAScript 1 language specification 탄생하게 됩니다.
  • ECMAScript는 변수는 이렇게 만들고, 함수는 이런식으로 정의하자 라는 일종의 규칙입니다.
• 이 이후에 지속적으로 ECMAScript 2 (1998), ECMAScript3 (1999), ECMAScript4(2000)이 나오게 됩니다.
  • ECMAScript3 - error handling , === (three equal operator) 문법을 추가하였습니다.
  • ECMAScript4 - optional type annotation, class, Enterprise scale

2000년

• Microsoft사의 Internet Explorer가 시장점유율 95%를 차지하게 됩니다.

2004년

• Firefox가 출시됩니다.
• ECMAScript 단체를 찾아가서 우리가 ActionScript3라는 언어가 있고 Tamarin이라는 이 언어를 이해할 수 있는 것이 있는데 다시 표준화하는것이 어때?라고 표준화를 하게 됩니다.
• 그래서 Firefox, Internet Explroer, Netscape Navigator이 모두 ECMAScript를 두고 표준화 문제로 지속적으로 부딪히게 됩니다.
• Jesse James Garrett
  • AJAX라는 기술을 제출합니다.
  • Asynchronous JavaScript and XML: 비동기적으로 데이터를 서버에서 받아오고 처리할 수 있또록 도와주는 기술입니다.
• 지속적인 브라우저의 마찰로 개발자들은 브라우저마다 제각각인 언어로 개발을 해야해서 엄청 힘든시기를 겪고 있었습니다.
  • 이때, jQuery, dojo, Mootools 라이브러리가 나오게 됩니다.
  • 이 라이브러리들은 다른 브라우저의 구현사항에 신경쓰지 않고 같은 코드를 작성하여 각 브라우저 별로 동일하게 코드를 노출시켜주는 라이브러리였습니다.
  • Service Layer, Presentation Layer, Business Layer를 만들 때 API를 잘 작성하여서 나중에 구현사항이 변경되더라도 이 Interface를 사용하고 있는 사용자의 코드는 수정하지 않도록 만든 practice였습니다.

2008년

• 구글이 Chrome Browser를 출시하게됩니다.
• Chrome Browser는 Just-in-time compilation이라는 강력한 엔진이 포함된 브라우저였고, 자바스크립트를 실행하는 데 속도가 매우 빨랐습니다.
• 이에 다른 브라우저들이 성능 개선이 필요하다는 데 있어 문제점을 인식하게 됩니다.
• 2018년 7월 - 모든 브라우저들이 모여 서로 윈윈할 수 있는 관계를 형성하게 됩니다.

2009년

• ECMAScript 5 출시하게 됩니다.

2015년

• ECMAScript6 출시하게 됩니다.
  • default parameter
  • class
  • arrow function
  • const
  • let
• 그 이후 매년, ECMAScript가 출시되고 있습니다.

JavaScript Engine

• 각 browser마다 제각각 EcmaScript의 표준안을 따르고 있는 엔진을 사용하고 있는데, Chrome은 V8 을 이용하고 있습니다.
• 그 밖에도, Firefox는 SpiderMonkey, Safari는 JSCore을 이용합니다.
• Chrome에서 쓰이는 V8 엔진은 node.js와 electron에서도 많이 이용되어지며, 2020년 2월 Microsoft도 V8 으로 엔진을 변경하였습니다.

BABEL

• 개발할 때는 최선 버전의 ECMAScript을 사용하기 위해 사용자들할 때 배포할 때 BABEL JavaScript transcompiler을 이용합니다.

동향 및 이용할 수 있는 분야

SPA (Single Page Application)

• 현재 SPA가 굉장히 유행하고 있습니다.

• 하나의 페이지 안에서 데이터를 받아서 필요한 부분만 데이터를 받아 업데이트합니다.
• JS로도 구현이 가능하지만, SPA를 조금 더 쉽게 이용할 수 있는 React, Angular, Vue, Backbone 이용합니다.

node.js

• v8 자바스크립 엔진을 이용한 백엔드에서 서비스를 구현할 수 있도록 만들어졌습니다.
• React Native, Cordoba를 통해 모바일 앱도 만들 수 있습니다.
• Electron을 통해 Desktop Application도 만들 수 있습니다.

Web Assembly

• 다양한 언어를 이용해 웹어플리케이션을 만드는 것이 가능해졌습니다.
• C++로 만들어진 게임도 웹브라우저에서 동작이 가능하며 Figma도 이를 이용해 제작되었습니다.