Javascript

최광일·2023년 3월 2일

모던 자바스크립트 Deep dive 책 리뷰

요약

1 역사
- 자바스크립트는 표준화를 거친 웹 어플리케이션 프로그래밍 언어이다.
2 디자인
- 자바스크립트는 객체 기반, 프로토타입 기반 언어이며, 자바스크립트를 구성하는 모든 것이 객체다.
3 동작방식
- 자바스크립트는 렉시컬 스코프를 가지며, 렉시컬 환경과 실행 컨텍스트를 통해 소스코드를 처리한다.
4 브라우저 환경
- 자바스크립트 엔진은 싱글 쓰레드로 동작하지만, 브라우저는 멀티 쓰레드로 동작한다.

1 역사

자바스크립트는 표준화를 거친 웹 어플리케이션 프로그래밍 언어이다.

1-1 표준화

자바스크립트는 1995년 웹페이지의 보조적인 기능을 수행하기 위한 경량 프로그래밍 언어로 도입되었다.

하지만, 여러 브라우저에서 각 자사의 브라우저 점유율을 높이기 위한 브라우저 전쟁이 일어나며, 자사 브라우저에 호환하는 자바스크립트의 파생 버전을 도입한다.

넷스케이프 커뮤니케이션즈
- 브라우저: 넷스케이프 내비게이터
- 언어: Javascript
마이크로소프트
- 브라우저: 인터넷 익스플로러
- 언어: JScript

이로 인해, 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하게 된다.

이에 자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성이 대두된다.

그렇게, 비영리 표준화 기구인 EMCA 인터내셔널에서 자바스크립트는 ECMAScript로 명명한다.

ECMAScript(ES)의 주요 버전별 특징은 다음과 같다.

ES1 (1997): 초판
ES5 (2009): HTML5와 함께 출연한 표준안
ES6* (2015): 범용 프로그래밍 언어로서 갖춰야 할 기능을 대거 도입
- let, const (block level scope)
- class
- arrow function
- promise
- module import/export
- ...
ESNext (2016~)

ES6 버전에서 여러 주요 기능들이 도입되었기 때문에, 주로 해당 버전을 기준으로 많이 삼는다.

1-2 웹 어플리케이션

초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다.

이 당시, 웹페이지는 HTML코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다.
따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 변경할 필요가 없는 부분까지 웹페이지 전체를 처음부터 다시 렌더링 했다.

하지만, 1999년 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 통신하는기능인 Ajax가 XMLHttpRequest라는 이름으로 등장했다.

이를 통해 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능해졌다.

2005년, 구글이 발표한 구글 맵스는 웹 어플리케이션 프로그래밍 언어로서 자바스크립트의 가능성을 확인하게 되고, 이러한 웹 어플리케이션을 구축하려는 시도가 늘면서 더욱 빠르게 동작하는 자바스크립트 엔진의 필요성이 대두된다.

2008년, 구글에서 V8 자바스크립트 엔진을 발표하여 자바스크립트는 데스크톱 어플리케이션과 유사한 UX를 제공하는 웹 어플리케이션 언어로 정착하게 되었다.

1-3 SPA 라이브러리

모던 웹 어플리케이션은 웹 페이지와는 달리 개발 규모와 복잡도가 상승하게 되었고, 이에 따라 많은 패턴과 라이브러리가 출현했다.

CBD(Component Based Development)방법론을 기반으로 하는 SPA(Single Page Application)가 되중화 되면서 React, Vue, Angular 등 다양한 프레임워크/라이브러리가 존재한다.

2 디자인

자바스크립트는 객체 기반, 프로토타입 기반 언어이며, 자바스크립트를 구성하는 모든 것이 객체다.

객체: 여러개의 값을 하나의 단위로 구성한 복합적인 자료구조
프로토타입: 어떤 객체의 상위(부모) 객체의 역활을 하는 객체

2-1 객체

객체는 프로퍼티와 메서드로 구성된 집합체이며, 변경 가능한 값(mutable)이다.

const counter = {
  num: 0, // 프로퍼티
  incresase: function() { // 메서드
  	this.num++; 
  }
}

counter.num = 1; // 프로퍼티 값 갱신
counter.name = 'counter1'; // 프로퍼티 동적 생성

