[모던 자바스크립트 Deep Dive] - 2장 정리

1. 자바스크립트 표준화와 크로스 브라우징 문제

초기 웹 환경에서는 브라우저마다 자바스크립트 구현 방식이 달랐다.
대표적으로 다음 두 기술이 경쟁했다.

• Netscape : JavaScript
• Microsoft : JScript

두 회사가 서로 다른 방식으로 자바스크립트를 구현하면서 같은 코드라도 브라우저마다 다르게 동작하는 문제가 발생했다. 이를 크로스 브라우징 문제라고 한다.

 

예시

var element = document.getElementById("box");

어떤 브라우저에서는 정상 동작하지만 다른 브라우저에서는 DOM API 구현 차이로 인해 동작하지 않는 경우가 있었다.

이 문제를 해결하기 위해 자바스크립트는 표준화 작업을 시작했다. 자바스크립트의 표준은 ECMA-262라는 사양으로 정의된다.
그리고 이 표준을 기반으로 한 자바스크립트 규격을 ECMAScript라고 한다.

 

 

ECMA-262
→ 자바스크립트 표준 사양

 

ECMAScript
→ 그 사양을 기반으로 정의된 자바스크립트 언어 규격

각 브라우저는 ECMAScript 사양을 구현한 자바스크립트 엔진을 탑재한다.

---

2. ES6의 등장

2015년에 ECMAScript 6 (ES6) 가 등장하면서 자바스크립트는 큰 변화를 맞이했다.

ES6는 현대 자바스크립트의 기반이 되는 기능들을 대거 추가했다.

대표 기능

• let / const
• class
• arrow function
• module
• promise
• template literal

예시

ES5

var name = "Tom";

function hello() {
  return "Hello " + name;
}

ES6

const name = "Tom";

const hello = () => {
  return `Hello ${name}`;
};

---

3. AJAX의 등장 (1999)

1999년 XMLHttpRequest 기술이 등장하면서 웹 개발 방식이 크게 바뀌었다.

이 기술을 이용하면 페이지 전체를 새로고침하지 않고 서버와 통신할 수 있다.

이를 AJAX (Asynchronous JavaScript And XML) 라고 한다.

예시

const xhr = new XMLHttpRequest();

xhr.open("GET", "/data");
xhr.onload = function () {
  console.log(xhr.responseText);
};

xhr.send();

AJAX 등장 이전

요청 → 서버 → HTML 전체 응답 → 페이지 전체 새로고침

AJAX 이후

요청 → 서버 → 데이터만 응답 → 필요한 부분만 업데이트

장점

• 페이지 깜박임 감소
• 사용자 경험 개선
• 빠른 인터페이스

---

4. jQuery의 등장

과거에는 브라우저마다 DOM API 동작 방식이 달라서 DOM 제어가 어려웠다.

jQuery는 이를 단순한 API로 해결했다.

예시

기존 DOM 제어

document.getElementById("title").style.color = "red";

jQuery

$("#title").css("color", "red");

jQuery는 다음 문제를 해결했다.

• 복잡한 DOM 조작
• 크로스 브라우징 문제
• 이벤트 처리 간소화

하지만 현재는 브라우저 표준이 안정화되면서 jQuery 의존도는 크게 줄어들었다.

---

5. V8 자바스크립트 엔진

2008년 Google Chrome에서 V8 자바스크립트 엔진이 등장했다.

V8의 특징

• 매우 빠른 실행 속도
• JIT 컴파일 방식 사용

V8은 단순한 인터프리터가 아니라 JIT (Just-In-Time) 컴파일러를 사용한다.

작동 방식

소스 코드
→ 파싱
→ 바이트코드 생성
→ 실행 중 최적화
→ 머신 코드 변환

이 덕분에 자바스크립트 성능이 크게 향상되었다.

---

6. Node.js

Node.js는 V8 엔진을 기반으로 만든 자바스크립트 런타임 환경이다.

즉, 자바스크립트를 브라우저 밖에서도 실행할 수 있도록 만든 환경이다.

예시

console.log("Hello Node.js");

브라우저 없이 터미널에서 실행 가능하다.

특징

• V8 엔진 사용
• 단일 스레드
• 이벤트 기반
• 비동기 I/O

---

7. Node.js가 SPA에 적합한 이유

Node.js는 다음 특징을 가진다.

• 단일 스레드
• 이벤트 루프
• 비동기 I/O

