약간의 사담...

우리 지역은 교통수단이 불편해서 도서관까지 가려면 큰 맘을 먹고 가야한다고 생각했는데, 생각보다 우리 집 앞에 오는 버스가 도서관과 가까운 정류장에 가는 것을 알게 됐다. 마침 그 동네에 볼 일이 종종 생길 것 같아서 이 참에 도서 대출증을 만들었다. 그리고 신간 코너를 둘러보는데 모던 자바스크립트 Deep Dive가 있길래 냉큼 집어왔다! 가격 때문에 고민하고 있었는데 이렇게 공짜로 볼 수 있다면 봐야하지 않겠나...! DeepDive 태그에는 모던 자바스크립트 Deep Dive를 읽으면서 알고 있는데 다시 한번 정리가 필요하거나, 새로 얻은 인사이트를 정리해 올릴 예정이다.

2장 - 자바스크립트란?

2-1. Ecmascript의 변화

1. ES6(2015)

• let/const
• 화살표 함수
• 템플릿 리터럴
• 구조분해할당
• spread
• rest 파라미터
• symbol
• promise
• Map/Set
• 이터러블
• for...of
• 제너레이터
• import/export
• Proxy

2. ES7(2026)

• 지수(**)연산자
• includes 메서드

3. ES8(2017)

• async/await
• Object.values()
• Object.entries()
• Object.getOwnPropertyDescriptors()

4. ES9(2018)

• Object rest, spread
• Promise.finally
• for await...of

5. ES10(2019)

• Object.fromEntries()
• flat()
• flatMap()

6. ES11(2020)

• String.matchAll
• BigInt
• promise.allSettled
• null 병합 연산자
• 옵셔널 체이닝
• for...in
• enumeration order

2-2. 자바스크립트의 성장 역사

1. Ajax(1999)

이전엔 웹 페이지를 서버에서 그려서 HTML과 CSS파일을 내려보내주는 방식이었다. 이는 일부분만 페이지를 변경하고 싶어도 서버에서 파일을 받아 처음부터 렌더링을 해줘야 했다.

하지만 Ajax가 나타난 후 서버와 브라우저간의 비동기 통신이 가능하게 되면서 서버로부터 필요한 데이터만 받아 렌더링이 가능해지게 되었다.

2. jQuery(2006)

기존의 자바스크립트보다 DOM을 더 쉽게 제어할 수 있게 되었다.

3. V8 JS 엔진(2008)

차츰 웹이 발전함에 따라 크고 복잡한 규모의 웹이 생겨났다. 그리고 이런 웹은 더 빠르게 동작하는 엔진을 필요로 하게 되었다. 자바스크립트의 V8 엔진이 대두되며 더 빠른 코드의 처리가 가능해졌고, 웹 서버에서 수행하던 로직이 클라이언트로 대거 이동하게 되었다.

4. Node JS(2009)

V8엔진으로 빌드된 자바스크립트의 런타임 환경이다. 비동기 입출력을 지원하고, 단일 스레드와 이벤트 루프 기반으로 동작한다.

Node JS의 등장으로 원래는 브라우저에서만 동작하던 자바스크립트가 프론트엔드와 백엔드 둘 다를 구현할 수 있게 되었고 하나의 범용 프로그래밍 언어가 되었다.

5. SPA프레임워크

데스크탑 어플과 비슷한 사용자 경험을 제공하고자 하는 요구에 따라 웹의 규모와 복잡도가 증가했다. 이에 따라 많은 패턴이 생겨났으며 프로젝트를 쉽게 관리할 수 있는 라이브러리의 필요성이 대두되었다.

이에 따라 CBD(Component Based Development)기반의 SPA(Single Page Application)이 등장하게 되었다.

2-3. 자바스크립트의 특징

• 웹에서 동작하는 유일한 프로그래밍 언어이다.
• 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.
• 대부분의 모던 브라우저에선 명시적인 컴파일 단계를 거치진 않지만 일부 소스코드를 컴파일한다. 이를 통해 인터프리터 언어의 장점인 동적 기능 지원을 살리면서 컴파일러 언어의 장점인 실행속도까지 합쳐지게 되었다.

컴파일러 언어의 특징

