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

자바스크립트의 탄생

---

• 1995년 웹페이지의 보조적인 기능을 수행하기 위해 탄생 (브라우저에서 동작하는 경량 프로그래밍 언어)
• 1996년 3월 모카 → 9월 라이브스크립트 → 12월 자바스크립트로 이름 변화

자바스크립트의 표준화

---

• 넷스케이프의 자바스크립트와 MS의 JScript가 있었는데, 넷스케이프와 MS 모두 자사 브라우저의 시장 점유율을 높이기 이해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하기 시작 ⇒ 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈 발생
• 1996년 11월 넷스케이프가 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA 인터내셔널에 자바스크립트의 표준화 요청 ⇒ 1997년 7월 자바스크립트는 ECMAScript로 명명

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

---

• 초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위한 용도로만 사용 됨
  • 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML과 CSS를 렌더링하는 수준

Ajax

• 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
  • 1999년에 XMLHttpRequest 라는 이름으로 등장
• 이전 웹페이지는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링 했음 ⇒ 화면 전환 시 새로운 HTML를 서버로부터 받아 웹페이지 전체를 처음부터 다시 렌더링
  • 불필요한 데이터 통신 발생 및 성능 면에서 불리 ⇒ 화면 전환 시 깜빡임 발생하여 웹페이지의 한계로 받아들여졌음
• Ajax의 등장으로 웹페이지에서 변경할 필요가 없는 부분은 렌더링하지 않고, 서버에서 필요한 데이터만 전달 받아 부분적으로 렌더링하는 방식이 가능해짐
• 구글 맵스 : 웹 애플리케이션 프로그래밍 언어로서 자바스크립트의 가능성을 확인하게 되는 계기 (2005년)

jQuery

• 다소 번거로웠던 DOM을 더욱 쉽게 제어할 수 있게 도와줌 (2006년 등장)
• 크로스 브라우징 이슈 어느정도 해결

V8 자바스크립트 엔진

• V8 자바스크립트 엔진의 등장으로 자바스크립트는 데스크탑 애플리케이션과 유사한 UX를 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 됨
• 웹 서버에서 수행되던 로직들이 대거 클라이언트로 이동 ⇒ 웹 애플리케이션 개발에서 프론트엔드 영역이 주목받는 계기

Node.js

• V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 (2009년 Ryan Dahl이 발표)
• 자바스크립트 엔진을 브라우저에서 독립시켜 브라우저 이외의 환경에서도 자바스크립트가 동작할 수 있도록 하는 자바스크립트 실행 환경
• 비동기 I/O 지원, 단일 스레드 이벤트 루프 기반으로 동작 ⇒ 요청 처리 성능이 좋아서 실시간 데이터 처리를 위해 입출력이 자주 발생하는 SPA에 적합
• Node.js의 등장으로 자바스크립트는 브라우저에서 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 프로그래밍 언어가 됨
• 자바스크립트는 크로스 플랫폼을 위한 중요한 언어로 주목받고 있음

SPA 프레임워크

• 개발 규모와 복잡도가 상승하면서 다양한 패턴과 많은 라이브러리가 등장해 개발에 많은 도움을 주었지만, 변경에 유연하면서 확장하기 쉬운 애플리케이션 아키텍처의 구축을 어렵게 함 → 프레임워크 등장
• 이러한 요구에 맞춰 CBD (컴포넌트 기반 개발) 방법론을 기반으로하는 SPA가 대중화됨
  • Angular, React, Vue.js, Svelte등 다양한 SPA 프레임워크/라이브러리 또한 많은 사용층 확보

자바스크립트와 ECMAScript

---

• ECMAScript
  • 자바스크립트의 표준 사양인 ECMA-262
  • 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법 규정
• 자바스크립트
  • ECMAScript + (브라우저가 지원하는) 클라이언트 사이드 Wep API
  • 클라이언트 사이드 Web API
    • DOM, BOM, Canvas, SVG, Web Storage 등
    • W3C에서 별도의 사양으로 관리

자바스크립트의 특징

---

• 웹 구성하는 요소들 중 하나로, 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
• 기본 문법 : C, 자바와 유사
• Self : 프로토타입 기반 상속
• Scheme : 일급 함수 개념 차용
• 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어컴파일러 언어 인터프리터 언어

  컴파일러 언어	인터프리터 언어
  코드 실행 전 컴파일 타임에 소스코드 전체를 한번에 머신 코드로 변환 후 실행	코드 실행 단계인 런타임에 문 단위로 한 줄식 중간 코드인 바이트 코드로 변환 후 실행
  실행 파일 생성	실행 파일 생성 X
  컴파일 단계와 실행 단계가 분리되어 있어, 명시적인 컴파일 단계를 거친 후 명시적으로 실행 파일을 실행	인터프리트 단계와 실행 단계 분리 X 한 줄씩 바이트 코드로 변환하고 즉시 실행
  실행에 앞서 컴파일은 단 한번 수행	코드가 실행될 때마다 인터프리트 과정 반복 수행
  컴파일과 실행 단계가 분리되어 있어 코드 실행 속도가 빠름	인터프리트 단계와 실행 단계가 분리되어 있지 않고 반복 수행되어 코드 실행 속도가 비교적 느림

  • 대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합 ⇒ 비교적 처리 속도가 느린 인터프리터의 단점 해결
• 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
  • 클래스, 상속, 정보 은닉을 위한 키워드가 없어 객체지향 언어가 아니라는 오해를 받지만, OOP (객체지향 프로그래밍)의 기본 특징인 캡슐화, 상속화, 다형성을 구현할 수 있기 때문에 객체지향 언어가 맞음
  • 프로토타입 기반 객체지향 언어

ES6 브라우저 지원 현황

---

• 인터넷 익스플로러나 구형 브라우저는 ES6를 지원하지 X
  • 바벨같은 트랜스파일러를 사용해 ES6 이상의 사양으로 구현한 소스코드를 ES5 이하의 사양으로 다운그레이드