모던 자바스크립트 Deep Dive 3장 자바스크립트 개발 환경과 실행 방법

자바스크립트를 공부하기 시작하면 가장 먼저 마주치는 질문이 있다. "그래서 이 코드를 어디서 실행하지?" 자바스크립트는 브라우저에서도 돌아가고 Node.js에서도 돌아가는데, 둘은 비슷해 보이지만 분명히 다르다. 이번 글에서는 두 실행 환경의 차이와 실제로 코드를 실행하는 방법을 정리한다.

자바스크립트 엔진: 브라우저와 Node.js의 공통점

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 대표적인 것이 구글이 만든 V8 엔진으로, Chrome과 Edge 등에서 사용된다.

Node.js 역시 이 V8 엔진을 그대로 내장해서 만든 **자바스크립트 런타임(실행 환경)**이다. V8이라는 부품(엔진) 위에 파일 시스템, 네트워크 같은 기능을 얹어서, 브라우저 밖에서도 자바스크립트를 실행할 수 있게 만든 것이다.

즉, 브라우저와 Node.js는 같은 엔진을 공유하지만 그 위에 얹힌 기능이 다르다.

하지만 용도는 다르다

구분브라우저Node.js

주된 목적	HTML/CSS/JS를 해석해 화면에 렌더링	브라우저 밖에서의 자바스크립트 실행 환경 제공
제공하는 API	DOM API, BOM, Canvas, fetch 등 (클라이언트 사이드 Web API)	File System(fs), HTTP 서버, process 등 (Node.js 고유 API)

여기서 중요한 개념 하나를 짚고 가자.

ECMAScript(언어 코어)는 브라우저와 Node.js 어디서든 동일하게 동작한다. 다만 각 호스트 환경이 제공하는 추가 API가 다를 뿐이다.

변수, 함수, 객체, 반복문 같은 언어의 핵심 문법(ECMAScript)은 어느 환경에서든 똑같이 쓸 수 있다. 하지만 브라우저에서는 fs.readFile(파일 읽기)을 쓸 수 없고, Node.js에서는 document.querySelector(DOM 조작)를 쓸 수 없다. 각 API가 "호환되지 않는" 것이 아니라, 애초에 그 환경에만 존재하는 API이기 때문이다.

• 브라우저는 화면을 그리는 것이 목적이므로 DOM을 조작하는 API를 제공하고,
• Node.js는 서버 등 범용 실행 환경이 목적이므로 파일을 읽고 쓰는 API를 제공한다.

브라우저에서 자바스크립트 실행하기: 개발자 도구 콘솔

가장 간단한 실행 방법은 브라우저 개발자 도구의 Console을 이용하는 것이다.

• Windows: F12 또는 Ctrl + Shift + I
• Mac: Cmd + Option + I

개발자 도구를 열고 Console 탭으로 이동하면 자바스크립트 코드를 바로 입력하고 실행할 수 있다.

 

javascript

console.log("자바스크립트야 안녕?")

실행하면 콘솔에 자바스크립트야 안녕?이 출력되고, 그 아래에 undefined가 함께 표시된다.

잠깐, undefined는 뭐지?

처음 보면 에러인가 싶지만 에러가 아니다. 콘솔은 REPL(Read-Eval-Print Loop) 환경이라서, 입력한 표현식의 평가 결과(반환값) 를 항상 보여준다.

• console.log()는 문자열을 출력하는 일은 하지만, 함수 자체는 아무것도 반환하지 않는다. 그래서 반환값이 undefined로 표시되는 것이다.
• 반면 1 + 2를 입력하면 표현식의 평가 결과인 3이 표시된다.

"출력"과 "반환값"은 다르다는 이 구분은 나중에 함수의 반환값 개념을 배울 때 그대로 이어지므로 지금 기억해 두면 좋다.

그 밖의 실행 방법

콘솔 외에도 자바스크립트를 실행하는 방법은 여러 가지가 있다.

1. HTML 파일에 <script> 태그로 포함해서 브라우저로 열기 — 실제 웹 페이지가 동작하는 방식과 동일
2. 터미널에서 node 파일명.js 로 실행 — Node.js가 설치되어 있다면 파일 단위로 실행 가능 (node만 입력하면 Node.js REPL 진입)
3. VS Code + Code Runner 확장 또는 내장 터미널 활용 — 에디터에서 바로 실행

정리

• 브라우저와 Node.js는 모두 자바스크립트 엔진(V8)을 내장하지만, 브라우저는 렌더링, Node.js는 범용 실행 환경 제공이 목적이다.
• ECMAScript(언어 코어)는 어디서든 동일하고, 호스트 환경이 제공하는 API(Web API vs Node.js 고유 API)만 다르다.
• 가장 간단한 실행 방법은 개발자 도구 콘솔이며, 콘솔은 REPL 환경이라 출력값과 별개로 표현식의 반환값을 보여준다. console.log() 뒤의 undefined는 에러가 아니라 반환값이다.

다음 글에서는 변수와 데이터 타입을 다룰 예정이다.