[JS] 모던 자바스크립트 Deep Dive 01

모던 자바스크립트 Deep Dive

최근 느슨해진 본업 모먼트 기강을 잡기 위해 자세를 고쳐 잡고 엉덩이에 무게감을 더했다.
알고 있는 내용이든 모르는 내용이든 주기적으로 시야 범위에 노출시켜 누군가 나에게 물어볼 때면 척수반사의 속도로 대답할 수 있길.

첫날인 만큼 가볍게 2장까지만의 내용을 복기한다.

1. JS의 태생적 특징

 손이 덜 가게끔 설계되어 있는 JS는 엔진 내부에서 암묵적으로 처리하는 기능이 오히려 내부 동작을 이해하기 어렵게 만들 수도 있다.
 웹페이지의 단순한 보조 기능을 처리하기 위해 제한적인 용도를 목적으로 태어났기 때문인데 책을 읽으며 ‘앨리스의 토끼굴’에 빠지지 않도록 키워드 중심의 학습으로 의도적인 연습을 통해 무엇을 알고 무엇을 모르는 상태인지 객관화가 필요하다.

앨리스의 토끼굴: 파고들수록 이해가 필요한 또 다른 개념이 생겨 학습 방향과 떨어지는 현상(과도한 몰입/본래 목적 상실/기초와 무관한 심화 지식에 갇히는 등)

Node.js

 구글 *V8 JS 엔진으로 빌드된 JS 렌더링 환경.(Node.js 환경에서 동작하는 앱은 JS사용)
브라우저의 JS엔진에서만 동작하던 JS를 브라우저 이외의 환경에서도 동작하도록 JS엔진을 브라우저에서 분리시킨 JS실행환경.
 비동기 I/O 지원, 단일 스레드, 이벤트 루프 기반 동작으로 요청 처리에 대한 그립감이 좋다!(리센느 화이팅 실시간 데이터 처리를 위해 I/O가 빈번하게 일어나는 SPA에 적합)
CPU 사용률이 높은 애플리케이션에는 권장X(single threaded event loop..)

CBD(Component Based Development)

 컴포넌트 기반 개발의 SPA 대중화.

JS와 ECMAScript

 JS의 표준 사항인 ECMA-262를 뜻하는 ECMAScript는 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법 규정. 각 브라우저 제조사는 ECMAScript 사양을 준수해 브라우저에 내장되는 JS엔진 구현.
 외 ECMAScript와 브라우저가 별도 지원하는 r클라이언트 사이드 Web API(DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, *Web Component, *Web Worker 등)를 아우르는 개념.
 클라이언트 사이드 Web API는 ECMA와 별도로 월드 와이드 웹 컨소시엄에서 별도 사양으로 관리(MDN-Web API)

JS특징

 웹 브라우저에서 동작하는 유일한 프로그래밍 언어, 셀프에서는 프로토타입 기반 상속, *Scheme에서는 일급 함수의 개념 차용. 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어.  명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어(→프로토타입 기반 객체지향 언어ㅋㅋ)

용어 정리

☑️ AJAX: JS를 이용해 서버-브라우저 간 비동기 데이터 교환(2005년 구글맵스 사례 Good)
  -. 완전한 HTML코드를 전송받아 웹페이지 전체를 렌더링하던 기존 방식은 갱신이 필요없는 부분까지 리렌더링(성능/효율 ↓, 화면 플리킹)
☑️ JQUERY: DOM을 더욱 쉽게 제어
☑️ V8 JS 엔진: 구글이 만든 더 빠른 JS 실행엔진.(향상된 UX 제공)
  -. 웹 서버에서 수행되던 로직들이 대개 클라이언트로 이동
☑️ Node.js: 구글 V8 JS 엔진으로 빌드된 JS 실행환경(브라우저 밖에서도 JS 실행 가능)
  -. 비동기 I/O, 단일 스레드, 이벤트 루프 기반 동작으로 요청 처리에 유리(CPU 사용률 높은 애플리케이션에는 비권장)
☑️ Web Component: 재사용 가능한 커스텀 엘리먼트를 만들 수 있게 해주는 브라우저 표준 API 모음(Custom Elements, Shadow DOM, HTML Template 등)
☑️ Web Worker: 메인 스레드와 별도로 백그라운드에서 스크립트를 실행시켜주는 브라우저 API(UI 블로킹 없이 무거운 연산 처리 가능)
☑️ Scheme: 함수를 값처럼 다루는 일급 함수 개념을 갖춘 Lisp 계열 함수형 프로그래밍 언어(JS가 이 개념을 차용)
☑️ 컴파일러 언어 vs 인터프리터 언어: 컴파일러 언어는 실행 전 소스 전체를 기계어로 변환(컴파일)한 뒤 실행, 인터프리터 언어는 소스를 한 줄씩 해석하며 즉시 실행