[Chap 02] 자바스크립트란?
2.1 자바스크립트의 탄생
- 1995년, 웹 브라우저 시장 점유율 90%를 차지하던 넷스케이프 커뮤니케이션즈가
웹페이지의 보조적 기능 수행을 위해 개발한 경량 프로그래밍 언어
- 이름의 변천사 : 모카(Mocha) ➔ 라이브그크립트 (LiveScript) ➔ 자바스크립트(JavaScript)
- 자바스크립트 탄생 이후 자바스크립트 파생 버전인 JScript가 출시되어 자바스크립트는 위기를 맞게 됨
2.2 자바스크립트의 표준화
JScript와 자바스크립트는 표준화되지 못하고 적당히 호환되었음
➔ 각 회사는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하기 시작함
➔ 브라우저에 따라 웹페이가 정상적으로 동작하지 않는 크로스 브라우징 이슈 발생
➔ 표준화된 자바스크립트의 필요성 대두
➔ 컴퓨터 시스템의 표준을 관리하는 ECMA 인터내셔널에 자바스크립트의 표준화 요청
➔ 1997년, ECMA-262라 불리는 표준화된 자바스크립트 초판 완성
➔ 상표권 문제로 자바스크립트는 ECMAScript로 명명
| 버전 | 출시 연도 | 특징 |
| ES1 | 1997 | 초판 |
| ES2 | 1998 | ISO/IEC 16262 국제 표준과 동일한 규격을 적용 |
| ES3 | 1999 | 정규 표현식, try ...catch |
| ES5 | 2009 | HTML5와 함께 출현한 표준안 JSON, strict mode, 접근자 프로퍼티, 프로퍼티 어트리뷰트 제어, 향상된 배열 조작 기능(forEach, map, filter,reduce, some, every) |
| ES6 (ECMAScript 2015) |
2015 | let/const, 클래스, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당, 스프레드 문법, rest 파라미터, 심벌, Promise, Map/Set, for...of, 제너레이터, Proxy, 모듈 import/export |
| ES7 (ECMAScript 2016) |
2016 | 지수(**)연산자, Array.prototype.includes, String.prototype.includes |
| ES8 (ECMAScript 2017) |
2017 | async/await, Object 정적 메서드(Object.values, Object.entries, Object.getOwnPropertyDescriptors) |
| ES9 (ECMAScript 2018) |
2018 | Object rest/spread 프로퍼티, Promise.prototype,.finally, async generator, for await .. of |
| ES10 (ECMAScript 2019) |
2019 | Object.fromEntries, Array.prototype.flat, Array.prototype.flatMap.optional catch binding |
| ES11 (ECMAScript 2020) |
2020 | String.prototype.matchAll. BigInt, globalThis, Promise.allSettled, null 병합 연산자, 옵셔널 체이닝 연산자, for...in enumeration order |
2.3 자바스크립트 성장의 역사
초창기
➔ 자바스크립트는 한정적인 용도로 사용됨
➔ 대부분의 로직은 웹 서버에서 실행
➔ 브라우저는 서버에서 전달받은 HTML,CSS를 단순 렌더링
2.3.1 Ajax
1999년, 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터 교환 통신 기능인 Ajax 등장
Ajax 등장 이전의 웹페이지 - 완전한 HTML 코드를 서버에서 전달받아 웹페이지 전체를 처음부터 다시 렌더링
- 화면 전환 시 깜박이는 현상 발생 및 이를 웹페이지의 한계로 인식
Ajax 등장 이후의 웹페이지 - 변경할 필요가 없는 부분은 다시 렌더링하지 않음
- 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링
➔ 웹 브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환 가능
Ex.) 2005년 구글 맵스는 웹프로그래밍 언어로서 자바스크립트의 가능성 확인 계기가 됨
➔ 웹 브라우저에서 자바스크립트와 Ajax를 기반으로 동작하는 구글 맵스가 데스크톱 애플리케이션과 비교했을 때 손색이 없는 부드러운 화면 전화 효과 보여줌
2.3.2 jQuery
2006년, jQuery의 등장으로 간편한 DOM 제어 및 크로스 브라우징 이슈 어느정도 해결
➔ 배우기 까다로운 자바스크립트보다 배우기 쉽고 직관적인 jQuery를 선호하는 개발자가 양상되기도 함
2.3.3 V8 자바스크립트 엔진
- 구글 맵스를 통해 웹 애플리케이션 프로그래밍 언어로서의 가능성 확인
- 자바스크립트로 웹 애플리케이션을 구축하려는 시도
- 더욱 빠르게 동작하는 자바스크립트 엔진의 필요성 대두
V8 자바스크립트 엔진의 등장
➔ 자바스크립트는 데스크톱 애플리케이션과 유사한 UX를 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착
➔ 웹 서버에서 수행되던 로직들이 대거 클라이언트로 이동 및 웹 애플리케이션 개발에서 프런트엔드 영역이 주목받는 계기가 됨
2.3.4 Node.js
Node.js
- 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
- 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경임
- 프런트엔드와 백엔드에서 자바스크립트를 사용할 수 있다는 동형성은 별도의 언어를 학습하기 위한 시간을 덜 수 있음
- 비동기 I/O지원 및 단일 스레드 이벤트 루프 기반으로 동작하여 요청 처리 성능이 좋음
2.3.5 SPA 프레임워크
- 모던 웹 애플리케이션은 데스크톱 애플리케이션과 같은 성능 및 UX 제공이 필수적이고, 더불어 개발 규모와 복잡도 상승
➔ 이러한 요구에 맞게 CBD(Component based development)방법론 기반의 SPA(Single Page Application)의 대중화
➔ Angular, React, Vue.js, Svelte 등의 다양한 프레임워크/라이브러리의 사용자 보유
2.4 자바스크립트와 ECMAScript
ECMAScript
- 자바스크립트의 표준 사양인 ECMA-262 의미
- 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법 규정
자바스크립트
- 프로그래밍 언어의 기본 뼈대인 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API를 아우르는 개념
- 즉, DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, WebStorage, Web Component, Web Worker 등을 포함 하는 개념
2.5 자바스크립트의 특징
( 1 ) 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
( 2 ) 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어