[Js RoadMap] 01. JavaScript가 뭔데?

JavaScript

JavaScript는 인터프리터(소스코드를 바로 실행하는 환경), just-in-time 컴파일(실행하는 시점에 기계어로 번역) 프로그래밍 언어로 일급 함수(함수를 변수에 저장 가능)를 지원한다. 요즘은 Node.js, Apache CouchDB, Adobe Acrobat 처럼 비 브라우저 환경에서도 사용하며, JavaScript의 특징은 다음과 같다.

• 프로토타입 기반 : 객체 생성할 때, 클래스를 정의하지 않아도 생성이 가능
• 다중 패러다임 : 여러가지 방법론이 적용됨을 의미
• 단일 스레드 : 하나의 프로세스에서 오직 하나의 스레드로 동작
• 동적 언어 : 컴파일 시 자료형이 결정
• 객체지향형 : 객체라는 단위로 상호작용을 서술하는 방식
• 명령형 : 어떻게 해결할 것인가
• 선언형 :무엇을 해결할 것인가
• etc.

| 인터프리터(interpreter, 문화어: 해석기) |

• 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말한다.

| just-in-time 컴파일 |

• JIT 컴파일(just-in-time compilation) 또는 동적 번역(dynamic translation)은 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법이다.
• 실행 시점에서 인터프리트 방식으로 기계어 코드를 생성하면서 그 코드를 캐싱하여, 같은 함수가 여러 번 불릴 때 매번 기계어 코드를 생성하는 것을 방지한다.

| 일급 함수 |

• 함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현한다.

| 프로토타입 기반 프로그래밍 |

• 객체를 생성할 때 처음 그 객체의 클래스를 정의하지 않는 것을 허용한다.

| 다중 패러다임 프로그래밍 언어 |

• 하나 이상의 프로그래밍 패러다임을 지원하는 프로그래밍 언어이다.

| 싱글스레드(Single thread) vs 멀티스레드 (Multi thread) |

• 단일스레드는 하나의 프로세스에서 오직 하나의 스레드로만 실행한다.

| 정적언어(타입)과 동적언어(타입) |

• 동적 타입 언어의 자료형은 컴파일 시 자료형을 정하는 것이 아니고 실행 시에 결정합니다.

| 객체 지향 프로그래밍 |

• 프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라, 프로그램을 수많은 '객체(object)'라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식이다. 객체란 하나의 역할을 수행하는 '메소드와 변수(데이터)'의 묶음으로 봐야 한다.

| [프로그래밍 언어론] 명령형(Imperative)프로그래밍과 선언형(Declarative)프로그래밍 |

• 명령형 프로그래밍이란 프로그램의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍 패러다임의 일종이다.
• 명령형 프로그래밍은 "how to solve it", 즉 어떻게 그것을 해결할 것인가에 관심이 있다.
• 선언형 프로그래밍은 무엇을 해야 할지를 나타내는 경우를 선언형이라고 한다.
• 프로그램이 함수형, 논리형, 제한형 프로그래밍 언어 등으로 작성된 경우에 선언형이라고 한다.

JavaScript의 동적 기능에는 런타임 객체 구성, 변수 매개변수 목록, 함수 변수, 동적 스트립트 생성(eval), (for...in 및 Object 유틸리티를 통한) 객체 검사 그리고 소스 코드 복구가 있다. (JavaScript 함수는 소스 텍스트를 저장하고 toString()을 통해 다시 찾을 수 있다.)

JavaScript는 무엇인가?

JavaScript는 웹 페이지를 대화식으로 만드는데 사용되는 크로스 플랫폼, 객체 지향 스크립트 언어이다.

| 스크립트 언어 |

• 기존에 이미 존재하는 소프트웨어(애플리케이션)를 제어하기 위한 용도로 쓰이는 언어

JavaScript는 Array, Data 등 객체에 대한 표준 라이브러리와 연산자, 제어 구조, 명령문과 같은 언어 요소의 집합이 있고, 코어 JavaScript는 추가 객체로 보완하여 다양한 목적으로 확장이 가능하다.

• 클라이언트 측 JavaScript는 브라우저와 문서 객체 모델(DOM)을 제어하는 객체를 제공하여 코어 언어를 확장한다.
• 서버 측 JavaScript는 서버에서 JavaScript를 실행하는 것과 관련된 객체를 제공하여 핵심 언어를 확장한다.

---

JavaScript와 Java

