2.1 자바스크립트의 탄생

자바스크립트는 개발자 브렌던 아이크(Brendan Eich)가 웹페이지의 보조적인 기능을 수행하는 경량 프로그래밍 언어로 만들었다. 무려 10일만에 만들어졌다... 1996년 3월 “모카(Mocha)” 라는 이름으로 탄생했다. 9월 “라이브스크립트(LiveScript)”, 12월 “자바스크립트(JavaScript)”로 최종 명명되었다.

2.2 자바스크립트의 표준화

• 마이크로소프트의 “JScript”
• 넷스케이프 커뮤니케이션즈의 “JavaScript”

두 언어가 경쟁하느라 크로스 브라우징 이슈가 발생하기 시작했다. 크로스 브라우징 이슈란 브라우저 마다 대응을 해주는 것을 일컫는데, 이를 방지하기 위해 표중화된 자바스크립트의 필요성이 대두됐다. 결국 넷스케이프 커뮤니케이션즈는 1996년 ECMA 인터네셔널(컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구)에 자바스크립트의 표준화를 요청한다. 이후 자바스크립트는 ECMASript로 명명되었다.

2015년에 공개된 ECMAScript 6(ES6)은 let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같이 범용 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입한다.

🔎  can I use : 호환 여부 검색.

2.3 자바스크립트 성장의 역사

초창기의 자바스크립트는 웹페이지의 보조적인 역할만을 했다. 이 시기의 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우저는 전달받은 데이터를 렌더링(rendering)할 뿐이었다.

💡 렌더링(Rendering)이란?

HTML, CSS, JavaScript로 작성된 문서를 브라우저에 시각적으로 출력하는 것을 일컫는다. 초창기의 자바스크립트는 SSR 방식으로 렌더링 되었다.

✅ SSR VS CSR

SSR(Server Side Rendering)은 웹 페이지를 브라우저가 아닌 서버에서 렌더링한다. SEO가 우선순위인 경우, 사용자와 상호작용이 적은 경우 사용한다. 

CSR(Client Side Rendering)은 데이터베이스에 API 요청으로 데이터를 받아온 후 웹 페이지를 클라이언트에서 렌더링한다. SEO가 우선순위가 아닌경우, 풍부한 상호작용이 있는 경우, 또는 웹 애플리케이션 제작을 하는 경우 빠른 라우팅과 강력한 사용자 경험 제공을 위해 사용한다.

SSR과 CSR의 단점을 보완해서 만들어진 것이 “Next.js”이다.

✅ Ajax

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다. 필요한 데이터만 전송받아 변경하기 때문에 화면 전환이 부드럽고 빠른 성능이 가능하다. 2005년, 구글 맵스가 Ajax를 기반으로 만들어지며 그 성능을 인정받기 시작했다.

✅ jQuery

jQuery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. DOM(Document Object Model)을 더욱 쉽게 제어할 수 있게 되었고, 크로스 브라우징 이슈도 어느 정도 해결되었다.

✅ V8 자바스트립트 엔진

위의 변화로 빠르게 동작하는 자바스크립트 엔진의 필요성이 대두되었고, 이때 나타난 것이 V8 자바스크립트 엔진이다. V8 엔진으로 촉발된 자바스크립트의 발전으로 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트로 이동했고, 이는 프런트엔드 영역이 주목받는 계기가 되었다.

✅ Node.js

Node.js는 2009년에 발표된 자바스크립트 런타임 환경(runtime environment)이다. 이는 브라우저 이외의 환경에서 자바스크립트를 동작할 수 있도록 하며, 서버 사이드 애플리케이션 개발에 주로 사용된다. 여기서 자바스크립트의 가장 큰 장점은 동형성(isomorphic)이다. 프런트와 백 영역에서 모두 사용되기 때문에 언어 학습의 시간을 절약할 수 있다.

Node.js는 비동기 I/O를 지원하며, 단일 스레드 이벤트 루프 기반으로 동작하기 때문에 요청 처리 성능이 좋다. 따라서 SPA(Single Page Application)에 적합하다.

✅ SPA 프레임워크