1. 코드가 실행전 단계인 컴파일 타임에 코드 전체를 머신 코드로 변환한 뒤 실행한다.
2. 실행파일이 존재한다.
3. 컴파일 단계를 거친 뒤 실행 단계를 수행한다.
4. 실행에 앞서 컴파일을 한 번 수행한다.
5. 컴파일과 실행이 분리되어 있어 코드 실행이 빠르다.

인터프리터 언어의 특징

1. 코드 실행 단계인 런타임 시에 문 단위로 중간코드인 바이트 코드로 변환한 뒤 실행한다.
2. 실행 파일이 존재하지 않는다.
3. 한줄씩 바이트 코드로 바꿔서 바로 실행한다.
4. 코드가 실행될 때마다 인터프리터 과정을 수행한다.
5. 컴파일과 실행이 분리되어 있지 않고, 매번 인터프리터 과정을 수행하기 때문에 실행속도가 비교적 느리다.

3장 - 개발환경 + 실행방법

3-1. 실행환경

브라우저와 Node JS가 있다. 브라우저와 Node JS는 실행환경이 다르기 때문에 API 사용시 주의해야한다.

브라우저는 화면에 HTML과 CSS를 렌더링하는 목적이기 때문에 Node JS가 기본으로 지원하는 File 입출력 시스템을 제공하지 않는다.

반대로 Node JS는 브라우저 외부에서 자바스크립트 실행환경을 제공해주는 역할이기 대문에 브라우저가 지원하는 DOM API를 제공하지 않는다.

3-2. npm

프로젝트 규모가 커짐에 따라 React, Vue, Babel, Webpack 등을 도입해야할 때가 있다. 이때 Node JS와 npm이 필요하다.

npm은 자바스크립트의 패키미 매니저이며, Node JS에서 사용할 수 있는 패키지를 모아둔 저장소 역할과 더불어 패키지의 설치 & 관리를 위한 CLI를 제공한다.

4장 - 변수

4-1. 변수란?

변수의 정의

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 공간을 식별하기 위해 붙이는 이름을 의미한다.

할당의 정의

변수에 값을 저장하는 것을 의미한다.

식별자의 정의

변수의 이름 혹은 어떤 값을 구별해서 식별할 수 있는 고유 이름을 의미한다.

4-2. 변수 선언의 실행 시점과 변수 호이스팅

var의 선언 전에 접근해도 에러가 안나는 이유

자바스크립트 엔진은 코드를 실행하기 전에 코드 전체를 읽어서 코듸 내부에 있는 모든 선언문을 찾아서 식별자를 저장한다.

이에 따라 코드 실행 전이지만 모든 변수의 정보를 다 알고 있게 되고, 변수 선언문이 마치 코드의 선두로 끌어올려진 것처럼 동작한다.

값 할당 시 주의할점

변수 선언은 순차적으로 실행되는 런타임 이전에 먼저 실행되지만 값의 할당은 런타임 시점에 실행된다.

5장 - 값

5-1. 값이란?

값의 정의

표현식이 평가되어 생성된 결과를 의미한다.

5-2. 리터럴이란?

리터럴의 정의

사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 의미한다.

예시

• 정수리터럴: 100
• 문자열 리터럴: 'string'
• 불리언 리터럴: true / false

5-3. 표현식

표현식의 정의

표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 값을 참조한다.

예시

var socre = 100; // 1
var score = 50 + 50; // 2
score; // 3 (값을 생성하진 않지만 위 코드 뒤 score는 값을 갖게 되고 표현하게 되므로 표현식이다.)

5-4. 문

문의 정의

프로그램을 실행하는 단위이자 최소 실행 단위이다. 예시로 선언문, 할당문, 조건문, 반복문 등이 있다.

토큰

문법적인 의미를 가지며 더이상 나눌 수 없는 코드의 기본요소이다.

var sum = 1 + 2;

위 구문에서 var sum = 1 + 2 ; 는 각각 모두 토큰이며 이 모든 것을 합친 단위가 문이다.

표현식과 표현식이 아닌 문

표현식은 문의 일부일 수도 있고 그 자체로 문일 수도 있다.

var x; // 표현식 X, 문 O => 값을 표현하지 않는다.
x = 1 + 2; // 표현식 O, 문 O => 값을 갖고 있다.
var foo = var x; // 문은 값처럼 할당할 수 없다.
var foo = x = 3; // 표현식인 문은 값처럼 할당할 수 있다.