JavaScript는 대부분의 Java 표현 구문, 명명 규칙 및 기본적인 흐름 제어 구조를 따르며 이것이 LiveScript에서 JavaScript로 이름이 변경된 이유라고 MDN에서 설명한다.

• JavaScript는 숫자, 불리언, 그리고 문자열 값을 표현하는 적은 수의 자료 형을 기반으로 한 런타임 시스템을 지원한다.
• JavaScript는 프로토타입 기반 객체 모델을 갖는다. 프로토타입 기반 모델은 동적 상속을 제공한다.
• JavaScript는 어떤 특정한 선언을 요구하지 않는 함수도 지원한다. (익명 함수)

JavaScript	Java
객체 지향. 객체의 형 간에 차이 없음. 프로토타입 메커니즘을 통한 상속, 그리고 속성과 메서드는 어떤 객체든 동적으로 추가될 수 있음.	클래스 기반. 객체는 클래스 계층구조를 통한 모든 상속과 함께 클래스와 인스턴스로 나뉨. 클래스와 인스턴스는 동적으로 추가된 속성이나 메서드를 가질 수 없음.
변수 자료형이 선언되지 않음(동적 형 지정, 느슨한 형 지정).	변수 자료형은 반드시 선언되어야 함(정적 형 지정, 강한 형 지정).
하드 디스크에 자동으로 작성 불가.	하드 디스크에 자동으로 작성 가능.

JavaScript History

1993년 Mosaic의 발명

1993년 Mosaic는 NCSA의 마크 앤드리슨과 에릭 비나가 만들었다. 이때 브라우저 중 최초로 HTML 페이지에 있는 그림을 텍스트와 함께 표시하는 기능을 갖추었다. 당시에는 JavaScript는 없고, DOM 또는 객체 모델만 있었다.

1995년 Mocha -> LiveScript -> JavaScript

1993년 안드르센(Marc Andreessen)은 졸업 후 캘리포니아로 이주하여 넷스케이프를 공동 설립했으며 Netscape Navigator는 브라우저 시장 점유율의 80% 이상을 차지하게 된다.

안드르센은 이 시기에 브라우저가 좀 더 동적으로 변해야 하며, 웹 디자이너가 웹 페이지를 더 상호작용하도록 만들기 위해 일종의 접착 언어가 필요하다고 생각했다.

그래서 아이크(Brendan Eich) 라는 사람 을 고용하였고, 불과 10일 만에 JavaScript의 첫번째 버전인 모카가 탄생하였다. Sun Microsystems의 자체 프로그래밍 언어에서 영감을 받아 만들어졌다.

10일 안에 완벽한 프로그래밍 언어를 작성하는 것은 사실상 불가능하며 아이크도 이를 잘 알고 있었다. 모카는 1995년 9월 LiveScript로 이름을 변경하였다. 그러나 몇 달 후 12월에 더 힙하고 트렌디 할 것 같은 JavaScript 로 이름을 변경하게 되었다.

JavaScript가 처음 나왔을 때 팝업 창으로 인한 사용자 경험에 부정적인 영향을 끼쳤다. 이 기간 동안 Internet Explorer 라는 자체 브라우저를 도입했다. 1996년에는 Microsoft가 JavaScript를 리버스 엔지니어링하고 이를 JScript라고 불렀다. 결과적으로 JavaScript와 JScript가 생겼다.

ECMAScript

사람들은 인터넷의 급속한 확장으로 인해 JavaScript가 표준화되어야 한다는 것을 깨달았고, 1996년 Netscape는 IT 산업의 표준 설정을 위해 유럽 컴퓨터 제조업체 협회인 ECMA에 접근했다.

1997년 6월 우리는 ECMA의 첫번째 버전을 갖게 되었고, 브라우저 공급업체와 서버측 애플레이케이션에 JavaScript 구현을 위한 규칙을 제공했다.

1999년 Y2K와 같은 세상의 종말을 준비하던 시기에 ECMAScript 버전 3을 받게 된다. 그러나 이 이후에 10년 동안 다른 버전의 ECMAScript가 나오지 않는다. Microsoft IE는 브라우저 시장 점유율을 집어삼켰고 Microsoft는 규칙 사항을 따르는데 관심이 없었다. Microsoft는 자체적으로 JavaScript를 확장하여 구현했기에 조각화가 발생하였다.

2000년대 초반에 ECMAScript 4버전 작업이 시작되었다. 선택적인 유형 주석, 클래스, 인터페이스 및 현대의 TypeSciprt와 훨씬 더 유사한 방향으로 나아가고 있었다.

