모던자바스크립트 Deep Dive_02장

김민성·2023년 7월 13일
모던자바스크립트 Deep Dive

모던자바스크립트 Deep Dive 뽀개기

목록 보기
1/6

이 글은 이응모 님의 모던자바스크립트 Deep Dive 2장을 기반으로 제 생각들 덧붙여 작성하였습니다.

인용 글은 별도의 표기방식을 사용하였습니다.

02장 자바스크립트란?

2.1 자바스크립트의 탄생

1995년, ... 넷스케이프 커뮤니케이션즈는 웹 페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정한다. 그래서 탄생한 것이 바로 브렌던 아이크 가 개발한 자바스크립트다.

자바스크립트가 등장하기 전 웹페이지는문서를 공유하기 위해 존재했습니다. 자바스크립트는 정적인 웹페이지를 동적으로 만들기 위해 등장했습니다.

2.2 자바스크립트의 표준화

이번 장은 자바스크립트의 표준화를 위한 ECMAScript 버전들이 등장하게 된 배경을 연도순으로 소개합니다.

1996년 8월, 마이크로소프트 는 자바슼크립트의 파생 버전인 JScript를 인터넷 익스플로러 3.0에 탑재했다. 그런데 문제는 JScript와 자바스크립트가 표준화되지 못하고 적당히 호환 되었다는 것이다.
... 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했고 ...
1996년 11월 넷스케이프 커뮤니케이션즈는 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA 인터내셔널에 자바스크립트의 표준화를 요청한다.
1997년 7월, ECMA-262라 불리는 표준화된 자바스크립트 초판(ECMAScript 1) 사양이 완성되었고 상표권 문제로 자바스크립트는 ECMAScript로 명명되었다.
...
2015년 에 공개된 ECMAScript 6(ECMAScript 2015, ES6)는 ... 범용 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입하는 큰 변화가 있었다.

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

여기서 자바스크립트의 성장은 초창기 HTML과 CSS를 단순 렌더링한 수준에서 현재 크로스플랫폼을 위한 언어로서 각광받는 수준까지 활용성의 확장을 의미한다고 생각합니다.

2.3.1 Ajax

1999년 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 XMLHttpRequest라는 이름으로 등장했다.

Ajax는 그 자체로서 기능이 있는 것이 아니라, 기존에 존재하는 기술들(HTML or XHTML, CSS, JavaScript, DOM, XML, XSLT, 그리고 중요한 XMLHttpRequest 객체)을 함께 사용하는 접근방법입니다.

Ajax 등장 전 웹페이지는 HTML 전체 코드를 서버로부터 받아와 전체를 처음부터 렌더링하는 방식을 사용했습니다. 이로인해 불필요한 데이터통신 이 발생하고 서버로 코드를 받아오기에 화면 전환시 순간적으로 깜빡이는 현상 이 발생했습니다.

위 그림은 Ajax의 등장 전후 통신방식의 차이를 보여줍니다. 'Ajax engine'이 추가되었을때에는 javascript call에 따라 원하는 부분만 서버로 통신받아오기에 불필요한 데이터 통신이 줄어듭니다.

그리고 Ajax는 비동기적이라는 특징을 갖고있기에 끊김없이 소통하게 되고 이로인해 이전의 순간적으로 깜빡이는 현상도 사라지게됩니다.

이로써 웹 브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환이 가능해졌다.

이는 2005년 Ajax를 기반으로 작동하는 구글 맵스로 입증되었습니다.

2.3.2 jQuery

2006년, jQuery의 등장으로 다소 번거롭고 논란이 있던 DOM을 더욱 쉽게 제어할 수 있게 되었고 크로스 브라우징 이슈도 어느정도 해결되었다.

jQuery의 등장으로 javascript는 웹 개발의 편의성 측면에서 성장했습니다. javascript의 표준화가 실현되지 못했던 시대에 jQuery는 많은 문제를 해결해주었기에 개발자들에게 한 줄기 빛과 같았을 것입니다.

이런 말 하는게 슬프지만 jQuery가 javascript를 대체하지는 않는다. jQuery가 성공한 것은 DOM이 문제가 많다는 증거일 뿐이다.

jQuery 창시자인 존 레식이 말한 것처럼 jQuery는 javascript의 대체품이 아닌 도구일 뿐이었습니다. 현 시대에는 jQuery가 활용될 문제들이 해결되었으며 React, View등 개발 편의성을 돕는 다른 도구들이 많기에 jQuery는 사장되어가고 있습니다.

2.3.3 V8 자바스크립트 엔진

V8 is the JavaScript engine i.e. it parses and executes JavaScript code.

From a technical standpoint, most modern JavaScript interpreters actually use a technique called just-in-time compiling to improve performance; the JavaScript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible.

V8 자바스크립트 엔진은 자바스크립트 코드를 파싱하고 실행하는 자바스크립트 엔진 중 하나로서 JIT 컴파일 방식을 활용하여 성능을 향상시켰습니다.

JIT 컴파일 방식

JIT 컴파일(just-in-time compilation) 또는 동적 번역(dynamic translation)은 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법이다.

