브라우저 vs Node.js: JavaScript 실행 환경의 차이

 

브라우저 vs Node.js: JavaScript 실행 환경의 차이

❌ 틀린 부분

"브라우저는 노드로 자바스크립트를 실행"

✅ 올바른 이해

브라우저와 Node.js는 둘 다 독립적으로 JavaScript를 실행
- 브라우저: V8 (또는 다른 엔진) 사용
- Node.js: V8 엔진 사용

→ 둘 다 V8을 사용하는 것 (Node.js를 거치는 게 아님)

 

 

정확한 관계

JavaScript 엔진

V8 엔진 (JavaScript 실행기)
    ↓         ↓
브라우저    Node.js
(Chrome)

즉:

• 브라우저 ≠ Node.js를 사용
• 브라우저 = V8을 직접 사용
• Node.js = V8을 직접 사용

 

구체적인 구조

Chrome 브라우저

Chrome
├─ V8 엔진 (JavaScript 실행)
├─ Blink (HTML, CSS 렌더링)
├─ DOM API
├─ Web API (fetch, setTimeout 등)
└─ GPU 가속 등

Node.js

Node.js
├─ V8 엔진 (JavaScript 실행) ← Chrome과 같은 엔진!
├─ libuv (비동기 I/O)
├─ File System API
├─ HTTP 모듈
└─ 기타 내장 모듈

 

 

공통점과 차이점

공통점

// 둘 다 같은 JavaScript 문법
const add = (a, b) => a + b;

// 둘 다 V8 엔진 사용
console.log(add(1, 2)); // 3

공통:

• ✅ V8 엔진 사용 (같은 엔진!)
• ✅ JavaScript 문법 동일
• ✅ 기본 JavaScript 기능 (변수, 함수, 배열 등)

 

차이점

브라우저만 있는 것

// DOM API
document.querySelector('#app');
window.location.href;

// Web API
fetch('https://api.com');
localStorage.setItem('key', 'value');

// 브라우저 환경
alert('Hello');

Node.js만 있는 것

// File System
const fs = require('fs');
fs.readFileSync('file.txt');

// HTTP 서버
const http = require('http');
http.createServer();

// Path 모듈
const path = require('path');
path.join(__dirname, 'file.txt');

// Process
process.env.NODE_ENV;

 

 

 

비교표

항목	브라우저	Node.js
JavaScript 엔진	V8 (Chrome, Edge) SpiderMonkey (Firefox)	V8
HTML/CSS	✅	❌
DOM API	✅	❌
Web API	✅ (fetch, localStorage)	❌
File System	❌	✅
HTTP 서버	❌	✅
용도	웹 페이지 실행	서버, CLI 도구

 

실행 환경 이해

브라우저

// 브라우저에서만 작동
console.log('브라우저 환경');

// DOM 조작
document.body.innerHTML = '<h1>Hello</h1>';

// Web API
fetch('/api/data')
  .then(res => res.json());

// 브라우저 전역 객체
console.log(window); // ✅
console.log(global); // ❌ undefined

Node.js

// Node.js에서만 작동
console.log('Node.js 환경');

// 파일 읽기
const fs = require('fs');
const data = fs.readFileSync('file.txt', 'utf-8');

// HTTP 서버
const http = require('http');
http.createServer((req, res) => {
  res.end('Hello');
}).listen(3000);

// Node.js 전역 객체
console.log(global); // ✅
console.log(window); // ❌ undefined

 

 

왜 헷갈릴까?

둘 다 V8을 사용하니까!

V8 엔진 (JavaScript 코어 실행)
    ↙          ↘
브라우저       Node.js
(환경 추가)    (환경 추가)

브라우저 환경:
+ DOM API
+ Web API
+ 렌더링 엔진

Node.js 환경:
+ File System
+ HTTP 모듈
+ Process

 

 

구체적인 예시

같은 코드, 다른 환경

// 이 코드는 둘 다 작동
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

// 브라우저에서만 작동
document.getElementById('app'); // ✅ 브라우저
                                 // ❌ Node.js (에러!)

// Node.js에서만 작동
require('fs').readFileSync('file.txt'); // ❌ 브라우저 (에러!)
                                         // ✅ Node.js

 

 

정리

 

핵심 차이

✅ 공통점:
- V8 엔진 사용
- JavaScript 문법 동일
- 기본 기능 동일 (변수, 함수, 배열 등)

✅ 차이점:
- 브라우저: DOM, CSS, HTML, Web API
- Node.js: File System, HTTP 서버, Process

✅ 목적:
- 브라우저: 웹 페이지 실행 (프론트엔드)
- Node.js: 서버, CLI 도구 (백엔드)

 

 

 

최종 정리

정확한 표현:

✅ "브라우저와 Node.js 모두 V8 엔진으로 JavaScript를 실행한다"
✅ "브라우저는 DOM API가 있고, Node.js는 File System이 있다"
✅ "브라우저는 웹 페이지를 위한 환경, Node.js는 서버를 위한 환경"

❌ "브라우저는 Node.js로 JavaScript를 실행한다"
   → 둘 다 V8을 직접 사용, Node.js를 거치지 않음