SPA는 서버로부터 새로운 페이지를 받아오지 않고 현재 페이지를 동적으로 다시 작성하면서 렌더링되는 웹 애플리케이션이다. CBD(Component Based Development)방법론을 기반으로 하는 SPA가 대중화되면서 다양한 SPA 프레임워크와 라이브러리가 생겼다. 대표적인 프레임워크로는 Angular, React, Vue.js, Svelte 가 있다.

2.4 자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준 사양이다.(ECMA-262) 이는 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수 등 핵심 문법을 규정한다. 자바스크립트는 이 기본 뼈대와 더불어 브라우저가 별도 지원하는 클라이언트 사이드 Web API(DOM, fetch, Canvas, XMLHttpRequest 등)을 아우르는 개념이다.

2.5 자바스크립트의 특징

자바스크립트는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 기본 문법은 C, 자바와 유사하며, 셀프에서는 프로토타입 기반 상속을, 스킴에서는 일급 함수의 개념을 차용했다.

💡 상속과 프로토타입

ES2015부터 자바스크립트는 class 키워드를 지원한다. 하지만 이것은 문법적인 양념일 뿐이며 자바스크립트는 여전히 프로토타입 기반의 언어다. 프로토타입 기반의 언어는 객체 원형의 프로토타입을 복사하여 새로운 객체를 만들어낸다. 이는 객체를 확장하여 객체 지향 프로그래밍을 할 수 있도록 해준다.

상속 관점에서 자바스크립트의 유일한 생성자는 객체뿐이다. 각각의 객체는 [[Prototype]]이라는 은닉(private) 속성을 가지는데 이는 자신의 프로토타입이 되는 다른 객체를 가리킨다. 이것이 반복되다가 결국 null을 프로토타입으로 가지는 오브젝트에서 끝난다.

클래스와 프로토타입에 관련된 내용은 TIL 16일차 - [JS/Node] 객체 지향 JavaScript ⬅️ 여기에 자세히 적혀있다.

💡 일급 함수란?

프로그래밍 언어에서 어떤 대상이 일급이라는 것은 그 대상이 다음의 세 조건을 만족한다는 것을 뜻한다.

• 변수에 담을 수 있다.
• 인자로 전달될 수 있다.
• 반환 값으로 사용될 수 있다.

즉, 일급 함수는 프로그래밍 언어에서 값으로 다룰 수 있는 함수를 뜻한다. 함수를 변수에 담아 원할 때 호출할 수 있기 때문에 인자로서 다른 함수로 전달이 가능하며 리턴 값으로도 사용할 수 있다.

자바스크립트는 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter Language)이다. 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 인터프리터는 소스코드를 즉시 실행한다는 장점을 가지고 있는데, 모던 자바스크립트 엔진은 이를 결합하여 인터프리터의 느린 속도를 개선했다.

자바스크립트는 클래스 기반 객체지향 언어보다 효율적이고 강력한 프로토타입 기반의 객체 지향 언어로, 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

2.6 ES6 브라우저 지원 현황

• https://kangax.github.io/compat-table/es6/

위 페이지에서 브라우저별 ES6 지원 현황을 살펴볼 수 있다. 인터넷 익스플로러나 구형 브라우저는 대부분 ES6을 지원하지 않지만 이를 제외한 모던 브라우저는 96%~99%의 비율로 ES6을 지원하고 있다.

구형 브라우저를 사용하거나 브라우저에서 지원하지 않는 최신 기능을 사용할 때는 바벨(Babel)과 같은 트랜스파일러를 사용해 구현한 소스코드를 다운그레이드 해야 할 필요가 있다.

💡 트렌스파일러(Transpiler)란?

트렌스파일러는 같은 언어를 문법적으로 변환해주는 도구를 말한다. 컴파일러는 프로그래밍 언어를 머신 언어로 변형하여 언어 자체가 바뀌지만, 트렌스파일러는 같은 언어를 문법적으로만 변형한다.

놀랍게도 나는 이미 트렌스파일러를 사용해본 적이 있다! 바로 42gg 프로젝트에서 사용했던 TypeScript와 SASS다. 바벨은 자바스크립트의 버전을 변경해주는 트렌스파일러라면, TypeScript 트렌스파일러는 타입이 있는 자바스크립트에서 타입을 제거하고, SASS 트렌스파일러는 scss를 css로 변환해주는 것이다. 정말 놀랄노자다! 😮

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain