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

브라우저에는 자바스크립트 엔진이 내장되어 있다

모든 웹 브라우저에는 자바스크립트를 해석하고 실행하는 엔진이 내장되어 있다.
이 엔진이 자바스크립트 코드를 읽고 실행한다.

대표적인 자바스크립트 엔진

• Chrome : V8
• Firefox : SpiderMonkey
• Safari : JavaScriptCore

예시

console.log("Hello JavaScript");

이 코드는 브라우저에서 다음 과정을 거쳐 실행된다.

자바스크립트 코드
→ 엔진이 코드 파싱
→ 실행

따라서 브라우저만 있어도 자바스크립트를 실행할 수 있다.

---

브라우저 환경과 Node.js 환경의 차이

자바스크립트는 브라우저뿐 아니라 Node.js 환경에서도 실행할 수 있다.

하지만 두 환경은 목적이 다르기 때문에 제공하는 기능도 다르다.

브라우저 환경

목적
웹 페이지를 화면에 렌더링하고 사용자와 상호작용

사용 가능한 기능

• DOM API
• Web API
• 이벤트 처리
• 화면 렌더링

예시

document.getElementById("title").textContent = "Hello";

이 코드는 DOM API를 사용하기 때문에 브라우저에서만 실행 가능하다.

---

Node.js 환경

목적
서버 프로그램 실행

사용 가능한 기능

• 파일 시스템 접근
• 서버 생성
• 네트워크 처리

예시

const fs = require("fs");

const data = fs.readFileSync("test.txt", "utf8");
console.log(data);

이 코드는 파일 시스템 API를 사용하기 때문에 브라우저에서는 실행할 수 없다.

---

왜 브라우저에서는 파일 시스템을 사용할 수 없을까

이유는 보안 문제 때문이다.

만약 웹사이트가 사용자의 파일 시스템에 접근할 수 있다면 다음과 같은 문제가 발생할 수 있다.

• 개인 파일 유출
• 악성 코드 실행
• 개인정보 탈취

그래서 브라우저는 파일 시스템 접근을 기본적으로 허용하지 않는다.

---

ECMAScript와 Web API

자바스크립트 실행 환경은 다음 두 요소로 구성된다.

ECMAScript

• 자바스크립트 언어 규격
• 변수
• 함수
• 객체
• 배열
• 클래스

Web API

• DOM
• fetch
• setTimeout
• localStorage

예시

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

여기서

arrow function → ECMAScript
setTimeout → Web API

즉

ECMAScript = 언어 규격
Web API = 브라우저 기능

따라서 Web API는 Node.js 환경에서 사용할 수 없다.

---

브라우저 개발자 도구

브라우저는 웹 개발을 위해 개발자 도구(Developer Tools) 를 제공한다.

Chrome에서 열기

F12

또는

우클릭 → 검사

 

주요 패널

Elements	DOM 구조와 CSS 확인 및 수정
Console	에러 확인 및 console.log 결과 확인
Sources	자바스크립트 코드 디버깅
Network	네트워크 요청과 응답 확인
Application	쿠키, 로컬스토리지, 세션스토리지 관리

---

Console 패널

Console 패널은 다음 기능을 제공한다.

• 에러 확인
• 로그 출력 확인
• 코드 직접 실행

예시

console.log("Hello");
console.error("에러 발생");
console.warn("경고 메시지");

---

왜 console.log 디버깅을 많이 사용할까

개발 초기에는 디버거보다 console.log가 더 빠르게 문제를 확인할 수 있기 때문이다.

예시

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

add(10, 20);

이렇게 하면 함수에 전달된 값을 빠르게 확인할 수 있다.

---

Console은 REPL 환경이다

Console은 REPL 환경으로 동작한다.

REPL

Read
Eval
Print
Loop

즉

코드를 입력한다
→ 실행한다
→ 결과를 출력한다
→ 반복한다

예시

Console에 직접 입력

1 + 2

결과

3

또 다른 예시

const name = "Tom";
name.toUpperCase();

결과

"TOM"

이처럼 코드를 바로 실행하면서 결과를 확인할 수 있다.

---

브라우저 디버깅

브라우저 개발자 도구에서는 디버깅 기능을 제공한다.

예시 코드

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

add(10, 20);

디버깅 방법

1. Sources 패널 이동
2. 코드 줄 번호 클릭
3. 브레이크포인트 설정

그러면 코드 실행이 해당 줄에서 멈춘다.

이 상태에서 다음을 확인할 수 있다.

• 변수 값
• 실행 흐름
• 호출 스택

이를 통해 에러의 원인을 분석할 수 있다.

---

Node.js가 필요한 이유

프로젝트 규모가 커지면 다음 기능이 필요해진다.

• 패키지 관리
• 빌드 도구
• 번들러
• 프레임워크

이때 Node.js 환경이 필요하다.

대표 예

• React
• Vue
• Next.js
• Webpack
• Vite

이 도구들은 대부분 Node.js 기반으로 동작한다.

---

npm (Node Package Manager)

npm은 Node.js 패키지 관리자이다.

역할

• 패키지 저장소
• 패키지 설치
• 의존성 관리

패키지 설치 예시

npm install lodash

사용 예시

const _ = require("lodash");

console.log(_.chunk([1,2,3,4],2));

npm을 통해 수많은 오픈소스 패키지를 재사용할 수 있다.

---

Node.js 버전 종류

Node.js에는 두 가지 주요 버전이 있다.

LTS (Long Term Support)

특징

• 안정 버전
• 장기간 지원
• 실무 사용 권장

Current

특징

• 최신 기능 포함
• 테스트 목적

실무에서는 LTS 버전을 사용하는 것이 일반적이다.

---

Node.js REPL

Node.js도 REPL 환경을 제공한다.

터미널 실행

node

예시

> 1 + 2
3

> const name = "Tom"
undefined

> name
"Tom"

---

VS Code 환경

실제 개발에서는 REPL보다 코드 에디터를 사용한다.

대표 에디터

• VS Code

VS Code 기능

• 자동완성
• 디버깅
• 확장 프로그램
• Git 연동

Code Runner

Code Runner 확장을 사용하면 코드를 쉽게 실행할 수 있다.

우클릭 → Run Code

---

Live Server

Live Server는 개발용 로컬 서버를 실행하는 VS Code 확장 프로그램이다.

기능

• 브라우저 자동 실행
• 파일 변경 시 자동 새로고침

예시

<h1>Hello</h1>

파일 저장

→ 브라우저 자동 새로고침

즉 코드 수정 결과를 즉시 확인할 수 있다.

 

참고 자료

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