3월 26일 Javascript Deep Dive
2장 자바스크립트란?
2.1 자바스크립트의 탄생
1. 1995 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적인 기능 수행을 위한 경량 프로그래밍 도입 결정
2. 1996.03 넷스케이프 내비게이터 웹 브라우저에 "모카" 탑재
3. 96.03 "모카" -> 96.09 "라이브스크립스" -> 96.12 "자바스크립트" 명명
2.2 자바스크립트의 표준화
1. 1996.08 마이크로소프트 자바스크립트 파생 버전 "JScript"를 인터넷 익스플로러(3.0)에 탑재
2. 경쟁하기 위해 넷스케이프 커뮤니케이션즈와 마이크로소프트 자사 브라우저에만 동작하는 기능을 추가
3. 크로스 브라우징 이슈
4. 1996.11 넷스케이프 커뮤니케이션즈 ECMA 인터내셔널에 자바스크립트 표준화 요청
5. 1997.07 ECMAScript 1 탄생 (상표권 문제로 자바스크립트가 ECMAScript로 명명)
6. 2009 ECMAScript 5는 HTML5와 함께 출현한 표준 사양
2.3 자바스크립트 성장의 역사
1. 랜더링 : HTML, CSS, 자바스크립트로 작성된 문서를 해석해 브라우저에 시각적으로 출력하는 것을 말함.
2. SSR : Server Side Rendering으로 서버에서 데이터를 HTML로 변환해 브라우저에 전달하는 과정
2.3.1 Ajax
1. 1999 자바스크립트로 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 Ajax(Asynchronous JavaScript and XML)이 XMLHttpRequest라는 이름으로 등장
2. 서버에서 필요한 데이터만 받아 변경해야하는 부분만 렌더링 하는 방식이 가능해짐
2.3.2 jQuery
1. 2006 jQuery 등장으로 크로스 브라우징 이슈 어느정도 해결
2.3.3 V8 자바스크립트 엔진
구글 맵스를 통해 웹 애플리케이션 프로그래밍 언어로서의 가능성이 확인됨 -> 빠르게 동작하는 엔진 필요
1. 2008년 구글의 V8 자바스크립트 엔진 등장(https://v8.dev)으로 요구에 부합하는 빠른 성능을 보여줌
2. 서버에서 수행된 부분들이 대거 클라이언트로 이동
2.3.4 Node.js
1. 2009 라이언 달이 구글 V8 엔진으로 빌드된 자바스크립트 런타임 환경
2. 자바스크립트를 브라우저에서 독립시킨 자바스크립트 실행 환경
3. 주로 서버 사이드 애플리케이션 개발
(? 서버 사이드 애플리케이션 개발)
4. 비동기 I/O 지원, 단일 스레드 이벤트 루프 기반 동작, 요청 처리 성능이 좋음 , I.O가 빈번한 SPA(Single Page Application)에 적합
크로스 플랫폼을 위한 가장 중요한 언어가 됨
(PhoneGap, Ionic) , (Node.js), (Electron), (TensorFlow.js) 등
2.3.5 SPA 프레임워크
CBD(Component Based Development) 방법론을 기반 SPA가 대충화됨
2.4 자바스크립트와 ECMAScript
ECMAScript는 자바스크립트의 표준 사양 ECMA-262를 뜻함
JavaScript는 ECMAScript와
클라이언트 사이드 Web API", 즉 DOM, BOM, Canvas, XLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등을 아우르는 개념
2.5 자바스크립트 특징
1. 인터프리터 언어 이지만, 각 회사의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 인터프리터 언어의 단점 해결
3장 자바스크립트 실행환경
1. Node.js LTS(Long Term Support)는 장기적 안정된 지원이 보장됨 , Current은 최신 기능을 제공하지만 업데이트가 발생하는 버전으로 안정적이지 않을 수 있음
2. Node.js REPL(Read Eval Print Loop)
3.4.1 VSCODE 설치
3.4.2 프로젝트 생성 index.js -> 터미널로 node index 입력하면 실행된다.
3.4.3 Code Runner 확장 플러그인을 사용하면 내장 터미널에서 단축키를 사용하 자바스크립트 외 다양한 언어로 구현된 소스코드를 간단히 실행 할 수 있다.
* 클라이언트 사이드인 Web API인지 구분이 필요. Node.js에선 ECMAScript 표준 빌트인 함수만 실행 가능 하기 때문
3.4.4 Live Server 플러그인
클라이언트 사이트 Web API 가 포함된 자바스크립트는 브라우저에서 실행해야함
HTML 파일을 열어 확인을 해야하지만 수정할때마다 새로고침해야하는 번거로움이 있다.
Live Server 플로그인을 사용하면 소스코드 수정할때마다 브라우저에 자동 반영해준다.
설치 이후 우측 하단에 Go Live 버튼을 이용해 실행한다.
4장 변수
1. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
2. 변수는 식별자라고도 불림 , 식별자는 값이 아니라 메모리 주소를 기억하고 있음
3. 변수뿐만 아니라 함수, 클래스 등 이름은 모두 식별자
4.3 변수선언
var, let , const 키워드를 사용해 선언
*var의 단점 중 하나는 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원해 의도치 않게 전역 변수로 선언되서 심각한 부작용이 발생하기도 함
let과 const는 var의 단점을 보완하기 위해 나온 키워드 (ES6) 다만 ES5때 작성된 코드는 var 키워드만을 사용해 구현되어 있을 것이기 때문에 ES6 이후 권장하지 않지만 사용 가능함
ES6는 ES5의 상위 집합이다.
var score;
* 값을 할당하지 않고 선언할 경우 undefined라는 값이 암묵적으로 할당되어 초기화됨
1. 선언 단계 : 변수의 존재를 알림
2. 초기화 단계 : 값을 저장하기 위한 메모리 공간 확보, 값이 없는 경우 암묵적으로 undefined를 할당
4.4 변수 선언의 실행 시점과 변수 호이스팅
1. 변수 선언이 런타임 시점이 아닌 이전 단계에서 실행 된다.
2. 소스코드를 실행하기 전에 소스코드 평과 과정을 거치면서 실행 준비를 하는데 평과 가정에서 변수 선언, 함수 선언 등을 찾아 먼저 실행함
3. 변수 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유의 특징
( 변수 뿐이 아닌 function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 됨)
4.5 값의 할당
1. 변수의 선언은 초기화때 할 수도 있고 선언 이후에 값을 할당할 수 있지만 호이스팅(선언의 실행 시점)을 주의해서 할당해야함
2. 착각하면 안되는 부분은 선언 시 바로 값을 할당한다고 한들 할당은 런타임에서 진행되기 때문에 호이스팅 시점에서의 변수 값은 undefined가 출력됨
5장 표현식과 문
5.1 값
값(value)는 식(표현식 expression)이 평가(evaluate)되어 생성된 결과를 말함=
평가는 식을 해석해서 값을 생성하거나 참조하는 것을 의미
5.2 리터럴
리터럴(literal)은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법
5.3 표현식
표현식(expression)은 값으로 평가될 수 있는 문(statement)이다. 표현식이 평가 되면 새로운 값을 생성하거나 기존 값을 참조한다.
리터럴도 표현식이다.
Ex) var score = 100, 엔진에 의해 평가되어 값을 생성함으로 리터럴 자체도 표현식
값으로 평가될 수 있는문은 모두 표현식
5.4 문
문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위.
문은 여러 토큰으로 구성됨
* 토큰 : 문법적 의미, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.
문은 명령문이라고도 불림
5.5 세미콜론과 세미콜론 자동 삽입 기능
세미콜론(;)은 문의 종료를 나타냄 (코드블록의 뒤에는 붙히지 않음)
다만 자바스크립트는 엔진이 문의 끝이라고 예측되는 지점에 세미콜론 자동 삽입 기능이 암죽적으로 수행되서 생략 가능하다.
문제가 발생하는 경우도 있고 대부분은 세미콜론을 붙여야한다는 주장이 강함
5.6 표현식인 문과 표현식이 아닌 문
값을 평가할 수 있는 문이면 표현식 인문 아니면 표현식이 아닌 문