2장
자바스크립트 성장의 역사
초창기 자바스크립트
웹 페이지의 보조적인 기능을 수행하는 한정적 용도
- 대부분의 로직은 주로 웹 서버에서 실행
- 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 역할
렌더링이란?
HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것
🌠 AJAX의 등장 (1999)
AJAX란?
자바스크립트로 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 통신기능 (= XMLHttpRequest)
AJAX 이전
- 화면 전환 시 매번 서버로부터 새로운 HTML을 전송받아 웹 페이지 전체를 다시 렌더링
- HTML 전체 교체 => 변경할 필요가 없는 부분까지 다시 렌더링(성능 불리) + 화면 깜박임 발생
AJAX 이후 (Breakthrough)
- 첫 로딩 이후 서버로부터 필요한 데이터만 받아 변경이 필요한 부분만 재렌더링 => 성능 개선
- 화면 전환 시 깜박임 사라짐 (부드러운 화면 전환)
jQuery 등장 (2006)
- DOM을 더욱 쉽게 제어 가능
- 크로스 브라우징 이슈 어느 정도 해결
V8 자바스크립트 엔진 (2008)
- '크롬의 성능이 너무 좋아서 구글 개발자들이 감탄한 나머지 크롬 브라우저의 자바스크립트 엔진만 따로 떼서 출시한 것' (from 코딩애플)
- V8 엔진의 등장으로 자바스크립트 발전 촉발
=> 예전에 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동
=> 웹 개발에서 프론트엔드 영역이 주목받는 계기
Node.js (2009)
- 구글의 V8 엔진을 가지고 만들어진 자바스크립트 런타임(실행) 환경
- 브라우저 이외의 환경에서도 자바스크립트가 동작할 수 있는 실행 환경 제공
Node.js의 특징
싱글 스레드와 이벤트 루프 기반으로 동작
비동기 I/O 지원 => 실시간 데이터 처리로 인해 I/O가 빈번한 SPA에 적합
- 서버 사이드 애플리케이션 개발에 주로 사용
=> 자바스크립트가 프론트엔드와 백엔드 두 영역 모두 + 크로스 플랫폼(웹, 하이브리드 앱, 데스크톱, 머신러닝 등)에 활발하게 쓰이는 계기 마련
SPA 프레임워크
- 개발 규모와 복잡도가 상승하면서 변경에 유연하고 확장하기 쉬운 JS 프레임워크들 등장 (Angular, React, Vue.js, Svelte 등)
=> SPA 대중화
자바스크립트와 ECMAScript
ECMAScript란?
프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 내장 객체 등의 핵심문법 규정
자바스크립트는 일반적으로 다음 2가지를 아우르는 개념
- 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript (core)
- 브라우저가 별도 지원하는 클라이언트 사이드 Web API
=> DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage 등
자바스크립트의 특징
- HTML, CSS와 함께 웹을 구성하는 요소 중 하나
- 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
- 개발자가 별도의 컴파일을 수행하지 않는 인터프리터 언어
🌠 컴파일 언어와 인터프리터 언어 비교
컴파일 언어
- 코드 실행 이전 컴파일 단계에서 소스코드를 한 번에 머신코드로 변환 후 실행
- 컴파일 단계와 실행 단계가 분리됨 (실행 파일 따로 생성)
- 컴파일은 단 한번 수행
- 인터프리터 언어보다 실행 속도가 빠름
인터프리터 언어
- 코드가 실행되는 런타임 단계에서 소스코드를 한 줄씩 바이트코드로 변환 후 실행
- 실행 단계와 분리되어 있지 않음 (실행 파일 생성도 x)
- 코드가 한 줄씩 실행될 때마다 인터프리트 반복 수행 => 실행 속도 느림
3장
자바스크립트 실행 환경
자바스크립트 엔진
- 자바스크립트를 해석하고 실행할 수 있는 엔진
🌠 브라우저와 Node.js 차이
모든 브라우저와 Node.js는 자바스크립트 엔진을 내장하고 있으나, 둘의 주 목적은 다르다.
브라우저의 주 목적
HTML, CSS, 자바스크립트를 실행하여 웹 페이지를 화면에 렌더링
Node.js의 주 목적
브라우저 외부에서 자바스크립트 실행 환경 제공
=> 브라우저와 Node.js 모두 자바스크립트의 코어인 ECMAScript를 실행할 수 있지만 나머지 기능들은 서로 호환되지 않는다.
브라우저는 기본적으로 DOM API를 제공
Node.js의 주 목적은 브라우저 '바깥'에서 JS 실행환경을 제공하는 것
브라우저 바깥에서는 DOM을 직접 다루지 않기 때문에 Node.js에서는 DOM API를 제공하지 않는다.
Node.js는 CRUD가 가능한 파일 시스템('fs')을 제공
브라우저가 파일 시스템을 제공하지 않는 이유는 브라우저를 통해 사용자의 컴퓨터에 다운로드된 자바스크립트가 사용자 컴퓨터의 로컬 파일을 CRUD하는 것이 가능할 경우 보안상 매우 위험하기 때문
(단, Web API 중 하나인 FileReader를 통해 사용자가 직접 지정한 파일을 Read하는 건 가능)
개발자 도구
웹 브라우저의 개발자 도구는 웹 개발에 유용한 다양한 기능 제공
- Network: 로딩된 웹 페이지에 관련된 네트워크 요청(request) 정보와 성능 확인 가능
- Sources: 로딩된 웹 페이지의 자바스크립트 코드를 디버깅 가능
npm
- node package manager의 줄임말
- Node.js에서 사용 가능한 모듈들을 패키지화해서 모아둔 저장소
- 패키지 설치 및 관리를 위한 CLI(Command Line Interface) 제공
vscode에서 JS 파일 실행하기
확장 프로그램 2가지
1. Code Runner
- Node.js 환경을 사용하여 자바스크립트 실행
=> 브라우저에서만 동작하는 Web API(예: alert)는 실행 불가- 단축키: Ctrl + Alt + N
(현재 JS 알고리즘 문제 풀면서 편하게 잘 쓰고 있는 extension!)
2. Live Server
- 브라우저 환경에서 자바스크립트 실행
- Web API가 포함된 자바스크립트 코드를 실행할 경우 필요
- JS 코드 실행 결과를 브라우저에서 확인하려면 개발자 도구 console 확인, 또는 JS 코드를 HTML에 삽입한 후 HTML 파일을 브라우저에서 여는 방법으로 가능
- 이때 소스코드를 수정하면 원래 매번 브라우저 새로고침을 해줘야 하는데 Live Server를 쓰면 가상 서버를 기동하여 수정사항을 브라우저에 자동 반영