jQuery

2000년대 중반의 개발자들은 모든 브라우저에서 실행되는 웹 애플리케이션을 구축하려는 시도에 힘들어하고 있었는데 2006년 jQuery의 출시와 함께 해결이 되었다. jQuery는 자바스크립트 라이브러리 중에서 매우 문서가 잘 작성되어 있었고, 개발자가 브라우저 간 웹 애플리케이션을 빌드할 수 있도록 지원하였다.

2008년 9월 2일 Google 크롬 및 V8 엔진 출시는 또 다른 이정표였다. V8 엔진은 JavaScript가 생성되고 해석되는 방식을 근본적으로 변경하여 애플리케이션 스택의 클라이언트 및 서버 측 모두에서 고성능 애플리케이션을 위한 매력적인 대안이 되었다.

2009년 5월 라이언 달(Rayn Dahl)은 이벤트 루프를 포함하는 V8 위에 구축된 JavaScript 용 서버 측 런타임 Node.js를 소개했다.

2009년 12월에 ECMAScript 5 버전이 나왔고 선택이 되었다. 해당 버전에서 JSON은 기능적 개체 및 배열 메서드, 엄격 모드 접근자 및 기타 여러 기능을 제공하게 되었다.

2010년 10월에는 SPA로 설계된 Backbone과 Angular.js가 출시되었다.

- Backbone: 가벼운 명령형 프로그래밍 접근 방식으로 DOM 변경 사항을 관리.

- Angular.js: 포괄적이고 선언적 프로그래밍 언어를 사용.

백본의 Jeremy Ashe는 CoffeeScript와 Underscore.js를 만든 전설적인 인물이다. CoffeeScript는 1995년 아이크가 가단성 있고 트랜스파일러가 매우 중요한 프로그래밍 언어를 만들려는 원래 버전으로 거슬러 올라가 트랜스파일링을 주류로 만든 최초의 언어이다.

JavaScript ES6에서는 Promise, let 및 const, 화살표 함수, 확산 구문 등 많은 새로운 기능이 들어갔다. JavaScript 개발자에겐 많은 도움이 되었지만 레거시 브라우저에서 지원되지 않았기 때문에. ES3까지 거슬러 올라가서 사용할 수 있도록 오늘날 우리는 babel 및 typescript와 같은 것을 널리 사용한 것을 볼 수 있다.

2015년 React.js가 출현하였다. 선언적 UI가 있는 Angular.js의 개념 중 일부를 취했지만 단방향 데이터 흐름, 불변성 및 가상 DOM 사용으로 Modern 선언적 UI 패턴을 강화하였고, 많은 것들이 개선 되었다.

정리

- 1995년 JavaScript는 브랜든 아이크에 의해 만들어졌다.

- 1996년 JavaScript 표준화를 위해 ECMA에 접근

- 1997년 ECMA에서 표준 사양의 초판이 발표되었고 1998년 ECMAScript 2, 1999년에는 ECMAScript3의 두 가지 버전이 출시되었다.

- ECMAScript 4는 2008년까지 출시될 예정이었지만 언어 복잡성과 정치적 차이로 인해 도입하지 못하게 되었다.

- Google, Microsoft, Yahoo 및 기타 ES4 분쟁 당사들이 모여 ES 3.1을 업데이트 하였고, ES4에서 무엇을 포함하고 포함하지 않는지 싸우고 있었다.

- 2009년 ES5가 출시되고 Modern 의 표준이 되었다.

- 2010년 SPA 프레임워크 출시(Backborn, Angular)

- 2015년 ES6인 ECMAScript 2015를 릴리스하였고 React.js가 출현하였다.

---

생각

프론트엔드의 길을 처음 들어섰을 때, roadmap.sh를 발견하고 난 뒤, 사실 이게 모야! 하면서 그냥 그렇구나 하고 넘겼었다. 그러나 곧 3년차인데 아직도 JavaScript에 대해서 잘 모른다. 그래서 이번에 역사적인 측면을 다루면서 느꼈다. 계속 발전해오는 JavaScript가 더욱 강력해지고 웹, 모바일, 백엔드 그리고 VR까지 발전하는 모습들을 보면 아직 JavaScript의 기대치는 더 높아질 것으로 생각된다. JavaScript를 공부하기 잘했다는 생각이 들고, 더 완벽해지기 위해 노력해야겠다는 생각이 들게 되었다.

참고

• The History of JavaScript
• Brief History of JavaScript