프로퍼티: 객체의 상태를 나타내는 값(data)
메서드: 프로퍼티를 참조하고 조작할 수 있는 동작(behavior)

자바스크립트 객체는 크게 3개의 객체로 분류할 수 있다.

표준 빌트인 객체
- 실행 환경과 상관 없이 전역 객체의 프로퍼티로 제공하여 전역 변수로 사용
- Obejct, String, Boolean, Math, Promise 등
호스트 객체
- 실행 환경에서 전역 객체에 추가로 제공하는 객체
- 브라우저 환경에서 DOM, fetch, Web Storage 등
사용자 정의 객체
- 사용자가 직접 정의한 객체

2-2 프로토타입

객체지향 프로그래밍은 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다.

상속(inheritance)은 객체지향 프로그래밍의 핵심으로, 자바스크립트는 프로토타입을 기반으로 상속을 구현한다.

function Person(name) {
  this.name = name; 
}

// 프로토타입 메서드
Persion.prototype.sayHello = function() {
  console.log(`Hi! My name is ${this.name}`);  
}

const me = new Person('Lee');

// hasOwnProperty는 Object.prototype의 메서드임
console.log(me.hasOwnProperty('name')); // true

위의 코드의 상속 관계는 다음과 같다. me > Person.prototype > Object.prototype

자바스크립트는 객체의 프로퍼티에 접근하려고 프로토타입의 체인으로 프로퍼티를 순차적으로 검색한다.

3 동작 원리

자바스크립트는 렉시컬 스코프를 가지며, 렉시컬 환경과 실행 컨텍스트를 통해 소스코드를 처리한다.

렉시컬 스코프: 정적 스코프
렉시컬 환경: 식별자와 스코프 관리
실행 컨텍스트: 렉시컬 환경을 통해 실행 순서 관리

3-1 렉시컬 스코프

스코프(scope)는 유효범위이며, 유효범위는 다음과 같이 결정된다.

1 선언된 위치
- 전역 스코프
- 지역 스코프
2 계층 위치
- 상위 스코프: 외부 함수
- 하위 스코프: 내부 함수
3 상위 스코프의 위치
- 동적 스코프: 함수를 어디서 호출했는가?
- 정적 스코프: 함수를 어디서 정의했는가?

이렇게, 함수가 정의될 때 상위 스코프가 정적으로 정의되는 것을 정적 스코프 또는 렉시컬 스코프라고 한다.

렉시컬(Lexical)은 '사전'을 뜻하는 'Lexicon'에서 파생되었다.

우리가 사전에 정의된 단어의 의미에 따라 문장의 의미를 파악하는 것 처럼, 함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정된다.

사전에서 단어 의미 찾기
- (X) 문장의 문맥(context)에 따라 단어의 의미를 파악한다
- (O) 사전에 정의된 단어의 의미에 따라 문장의 문맥(context)을 파악한다
상위 스코프 찾기
- (X) 함수가 호출되는 위치의 상위 스코프
- (O) 함수가 정의되는 위치의 상위스코프

예제에서 함수 bar가 정의될 때의 상위 스코프는 전역 스코프이므로, 실행 결과는 다음과 같다.

var x = 1;
 
function foo() {
  var x = 10;
  bar();
}
 
function bar() {
  console.log(x); 
}
 
foo(); // 1
bar(); // 1

3-2 렉시컬 환경

스코프(유효범위)에 따라, 코드가 실행되기 위해서는 코드의 문맥을 알아야 한다.

즉, 코드가 어디서 실행되며, 주변에 어떤 코드가 있는지를 알아야 하며 이를 렉시컬 환경이라고 한다.

렉시컬 환경은 이론상의 객체로, 두가지로 구성한다.

1 환경 레코드: 지역 변수를 프로퍼티로 저장하고 있는 객체
2 외부 렉시컬 환경에 대한 참조: 상위 스코프 참조

예제 코드를 도식화 해보면 렉시컬 환경은 다음과 같다.

