[모던 자바스크립트 Deep Dive] 2장 자바스크립트란?

2장 자바스크립트란?

책을 읽고 나름 이해한대로 간략하게 정리해 보았다.
만약 이글의 읽게 된다면, 본인 개인적으로 이해한 내용임을 참고 하길 바란다.

---

1996년 3월 넷스케이프 커뮤니케이션즈의 웹 브라우저인 넷스케이프 내비게이터2에 “모카”라는 이름으로 최초 탑재

• 1996년 9월 라이브스크립트로 이름이 변경
• 1996년 12월 자바스크립트로 이름이 변경

자바스크립트의 표준화

• 1996년 8월 마이크로소프트에서 자바스크립트의 파생버전 JScript를 익스플로러3.0에 탑재
• JScript와 자바스크립트는 표준화된 상태가 아닌 적당히 호환되는 상태
• 크로스 브라우징 이슈
• 1997년 7월, ECMA-262(ECMAScript 1) 표준 사양 완성
• 1999년 ECMAScript 3(ES3) 공개
• 2009년 ECMAScript 5(ES5) 공개, HTML5 등장 -> 현재까지도 많이 사용되는 버전
• 2015년 ECMAScript 6(ES6) 공개 -> let/const 키워드 등장

Ajax

• 1999년 XMLHttpRequest라는 이름으로 등장
• 서버와 브라우저가 비동기(Asynchronous)방식으로 데이터 교환 가능
• Ajax 등장 전까지는 서버에서 받은 HTML과 Css를 단순히 렌더링 하는 수준
• 2005년 구글 맵스가 데이터를 동적으로 화면에 반영 하는 가능성을 보여줌

jQuery

• 2006년 등장
• 자바스크립트보다 러닝커브가 낮고, 직관적이어서 많은 개발자들이 선호
• DOM(Document Object Model)을 손쉽게 제어 가능
• 크로스 브라우징 이슈도 어느정도 해결해줌

V8 자바스크립트 엔진

• 2008년 등장
• 이전 자바스크립트 엔진에 비해 더 좋은 성능을 보여줌
• 이로 인해 백엔드, 프론트엔드 영역이 나뉘는 계기가 됨
  • SSR(서버 사이드 렌더링): 서버에서 HTML을 파싱하여, 클라이언트에 서빙해주는 방식
  • CSR(클라이언트 사이드 렌더링): 서버에서 기초적인 HTML을 서빙받고, 클라이언트에서 파싱하는 방식

Node.js

• 2009년 라이언달이 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 발표
• 브라우저 이외의 환경에서도 자바스크립트를 동작 가능하게 만듦(크로스 플랫폼)
  • 비동기 I/O
  • 단일 스레드(single thread)이벤트 루프

SPA 프레임워크의 등장

• 데스크탑 애플리케이션 같은 성능과 만족스러운 사용자 경험을 제공하는 니즈가 점차 높아짐에 따라 기존 웹 개발 방식으로는 개발 규모와 복잡도가 상승
• CBD(Component Based Development) 방법론 등장
  • CBD 방법론을 기반으로 하는 프레임워크와 라이브러리 등장
    • React, Vue, Angular, Svelte 등등

ECMAScript(ES)

• ECMAScript(ES)는 자바스크립트의 표준을 정의한 스펙
• 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체등 핵심 문법을 정의
  • 브라우저의 Web API는 ECMAScript의 스펙이 아니라 자바스크립트 스펙(ES ⊂ 자바스크립트)
  • DOM, BOM, Canvas, XMLHttpRequest, WebComponent등등
  • 참고: MDN web docs

자바스크립트의 특징

• 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다(유일한 언어는 아님)
  • WebAssembly도 있음(아직까진 시험적인 스펙)
  • 참고: MDN webAssembly docs
• 별도의 컴파일 과정을 거치지 않는 인터프리터 방식의 언어
• 함수를 다른 변수와 동일하게 다루는 일급 함수 개념 차용
  • 변수에 함수를 할당 가능
  • 함수가 함수를 반환
  • 함수를 다른 함수의 인수로 제공

var variable;

function argumentFunction() {
	console.log('argumentFunction');
}
// ex) 변수에 함수를 할당
variable = argumentFunction;

// ex) 함수가 함수를 반환
function run(argument) {
	return argument;
}

// ex) 함수를 다른 함수의 인수로 제공
run(variable);