[모던 자바스크립트 Deep Dive] 02장. 자바스크립트란?

윤상준·2022년 10월 5일
0
post-thumbnail

2.1 자바스크립트의 탄생

1995년 웹페이지의 보조적인 기능을 수행하기 위해, 브라우저에서 동작하는 경량 프로그래밍 언어로 시작했다.

2.2 자바스크립트의 표준화

Netscape CommunicationsMicrosoft의 경쟁으로 서로 다른 브라우저 스크립트 언어가 도입.

크로스 브라우징 이슈가 발생하기 시작했다.

** 크로스 브라우징 (Cross Browsing) 이슈 **
브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 이슈.

ECMAScript

** ECMAScript **
1996년 11월, ECMA International에서 발표한 표준화된 자바스크립트.

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

초창기

웹페이지의 보조적인 기능 수행을 위한 한정적인 용도.

대부분의 로직은 웹 서버에서 실행.
브라우저는 서버로부터 전달받은 HTML, CSS를 주로 렌더링.

** 렌더링 (Rendering) **
HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것.

Ajax (Asynchronous JavaScript and XML)

** Ajax (Asynchronous JavaScript and XML) **
자바스크립트를 이용해 브라우저가 비동기 (Asynchronous)적으로 데이터를 교환할 수 있는 통신 기능.

1999년, XMLHttpRequest라는 이름으로 등장.

이전까지 웹페이지는 완전한 HTML 코드를 서버로부터 전송 받아 웹페이지 전체를 렌더링하는 방식으로 동작했다.

이런 방식은 다음과 같은 문제점이 있었다.

  • 화면 전환시 서버로부터 새로운 HTML을 전송 받아 웹페이지 전체를 새로 렌더링.
  • 변경할 필요가 없는 부분도 포함되어있기 때문에 불필요한 데이터 통신 발생.
  • 변경할 필요가 없는 부분도 포함되어있기 때문에 성능 저하.
  • 처음부터 다시 렌더링하기 때문에 화면 전환 시 깜빡임 현상 발생.

Ajax의 등장

웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식.

구글 맵스 (Google Maps)

jQuery

DOM을 더욱 쉽게 제어할 수 있고, 크로스 브라우징 이슈도 어느 정도 해결되었다.

V8 자바스크립트 엔진

2008년 구글이 발표한 자바스크립트 엔진.

더욱 빠르게 동작하는 자바스크립트 엔진이 필요해져서 등장.

이 시점부터 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자 경험 (UX)를 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착.

과거 웹 서버에서 실행되던 로직이 대거 클라이언트로 이동했고, 웹 프론트엔드 영역이 주목받기 시작했다.

Node.js

** Node.js **
구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 (Runtime Environment)

자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 하는 실행 환경.

주로 서버 사이드 애플리케이션 개발에 사용.

모듈, 파일 시스템, HTTP 등의 빌트인 API를 제공.

비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작한다. (SPA에 적합)

SPA (Single Page Application) 프레임워크

** SPA (Single Page Application) **
CBD (Component Based Development) 방법론을 기반으로 하는 어플리케이션

React, Angular, Vue.js, Svelte 등등.

2.4 자바스크립트와 ECMAScript

** ECMAScript **

  • 자바스크립트의 표준 사양인 ECMA-262를 의미.
  • 프로그래밍 언어의 값, 타입, 객체, 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정.

** 자바스크립트 (JavaScript) 란 **
프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript.
브라우저가 별도로 지원하는 클라이언트 사이드 Web API (DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimatinoFrame, SVG, Web Storage, Web Component, Web Worker) 를 모두 아우르는 개념.

2.5 자바스크립트의 특징

웹 브라우저에서 동작하는 유일한 프로그래밍 언어

인터프리터 언어 (Interpreter Language)

별도의 컴파일 작업이 필요 없다.

대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합했다.

  • 인터프리터 : 소스 코드를 즉시 실행.
  • 컴파일러 : 빠르게 동작하는 머신 코드를 생성하고 최적화.

멀티 패러다임 프로그래밍 언어

명령형 (Imperative), 함수형 (Functional), 프로토타입 기반 (Prototype-based) 객체 지향 프로그래밍 등을 지원한다.

2.6 ES6 브라우저 지원 현황

인터넷 익스플로러 또는 구형 브라우저는 ES6를 대부분 지원하지 않는다.

따라서 바벨 (Babel)과 같은 트랜스파일러를 사용할 필요가 있다.

profile
하고싶은건 많은데 시간이 없다!

0개의 댓글