[JavaScript] JS 실행 환경: 브라우저와 Node.js

 
모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있습니다.
브라우저 뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있습니다.
즉, 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있는데요.
 
한 가지 주의해야 할 점은 브라우저와 Node.js는 용도가 다르다는 것입니다!

이로 인해 브라우저에서만 동작하는 클라이언트 사이드 Web API와
브라우저와 Node.js 환경 모두에서 실행 가능한 ECMAScript 표준 빌트인 함수를 구분할 수 있어야 합니다.
 

---

 

1. 자바스크립트 실행 환경: 브라우저 vs Node.js 이해하기

브라우저는 HTML,CSS,JS를 실행해 웹페이지를 브라우저에 렌더링하는 것이 주 목적이지만,
Node.js는  브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적입니다.

 
브라우저

• 사용자가 웹페이지를 볼 수 있도록 HTML, CSS, JavaScript를 렌더링하는 도구.
• 예: Chrome, Firefox, Safari, Edge.
• JavaScript는 주로 UI 조작, DOM(Document Object Model) 접근, 이벤트 처리 등에 사용됩니다.

Node.js

• 브라우저 외부에서 JavaScript를 실행할 수 있는 런타임 환경.
• V8 JavaScript 엔진 기반으로 만들어졌으며, 서버 개발, 백엔드 로직 처리, 파일 시스템 관리 등에서 주로 사용됩니다.
• JavaScript를 브라우저 외의 환경으로 확장시킨 혁신적인 도구.
• npm: 자바스크립트 패키지 매니저, node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역활과 패키지 설치 및 관리를 위한 CLI를 제공.

---

2. 브라우저와 Node.js에서의 주의점

(1) 글로벌 객체 차이

• 브라우저에서는 window가 글로벌 객체로 동작하지만, Node.js에서는 global 객체가 이를 대체합니다.

// 브라우저
console.log(window); // Window 객체

// Node.js
console.log(global); // Global 객체

(2) DOM 사용 불가

• Node.js에는 DOM이 없으므로 document나 window 객체를 사용할 수 없습니다.
• DOM 조작이 필요하다면 jsdom 같은 라이브러리를 사용해야 합니다.

(3) 모듈 사용

• 브라우저는 ES 모듈(import/export)만 지원하지만, Node.js는 CommonJS(require)와 ES 모듈을 모두 지원합니다.
• 최신 Node.js에서는 ES 모듈을 사용하려면 파일 확장자를 .mjs로 하거나 package.json에 "type": "module"을 설정해야 합니다.

(4) 파일 시스템 및 보안

• 브라우저는 보안 문제로 파일 시스템에 접근하지 못하지만, Node.js는 파일 읽기/쓰기 권한이 있으므로 보안 관리가 중요합니다.

(5) 이벤트 루프의 차이

• 브라우저의 이벤트 루프는 UI 작업과 렌더링을 포함하지만, Node.js는 주로 서버 작업에 집중된 비동기 이벤트 루프를 사용합니다.

 

---

요약

브라우저와 Node.js는 동일한 JavaScript를 실행하지만, 제공하는 기능과 환경은 크게 다릅니다!
 
브라우저: UI와 DOM 조작에 중점을 둔 환경.
Node.js: 서버 개발 및 백엔드 작업에 특화된 런타임.
 
콘솔과 디버깅에 대한 자세한 내용은
구글의 'Tools for Web Developers: 콘솔 사용'
'Tools for Web Developers: Chrome DevTools에서 자바스크립트 디버깅 시작하기'
를 참고하세요.
 
 
 

모던 자바스크립트 Deep Dive

해당 게시물은 위 도서를 통해 공부한 내용입니다.

~ 오류나 보완할 점에 대한 조언과 응원은 언제나 감사합니다! ~