02. 자바스크립트란?
2.1 자바스크립트의 탄생
1995년 넷스케이프 커뮤니케이션(Netscape communications)의 개발자인 브랜던 아이크(Brendan Eich)는 웹페이지의 보조적인 기능을 수행하기 위해 자바스크립트를 개발하였다.
1996년 3월 넷스케이프 내비게이터의 2에 탑재가 되었고 "모카(Mocha)"로 명명되었으며, 그러다 그해 9월 "라이브스크립트(LiveScript)"로 이름이 바뀌었다가 12월에 "자바스크립트(JavaScript)"로 최종명명되었다.
2.2 자바스크립트의 표준화
1996년 8월, 마이크로소프트는 인터넷 익스플로러 3.0에 "JScript"를 탑재했고 이로 인해 자바스크립트와 JScript간의 호환성 문제가 발생하였다. 넷스케이프와 마이크로소프트간의 자사간의 브라우저 점유율을 올리기 위한 기능 추가 문제였다.
이로 인해 크로스 브라우징 이슈가 발생하였다.
이 때문에 1997년 7월, 비영리 표준화 기구인 ECMA 인터내셔널에서 ECMAScript라는 표준화된 자바스크립트를 공개하였다.
2.3 자바 스크립트의 성장의 역사
초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위한 용도로 사용되었다. 그래서 대부분의 로직은 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준의 SSR방식이였다.
여기서 발생하는 궁금한점? (추후 게시 예정)
- SSR과 CSR의 차이와 장단점
- 왜 옛날에는 SSR밖에 안 썼을까?
- 크로스 브라우징 이슈란?
Ajax
자바스크립트를 이용해 서버와 브라우저가 비동기(Asynchrous) 방식으로 통신기능이다. XMLHttpRequest로도 불린다. 이전에 웹페이지는 html태그로 감싸진 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식의 SSR방식을 채택했다. 변경할 필요가 없는 부분까지 다시 서버로부터 전송을 받아야했기 때문에 성능면에서도 불리했다. 그러나 Ajax로 인해 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경할 부분만 한정적으로 렌더링하는 CSR방식이 가능해졌다. 이를 통해 SPA가 가능하게 된 시초이다.
JQuery
2006년 jQuery의 등장으로 DOM을 더욱 쉽게 제어할 수 있게 되었고 크로스 브라우징 이슈도 어느정도 해결되었다. 또한 Ajax와의 호환성이 좋아 한동안 JQuery를 쓰는 개발자들이 많았었다.
V8 자바스크립트 엔진
구글에서 만든 엔진으로 V8 자바스크립트 엔진의 등장으로 인해 데스크톱 애플리케이션과 유사한 사용자 경험을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하였다. 또한 웹 서버에서 수행되었던 로직들이 브라우저로 이동하였고, 프론트엔드 영역이 주목받는 계기가 되었다. 현재 크롬이 V8 자바스크립트 엔진을 기반으로 움직이고 있다.
Node.js
자바스크립트를 브라우저 이외에서도 동작할 수 있도록 한 엔진이다. V8 자바스크립트 엔진으로 빌드된 런타임 환경이며, 서버 사이드 애플리케이션 환경에서 주로 사용되며, 내장 API를 제공한다.
Node.js는 자바스크립트 기반으로 작동하기 때문에 비동기 I/O를 지원하며 단일 스레드의 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다. 또한 데이터를 실시간으로 처리하기 위한 SPA에 적합한다. CPU 사용률이 높은 애플리케이션에는 권장하지 않는다.(싱글스레드로 인한 deadlock 때문에)
SPA 프레임워크
SPA로 인해서 예전과 비교하여 사용자 경험이 비교불가능할 정도로 좋아졌다. 이 과정 속에서 많은 패턴과 라이브러리가 출현했고 CBD방법론을 기반으로하는 SPA가 대중화 되었다. SPA 프레임워크/라이브러리 기준으로는 Angular, React, Vuejs, Svelete가 있다.
2.4 자바스크립트와 ECMAScript
넷스케이프에서 만든 자바스크립트는 현재 ECMA International에 소유권이 넘어가있는 상태이다. 그래서 우리가 쓰고 있는 현재 자바스크립트 언어는 ECMAScript를 기반으로 하고 있는 자바스크립트 언어이다.
그래서 현재 자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker등을 Web API를 아우르는 개념이다.
2.5 자바스크립트의 특징
사실상 이 챕터 안에서 제일 중요한 부분이지 않을까 싶다. (개인적인 생각입니다.)
자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 다른 기존의 프로그래밍 언어에서 많은 영향을 받았고 기본 문법은 C, 자바와 유사하고 Self에서 프로토타입 기반의 상속을, Scheme에서는 함수 개념을 차용했다.
자바스크립트는 인터프리터 언어이다. 위의 사진처럼 코드 한줄씩만 입력하더라도 바로바로 실행하며 결과를 확인하는 것이 가능하기에 인터프리터 언어에 해당하게 된다. 이는 자바스크립트가 만들어질 당시 웹문서 구조를 동적으로 나타내기 위해 제작된 언어이기에 가벼운 인터프리터 구조가 적합했기 때문이다. 현재 대부분의 모던 자바스크립트 엔진 (크롬 V8, 파이어폭스 SpiderMonkey, 사파리 JavaScriptCore, Edge Chakra)은 인터프리터와 컴파일러의 장점을 결합해 인터프리터의 단점인 비교적 느린 처리 속도를 해결하였다.
그렇다고 자바스크립트가 따로 별도의 과정없이 바로 컴퓨터가 실행가능한 것은 아니다. 자바스크립트가 인터프리터에 전해지기 일련의 과정을 거쳐야 한다.
자바스크립트의 구동원리
위의 사진 처럼 자바스크립트는 모니터 화면에 보여지기 전에 바이트 코드로 변환이 되고 이를 가상머신이 받아 기계어로 변환이 된다.
자바스크립트의 구동원리에 대해서는 추후에 자세하게 다뤄볼 예정이다.
참고 자료
SSR과 CSR의 차이 및 장단점
https://solo5star.tistory.com/44