전역 렉시컬 환경
- 환경 레코드: { x:1, foo: function, bar: function }
- 외부 렉시컬 환경 참조: null
foo 렉시컬 환경
- 환경 레코드: { x:10 }
- 외부 렉시컬 환경 참조: 전역 렉시컬 환경
bar 렉시컬 환경
- 환경 레코드: null
- 외부 렉시컬 환경 참조: 전역 렉시컬 환경

3-3 실행 컨텍스트

소스코드(실행 가능한 코드)는 실행 컨텍스트를 생성한다.

전역 코드
함수 코드
...

실행 컨텍스트는 소스코드를 실행하는데 필요한 환경을 제공하고, 코드의 실행을 관리한다.

자바스크립트 엔진은 다음의 과정으로 소스코드를 실행 컨텍스트를 통해 처리한다

1 소스코드 평가
- 1 실행 컨텍스트 생성
- 2 실행 컨텍스트를 실행 컨텍스트 스택에 추가
- 3 스택의 최상위 컨텍스트는 실행중인 컨텍스트 상태가 됨
- 4 식별자와 스코프를 렉시컬 환경으로 생성
2 소스코드 실행
- 렉시컬 환경을 참조하여, 소스코드를 순차적으로 실행 (런타임)

예제 코드의 실행 컨텍스트의 처리를 도식화 해보면 다음과 같다.

3-4 클로저

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.

함수: 함수
함수가 선언된 렉시컬 환경: 실행 컨텍스트의 렉시컬 환경(상위 스코프)

자바스크립트의 모든 함수는 자신의 상위 스코프를 기억한다.

하지만, 모든 함수를 클로저라고 하지 않고 외부 함수보다 중첩 함수의 생명주기가 긴 함수를 클로저라고 한다.

const x = 1;

function outer() {
  const x = 10;
  const inner = function() { console.log(x) };
  return inner;
}

const innerFunc = outer();
innerFunc();

위의 예시에서 outer 함수는 호출 후 실행 컨텍스트에서 제거되지만, outer함수의 렉시컬 환경까지 소멸하는 것은 아니다.

이러한 클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다

// case 1: 전역 변수
let num = 0;

const increaseGlobal = function () {
  return ++num;
}

console.log(increaseGlobal); // 1
console.log(increaseGlobal); // 2
console.log(increaseGlobal); // 3

// case 2: 지역 변수
const increaseLocal = function () {
  let num = 0;
  
  return ++num;
}

console.log(increaseLocal); // 1
console.log(increaseLocal); // 1
console.log(increaseLocal); // 1

// case 3: 클로저
const increaseCloser = (function() {
  let num = 0;
  
  return function (){
    return ++num; 
  };
}());

console.log(increaseCloser); // 1
console.log(increaseCloser); // 2
console.log(increaseCloser); // 3

case 1: 전역 변수
- 기대한대로 동작되지만, 외부에서 변수가 의도치 않게 변경될 수 있다.
case 2: 지역 변수
- 함수가 호출될 때 마다 변수가 초기회되므로 기대한대로 동작하지 않는다.
case 3: 클로저
- 기대한대로 동작하며, 외부에서 변수에 접근할 수 없다.
- 즉시 실행 함수는 호출된 이후 소멸되지만, 렉시컬 환경은 제거되지 않는다.
- 따라서, 반환된 함수는 즉시 실행 함수의 렉시컬 환경을 기억하고 변경한다.

4 브라우저 환경

자바스크립트 엔진은 싱글 쓰레드로 동작하지만, 브라우저는 멀티 쓰레드로 동작한다.

4-1 렌더링

렌더링은 HTML, CSS, Javascript로 작성된 문서를 파싱하여 브라우저에 시각적으로 표현하는 것이다.

1 브라우저는 서버에 HTML 문서를 요청한다.
2 브라우저의 렌더링 엔진은 응답받은 HTML 문서를 순차적으로 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다
3 브라우저의 렌더링 엔진은 응답받은 HTML 문서를 순차적으로 파싱하다가 CSS를 로드하는 link를 만나면 DOM 생성을 일시 중단하고, CSS 파일을 파싱하여 CSSOM을 생성한다.
4 DOM과 CSSOM이 결합하여 렌더 트리를 생성한다.
5 완성된 렌더 트리는 각 HTML 요소의 레이아웃을 계산하는 데 사용되며, 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력된다.