자바스크립트 모던 딥 다이브 스터디

(부제: 스터디가 폭파되어 나혼자 하는 스터디가 되었다. 스터디는 왜 항상 폭파가 되는가?) (나도 혼자 읽는 게 편...해.... ㅠㅠ)

1. 자바스크립트

1.1 자바스크립트는 왜 생겼는가?

1995년 넷스케이프 커뮤니케이션즈의 브렌던 아이크가 넷스케이프 내비게이터2의 웹 페이지에 동적인 기능을 추가하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하자고 제안했다.
이를 수용한 넷스케이프 커뮤니케이션즈는 브렌던 아이크를 중심으로 모질라 재단을 설립하고, 넷스케이프 내비게이터2에 탑재할 프로그래밍 언어를 개발하기 시작했다.
넷스케이프 내비게이터2에 탑재할 프로그래밍 언어는 웹 페이지의 보조적인 기능을 수행하기 위해 설계된 경량 프로그래밍 언어로서, 웹 페이지의 제어를 담당할 클라이언트 사이드 스크립팅 언어로서의 성격이 강했다.
결론 : 넷스케이프 커뮤니케이션즈와 마이크로소프트는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 경쟁적인 기능을 추가했다.

1.2 자바스크립트는 왜 표준화가 되었는가?

1996년 3월, 넷스케이프 커뮤니케이션즈는 자바스크립트를 ECMA 인터내셔널에 표준화를 요청했다.
[Why / 필요성] 각 브러우저에 따라 웹 페이지가 정상적으로 동작하지 않는 '크로스 브라우징 이슈'가 발생해서, 모든 브라우저에서 동작하는 웹페이지를 개발하기가 어려웠다.
이후 ECMA-262 사양이 등장했고, 자바스크립트는 ECMA-262 사양을 준수하는 범용 스크립팅 언어가 되었다.
ECMA-262 사양은 자바스크립트의 표준 사양이자 자바스크립트 엔진의 표준 사양이다.
자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터를 말한다.
자바스크립트 엔진은 자바스크립트 코드를 평가하고 실행한다.
자바스크립트 엔진은 자바스크립트 코드를 실행하기 위해 자바스크립트 코드를 인터프리터 또는 JIT(Just-In-Time) 컴파일러에 의해 기계어로 변환한다.

1.3 자바스크립트는 지금까지 어떻게 성장 해 왔는가?

초기 자바스크립트는 웹 페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었는데, 주요 로직은 웹 서버에서 실행되고 브라우저에서는 html과 css를 렌더링 하는 수준이었다.
자바스크립트는 웹 브라우저에서만 동작하는 언어였지만, 2009년 구글이 V8 자바스크립트 엔진을 탑재한 오픈 소스 웹 브라우저인 크롬을 출시하면서 자바스크립트는 웹 브라우저에서만 동작하는 언어에서 벗어나 서버 사이드 애플리케이션 개발, 모바일 애플리케이션 개발, 데스크톱 애플리케이션 개발, 게임 개발, 데이터베이스 관리 등 다양한 분야에서 활용되는 범용 프로그래밍 언어로 성장했다.
자바스크립트는 웹 브라우저에서만 동작하는 언어에서 벗어나 범용 프로그래밍 언어로서의 성장을 이루었다.

Time Line

Ajax : 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹 페이지를 동적으로 갱신하는 프로그래밍 방식이다.
jQuery : 다소 번거로웠던 Dom을 더욱 쉽게 제어할 수 있었고, 크로스 브라우징 이슈가 많이 해결 되는 계기가 되었다.
V8 자바스크립트 엔진 : 자바스크립트의 성능을 비약적으로 향상시켰다. 더욱 빠르게 동작하는 웹 애플리케이션을 구현할 수 있게 되었다. V8 자바스크립트 엔진으로 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동했고, 프론트엔드의 영역이 주목받기 시작했다.
Node.js : V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다. 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다. 비동기 I/O를 지원하며, 단일 스레드 이벤트 루프 기반으로 동작하여 처리 성능이 좋다. 따라서 데이터를 실시간으로 처리하기 위한 SPA 개발에 적합하다. 하지만, CPU 사용률이 높은 애플리케이션의 경우 싱글 스레드라는 점에서 단점이 될 수 있다ㅠㅠ
SPA 프레임워크 : 모던 웹 어플리케이션은 데스크톱 어플리케이션과 비교해도 떨어지지 않는 성능과 경험을 제공하게 되면서 개발 규모와 복잡도가 상승했다. 이전의 개발 방식으로는 이러한 복잡도를 해결하기 어려워졌고, 이에 따라 SPA 프레임워크가 등장하게 되었다. SPA는 유연하고 확장하기 쉬운 어플리케이션의 아키텍처를 구축하도록 도와주는 프레임워크이다.

1.4 프로그래밍 언어적 특징

기본적으로 C, 자바언어의 문법과 유사하고, 셀프에서 프로토타입 기반의 상속을, 스킴에서 일급 함수의 개념을 차용했다.
자바스크립트는 객체 기반의 스크립팅 언어이며 동적언어이다.
개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어로, 타입을 명시 할 필요가 없다.
인터프리터 언어는 소스코드를 실행하는 즉시 컴파일링과 실행이 진행된다.
자바스크립트 엔진(크롬의 V8, 파이어폭스의 스파이더몽키, 사파리의 javascriptCore, 엣지의 차크라)은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리속도가 느린 인터프리터의 단점을 해결했다. (인터프리터는 소스코드를 즉시 실행하고, 컴파일러는 빠르게 소스코드를 기계어로 변환하는 과정을 거치고 생성한다.) 이를 통해 컴파일 단계에서 추가적인 시간이 필요함에도 더 빨리 코드를 실행할 수 있다.
컴파일러 VS 인터프리터
자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.

2. 자바스크립트 개발 환경과 실행 방법

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 브라우저 뿐만 아니라 Node JS도 자바스크립트 엔진을 포함하고 있다.
따라서 브라우저에서 동작하는 코드는 Node JS에서도 동일하게 동작한다.
하지만, 브라우저와 Node JS는 용도가 다르다.
브라우저는 웹 클라이언트로써 사용자가 HTML 문서를 통해 서버에 요청한 결과를 보여주는 클라이언트이다. 즉, HTML과 CSS, 잡스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링 하는 것이 주된 목적.
Node JS는 브라우저 외부에서 자바스크립트를 실행할 수 있는 런타임 환경이다. 즉, 브라우저에서만 실행할 수 있는 자바스크립트를 브라우저 이외의 환경에서도 실행할 수 있도록 독립시킨 자바스크립트 실행 환경이다.
따라서, Node JS에서는 기본적으로 브라우저가 제공하는 DOM API를 제공하지 않는다. (웹 크롤링을 할 때, 서버 환경에서는 DOM API를 제공하지 않기 때문에 cheerio 같은 DOM 라이브러리를 사용해 HTML 문서를 처리한다.)
반대로, Node JS에서는 파일을 생성하고 수정할 수 있는 파일 시스템을 기본 제공하지만, 브라우저에서는 이를 지원하지 않는다. (비슷하게 Web API에서 제공하는 File API를 사용하긴 한다.)