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

2.1 자바스크립트의 탄생

• 넷프케이트 커뮤니케이션즈 개발
• 웹페이지의 보조적인 기능을 수행하기 위해 만들어진 브라우저에 동작하는 경량 프로그래밍 언어로 시작

2.2 자바스크립트의 표준화

• 크로스 브라우징 이슈
  • 마이크로소프트가 개발한, 자바스크립트의 파생 버전 JScript가 자바스크립트와 호환되지 못해서 브라우저에 따라 웹 페이지가 제대로 동작하지 않는 경우 발생
  • 자바스크립트 표준화 필요성 대두
• ECMAScript
  • ECMA 인터내셔널에서 정한 자바스크립트의 표준
    • European Computer Manufacturers Association

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

• 초기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위한 한정적 용도로만 사용
• 브라우저는 HTML과 CSS를 렌더링하는데에 그침
  • 렌더링: HTML, CSS, 자바스크립트로 작성된 문서를 해석해 브라우저에 시각적으로 출력하는 것

2.3.1 Ajax

• Asynchronous JavaScript and XML
• XMLHttpRequest으로 사용
• 자바스크립트를 이용해 서버와 브라우저가 비동기적으로 데이터를 교환하는 통신 기능

기존의 문제

• 완전한 HTML 코드를 서버에서 전달 받아 웹페이지 전체를 렌더링
  • 화면이 바뀌면 처음부터 다시 렌더링
• 이는 바뀌지 않아도 될 부분의 HTML도 다시 받아오기 때문에 불필요한 데이터 통신을 만들고, 계속 처음부터 렌더링 해 성능적으로도 좋지 않음
  • 화면이 전환되면 화면이 깜박이는 현상 등

Ajax의 등장이 이러한 문제를 해결한다.

• 변경할 부분만 서버에서 데이터를 받아와 한정적으로 렌더링 가능
• 데스크톱 애플리케이션처럼 빠르고 부드러운 화면 전환이 가능해짐

2.3.2 jQuery

• DOM을 쉽게 제어하게 함
• 크로스 브라우징 이슈도 어느 정도 해결
• 배우기 쉽고 직관적

2.3.3 V8 자바스크립트 엔진

• 데스크톱 애플리케이션과 유사한 사용자 경험 제공이 가능해짐
• 웹 서버에서 수행되던 로직이 클라이언트(브라우저)로 이동

2.3.4 Node.js

• 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
• 브라우저 이외의 환경에서도 자바스크립트 엔진이 동작할 수 있도록 독립시킨 자바스크립트 실행 환경
• 서버 사이드 애플리케이션 개발에 주로 이용
• 비동기 I/O를 지원하고 단일 스레드 이벤트 루프 기반으로 동작해 요청 처리 성능이 좋음
  • 데이터의 실시간 처리를 위해 I/O가 빈번하게 발생하는 SPA에 적합
  • 비동기 I/O: 데이터 전송을 마치기 전에 기타 프로세스가 계속하도록 허가하는 입출력 처리의 한 형태

2.3.5 SPA 프레임워크

• CBD(Component based development) 방법론을 기반으로 하는 SPA 대중화
  • CBD: 기존의 시스템이나 소프트웨어를 구성하는 컴포넌트를 조립해서 하나의 새로운 응용 프로그램을 만드는 소프트웨어 개발방법론

2.4 자바스크립트와 ECMAScript

• ECMAScript: 자바스크립트의 표준 사양인 ECMA-262
  • 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 필트인 객체 등 핵심 문법 규정
  • 각 브라우저는 이 사양을 준수해 브라우저에 내장되는 자바스크립트 엔진 구현
• 자바스크립트: ECMAScript + 브라우저가 별도 지원하는 클라이언트 사이드 Web API
  • Web API: DOM, BOM, Canvas, XMLHttpRequest, fetch, SVG, Web Storage 등

2.5 자바스크립트의 특징

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

• 인터프리터 언어

  • 동적 기능을 지원
  • 인터프리터는 처리 속도가 느리다는 단점
    • 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 이를 해결
      • 일부 소스코드를 컴파일하고 실행

  • 인터프리터 언어와 컴파일러 언어 비교

    인터프리터 언어	컴파일러 언어
    런타임(코드가 실행되는 단계)에 한 줄씩 바이트코드로 변환한 후 실행	컴파일 타임(코드가 실행되기 전)에 소스코드 전체를 기계어로 변환한 뒤 실행
    실행 파일 생성 X	실행 파일 생성 O
    인터프리트 단계 / 실행 단계 분리 X 한 줄씩 바이트코드로 변환하고 즉시 실행	인터프리트 단계 / 실행 단계 분리 O 명시적 컴파일 단계 후 명시적 실행 파일 실행
    코드가 실행될 때마다 과정 반복	실행 전 컴파일은 단 한번
    단계 분리 X + 과정 반복 = 속도 느림	단계가 분리되어 있어 속도 빠름

    바이트 코드: 특정 하드웨어가 아닌 가상 머신에서 실행하도록 만들어진 바이너리 코드

• 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 언어
  • 명령형 프로그래밍: 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍 패러다임의 일종으로 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것
  • 함수형 프로그래밍: 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나
  • 프로토타입 기반 프로그래밍: 클래스가 없고, 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하여 복제의 과정을 통하여 객체의 동작 방식을 다시 사용
  • 다중 패러다임 프로그래밍 언어: 하나 이상의 프로그래밍 패러다임을 지원하는 프로그래밍 언어

2.6 ES6 브라우저 지원 현황

• 모던 브라우저의 ES6 지원 비율은 거의 100%
• 인터넷 익스플로러나 구형 브라우저는 대부분 ES6 지원하지 않음
  • 바벨과 같은 트랜스파일러를 사용해 ES5 이하의 사양으로 다운그레이드 가능