예시

const fs = require("fs");

fs.readFile("data.txt", "utf8", (err, data) => {
  console.log(data);
});

console.log("다른 작업 수행");

실행 순서

1. 파일 읽기 요청
2. 다음 코드 실행
3. 파일 읽기 완료 후 콜백 실행

이 방식은 I/O 작업이 많은 애플리케이션에 매우 효율적이다.

대표 예

• 채팅 서버
• API 서버
• SPA 백엔드

하지만 다음 경우에는 비효율적이다.

• 영상 인코딩
• 머신러닝
• 대규모 수치 계산

즉 CPU 사용량이 높은 작업에는 적합하지 않다.

---

8. 자바스크립트 = ECMAScript + Web API

자바스크립트는 실제로 두 가지 요소로 구성된다.

1. ECMAScript
2. Web API

ECMAScript

• 언어 문법
• 변수
• 함수
• 객체
• 클래스

Web API

• DOM
• fetch
• setTimeout
• XMLHttpRequest

예시

setTimeout(() => {
  console.log("3초 후 실행");
}, 3000);

여기서

arrow function → ECMAScript
setTimeout → Web API

Web API는 ECMAScript 표준이 아니라 브라우저 환경에서 제공하는 기능이다.

Web API는 W3C (World Wide Web Consortium) 에서 별도로 관리한다.

---

9. 자바스크립트는 인터프리터 언어인가

자바스크립트는 전통적으로 인터프리터 언어로 분류된다.

인터프리터 언어 특징

• 실행 파일 생성 없음
• 한 줄씩 해석하며 실행
• 개발자가 별도 컴파일 과정 필요 없음

예시

console.log("Hello");

저장 후 바로 실행된다.

---

10. 컴파일 언어 vs 인터프리터 언어

컴파일 언어

소스 코드
→ 컴파일
→ 실행 파일 생성
→ 실행

예

• C
• C++

인터프리터 언어

소스 코드
→ 인터프리터
→ 즉시 실행

예

• JavaScript
• Python

---

11. 왜 요즘은 구분이 모호한가

현대 자바스크립트 엔진은 JIT 컴파일러를 사용한다.

즉

1. 먼저 인터프리터 방식으로 실행
2. 자주 실행되는 코드는 컴파일

예시

function add(a, b) {
  return a + b;
}

이 함수가 반복 실행되면 엔진은 내부적으로 최적화된 머신 코드로 변환한다.

따라서

인터프리터 + 컴파일러 기술이 함께 사용된다.

하지만 자바스크립트는

• 실행 파일을 생성하지 않으며
• 인터프리터 없이 실행할 수 없기 때문에

컴파일 언어라고 볼 수는 없다.

---

12. 자바스크립트 객체지향 방식

자바스크립트는 클래스 기반 객체지향 언어가 아니라 프로토타입 기반 객체지향 언어이다.

예시

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

Person.prototype.sayHello = function () {
  console.log("Hello " + this.name);
};

const p = new Person("Tom");
p.sayHello();

여기서

• 객체는 prototype을 통해 다른 객체의 기능을 상속한다.

프로토타입에 대해 더 자세한 정보는 아래에서 확인할 수 있다.

https://its-kaya.tistory.com/75

---

왜 프로토타입을 사용하는가

자바스크립트 객체는 동적으로 확장되는 구조이기 때문이다.

예시

const obj = {};
obj.a = 10;
obj.b = 20;

객체 구조가 런타임에 자유롭게 변경된다.

이 특성 때문에 클래스 기반 상속보다 프로토타입 기반 상속이 더 유연하다.

---

13. 구형 브라우저와 ES6

구형 브라우저는 ES6 문법을 지원하지 않는다.

예시

const name = "Tom";

IE에서는 오류가 발생한다.

따라서 구형 브라우저까지 지원해야 한다면 코드를 다운그레이드해야 한다.

대표 방법

• Babel (트랜스파일러)
• Webpack

예시

ES6 코드

const add = (a, b) => a + b;

Babel 변환 결과

var add = function (a, b) {
  return a + b;
};

이 과정을 트랜스파일 (Transpile) 이라고 한다.

---

참고 자료

• 모던 자바스크립트 Deep Dive — 이웅모
• ECMAScript Specification — https://tc39.es/ecma262/
• MDN Web Docs — https://developer.mozilla.org/