실제 실행하는 시점에서 작동한다는 점에서는 인터프리터 방식을 기계어로 번역한다는 점에서는 컴파일 방식의 장점을 혼합한 방식입니다. 단순 인터프리터 방식이었던 JavaScript에 컴파일 방식을 결합하여 성능이 향상된 것입니다.

2.3.4 Node.js

2009년 라이언 달이 발표한 Node.js는 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.
... Node.js는 ... 서버사이드 애플리케이션 개발에 주로 사용되며,
... 프론트엔드와 백엔드 영역에서 자바스크립트를 사용할 수 있다는 동형성은 별도의 언어를 학습하기 위한 시간을 덜 수 있다는 장점이 있다.

Node.js는 비동기 I/O를 지원하며 단일 스레드 이벤트 루프기반으로 동작함으로써 요청 처리 성능에 좋다. 따라서 Node.js는 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합하다.

비동기 I/O

When Node.js performs an I/O operation, like reading from the network, accessing a database or the filesystem, instead of blocking the thread and wasting CPU cycles waiting, Node.js will resume the operations when the response comes back

I/O란 Input/Output으로 데이터가 입출력되는 것을 의미합니다. 비동기 I/O는 요청(input)한 데이터가 응답으로 도착(output)하였을 때 작동이 재개되는 방식을 의미합니다.

단일 스레드 이벤트 루프

단일 스레드

Thread in computer science is the execution of running multiple tasks or programs at the same time. Each unit capable of executing code is called thread

스레드는 코드 연산을 수행하는 각각의 유닛을 의미합니다. 단일 스레드라는 의미는 연산하는 유닛이 하나 뿐이라는 것입니다.

A Node.js app runs in a single process, without creating a new thread for every request.

Node.js는 하나의 프로세스로 운영되며 단일 스레드로 작동합니다. 연산가능한 유닛이 하나이기에 효율적인 작업을 위해서 이벤트루프를 이용하여 비동기 I/O를 지원하는 것입니다.

This allows Node.js to handle thousands of concurrent connections with a single server without introducing the burden of managing thread concurrency, which could be a significant source of bugs.

2.3.5 SPA 프레임워크

모던 웹 애플리케이션은 ... 개발 규모와 복잡도도 상승했다.
... CBD(Component Based Development) 방법론을 기반으로 하는 SPA(Single-Page Application)가 대중화되면서 Angular, React, Vue.js, Svelte 등 다양한 SPA 프레임워크/라이브러리 또한 많은 사용층을 확보하고 있다.

SPA 프레임워크는 개발편의성 측면에서 JavaScript 성장에 기여하고 있습니다.

다만 SPA 프레임워크라 JavaScript의 정답이 아니기에 상황에 맞는 사용이 필요합니다.
모든 정적 리소스를 최초 접근 시 단 한번 다운로드하기에 규모가 큰 웹페이지는 적합하지 않습니다. 그리고 SEO(검색엔진 최적화)측면에서 하나의 페이지 URL로만 작동하기에 불리합니다.

2.4 자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준사양인 ECMA-262를 말하며, ... 핵심 문법을 규정한다.

JavaScript는 ... 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API ... 등을 아우르는 개념이다.

시작은 JavaScript입니다. 마이크로소프트의 JScript로 인해 크로스브라우징 문제가 발생했고 웹 개발언어의 표준화가 필요해서 만들어진 것이 ECMAScript입니다. JavaScript는 브라우저에서 제공하는 Web API까지 포함하는 개념입니다.

2.5 자바스크립트의 특징

자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.

자바스크립트는 욕심쟁이입니다. 하나의 패러다임에 갇혀있지않고 다양한 패러다임의 특징을 결합하여 ECMAScript로 표준화하고 있습니다. 그래서 JavaScript는 평생 공부해야하나봅니다.

다양한 패러다임은 따로 공부하고 블로그를 작성하겠습니다.

2.6 ES6 브라우저 지원 현황

브라우저에서 아직 지원하지 않는 최신 기능을 사용하거나 인터넷 익스플로러나 구형 브라우저를 고려해야 하는 상황이라면 바벨(Babel)과 같은 트랜스파일러를 사용해 ES6 이상의 사양으로 구현한 소스코드를 ES5 이하의 사양으로 다운그레이드할 필요가 있다.

JavaScript의 기술이 발달하더라도 그 환경인 브라우저가 지원하지 않는다면 의미가 없습니다. 그러므로 최신기술을 사용할 때에는 지원현황을 살펴보고 다운그레이드가 필요하다면 트랜스파일러를 사용해야 할 것입니다.

느낀점

스터디원들과 책의 내용을 깊게 파보자면서 시작한 북스터디... 수동적인 정보수용에서 능동적인 정보수집을 거치니 머리에 남는 것이 많았습니다. 현재 자바스크립트의 모습이 어떻게 형성되어왔는지를 공부할 수 있어서 좋았으며 앞으로 변화하는 모습에 유의하고 공부해야겠습니다.

참고자료

profile
김민성
'WHY'를 묻고 reason을 공부하는 개발외ㅓ인
다음 포스트

원시 값과 객체를 비교해보세요.(딥다이브 11장)

0개의 댓글