2.1 자바스크립트의 탄생
- 1990년대 Netscape Communications의 웹 브라우저에 탑재하기 위해 개발된 언어
-> 현재 모든 브라우저에서 사용되는 프로그래밍 언어
2.2 자바스크립트의 표준화
- Netscape Communications VS Microsoft의 경쟁으로 인한 크로스 브라우징 이슈 발생
-> 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성이 대두됨
-> ECMA International에서 ECMAScript 출시 - 2015년에 공개된 ES6는 범용 프로그래밍 언어가 갖춰야 할 기능들을 대거 도입함
e.g.let/const,class,arrow function,template literal,destructuring assignment,spread syntax,Rest paramter,symbol,promise,Map/Set,iterable,for ... of,generator,Proxy,module import/export...
2.3 자바스크립트 성장의 역사
- 초기: 웹 페이지의 보조적인 기능을 위해 한정적으로 사용됨. 브라우저는 단순히 서버로부터 전달 받은 HTML/CSS를 렌더링함
cf) 렌더링: HTML/CSS/JS 파일을 해석해서 브라우저에 시각적으로 출력하는 것
2.3.1 Ajax(Asynchronous JavaScript and XML)
JS를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
- 이전: 유저와의 상호작용 시 변경될 필요가 없는 부분까지 포함된 HTML 코드를 전달 받음
-> 불필요한 데이터 통신 발생, 전체 페이지 렌더링으로 인해 성능 저하/화면 전환 시 깜빡임 - 이후: 필요한 데이터만 전달 받은 후 변경돼야 할 부분만 렌더링
-> 성능 향상/부드러운 화면 전환
∴ 웹 어플리케이션의 불필요한 데이터 통신을 줄여 성능이 향상되고 부드러운 화면 전환이 가능해짐
2.3.2 jQuery
- 더욱 쉽게 DOM을 제어하고, 크로스 브라우징 이슈를 어느 정도 해결할 수 있게 됨
2.3.3 구글 V8 JS 엔진
- 빠른 성능 -> 클라이언트에서 처리하는 로직 증가
2.3.4 Node.js
구글 V8 JS 엔진으로 빌드된 JS 실행 환경(런타임 환경)
- 브라우저 외부에서 JS가 동작할 수 있게 됨
- 프론트엔드/백엔드 모두에서 JS 사용 -> JS가 웹 프로그래밍 언어의 표준으로 도약
2.3.5 SPA
- 좋은 성능과 UX를 제공할 수 있는 웹 어플리케이션을 위해 SPA가 대중화 되면서 다양한 SPA library/framework가 출시됨
2.4 자바스크립트와 ECMAScript
자바스크립트: ECMAScript와 브라우저가 제공하는 Web APIs를 아우르는 개념
ECMAScript: JavaScript의 표준 사양인 ECMA-262로, 핵심 문법을 규정함
-> 브라우저에 내장되는 JS 엔진은 ECMAScript를 준수하여 구현돼야 함
2.5 자바스크립트의 특징
- 브라우저에서 작동하는 유일한 프로그래밍 언어
- 인터프리터 언어로, 개발자가 별도의 컴파일 작업을 수행하지 않음
- 모던 브라우저에서는 일부 코드를 컴파일하고 실행함으로써 단점을 극복함
- but JS가 컴파일러 언어는 아님. 인터프리터가 필요하고, 런타임에 컴파일 되며, 실행 파일이 생성되지 않기 때문임
인터프리터 언어
코드가 실행되는 런타임에 한 줄 한 줄씩 바이트코드로 변환하고 즉시 실행하는 언어
cf) 바이트코드: 가상 머신이 이해할 수 있는 코드
- 인터프리트 과정과 실행 과정이 분리되어 있지 않음 -> 코드 실행 속도가 비교적 느림
- 실행 파일 생성 X
- 코드가 실행될 때마다 인터프리트 작업이 반복적으로 수행됨
컴파일러 언어
코드가 실행되기 전 컴파일 타임에 전체 코드를 기계어로 변환하는 언어
- 컴파일 과정과 실행 과정이 분리됨 -> 코드 실행 속도가 빠름
- 실행 파일 생성
- 코드가 실행되기 전에 컴파일 작업이 단 한 번만 수행됨
- 멀티 패러타임 프로그래밍 언어: 명령형, 함수형, 프로토타입 기반의 객체지향 프로그래밍을 지원함
cf) paradigm: 프로그래밍에 대한 관점
2.6 ES6 브라우저 지원 현황
- IE or 옛날 브라우저는 ES6를 지원하지 않음
-> Babel과 같은 transpiler를 통해 코드를 ES5 이하 버전으로 다운그레이드 해야 함
