[Deep Dive] 02장 자바스크립트란?
1. 자바스크립트의 탄생
1995년 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 프로그래밍언어를 도입
→ 브렌던 아이크가 개발한 자바스크립트
2. 자바스크립트의 표준화
자바스크립트의 파생버전이 출시 (Jscript) → 이로인해 브라우저들 사이에서 *크로스 브라우징 이슈 발생 → 표준화된 자바스크립트의 필요성이 생김
* 크로스 브라우징
브라우저에 따라 호환성이 다르기 때문에 웹페이지의 기능들이 정상적으로 동작하지 않음!
- 1997년 7월 표준화된 자바스크립트 사양인 ECMAScript 1(ES1)이 완성
- 이후 ES2, ES3 ... 2020년 ES11로 크고 작은 기능들이 추가되어 발표됨
- 범용 프로그래밍 언어로써 필요한 여러 기능들이 도입된 2015년 ECMAScript(ES6)
| 버전 | 년도 | 특징 |
|---|---|---|
| ES6 | 2015 | let/const, 클래스, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당, 스프레드 문법, rest 파라미터, 심벌, 프로미스, Map/Set, 이터러블, for…of, 제너레이터, Proxy, 모듈 import.export |
3. 자바스크립트 성장과 역사
- Ajax
- 1999년 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 주고 받을 수 있는 통신 기능
- 기존의 웹페이지는 화면이 전환되면 전체 HTML을 받아 다시 랜더링
- Ajax등장 이후 변경할 필요가 없는 부분은 두고 필요한 데이터만 받아 해당 부분 랜더링 → 리소스 절약, 빠른 성능과 부드러운 화면전환이 가능
- jQuery
- DOM을 더욱 쉽게 제어할 수 있음
- 크로스 브라우징 이슈도 어느 정도 해결
- V8 자바스크립트 엔진
V8은 웹 브라우저 내부에서 자바스크립트 수행 속도의 개선을 목표로 처음 고안되었습니다. 속도 향상을 위해 V8은 인터프리터를 사용하는 대신 자바스크립트 코드를 더 효율적인 머신 코드로 번역합니다. 저스트인타임 컴파일러를 구현함으로써 코드를 실행 시에 자바스크립트 코드를 머신 코드로 컴파일하는데, 이는 스파이더몽키나 리노와 같은 현대적인 다른 자바스크립트 엔진에서도 마찬가지입니다. 주된 차이는 V8은 바이트코드와 같은 중간 코드를 생산하지 않는다는 점입니다.
- Node.js
- 브라우저 이외에도 자바스크립트를 작동시킬 수 있도록함
- 비동기I/O 지원, 단일스레드 이벤트 루프 기반(요청 처리 성능이 좋음)
- 백엔드까지도 다룰 수 있음
- SPA 프레임워크
- Single Page Application(SAP)
- Angular, React, Vue.js, Svelte …
SPA 구현을 쉽게 말하면 jsp파일 없이 index.html파일 하나에서 js, css등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념.
4. 자바스크립트와 ECMAScript
자바스크립트는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API(DOM, BOM, Canvas, XNLHttpRequest, fetch 등)을 아우르는 개념 (자바스크립트 > ECMAScript)
5. 자바스크립트의 특징
- 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
- 별도의 컴파일을 하지 않는 *인터프리터 언어
*인터프리터 언어
코드가 실행되는 단계인 런타임에 문 단위로 한줄씩 중간 코드인 바이트 코드로 변환한 후 실행
- 멀티 패러다임 프로그래밍 언어(명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍)
- 자바스크립트는 프로토타입 기반의 객체지행 언어
6. ES6 브라우저 지원 현황
해당 링크에서 자세히 볼 수 있다.
https://kangax.github.io/compat-table/es6/
몇몇 브라우저에서 자바스크립트의 최신기능을 지원하지 않을 수도 있기 때문에 *바벨(Babel)을 이용할 필요가 있다
*바벨(Babel)
ES6+ 버전의 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜준다. 바벨은 이렇게 추상화 수준을 유지한 채로 코드를 변화시키는 트랜스파일러의 역할을 한다.
이웅모 선생님의 모던 자바스크립트 Deep Dive를 공부하기 위해 정리한 글입니다.
혹시나 보시다가 고칠 부분이나 마음에 안드시는 부분이 있다면 말씀해주시면 감사하겠습니다!