자바스크립트는 어디서 실행될까? 3가지 환경
자바스크립트는 혼자서 실행되지 않습니다. 언어를 해석해 줄 호스트 환경이 꼭 필요하죠. 2026년 현재 실무에서 실제로 쓰이는 자바스크립트 실행 환경은 딱 세 가지입니다.
- 브라우저. 모든 브라우저에는 자바스크립트 엔진이 기본 탑재되어 있습니다 (크롬·엣지는 V8, 파이어폭스는 SpiderMonkey, 사파리는 JavaScriptCore). 개발자 도구에 코드를 붙여 넣기만 하면 바로 실행됩니다.
- Node.js. 브라우저 밖에서 자바스크립트를 돌릴 수 있는 독립 런타임입니다. 터미널, 서버, 빌드 도구 어디서든 쓸 수 있죠.
- 온라인 플레이그라운드와 에디터 위젯 (이 페이지에 있는 것 같은 것들). 사실 속을 들여다보면 위 두 환경 중 하나를 웹 UI로 감싼 것에 불과합니다.
언어 자체는 어디서든 동일합니다. 달라지는 건 _코드가 접근할 수 있는 범위_예요. 브라우저에서는 document와 window를 쓸 수 있고, Node에서는 파일 시스템과 네트워크를 다룰 수 있습니다. 지금 상황에서 편한 쪽부터 시작하세요. 나중에 언제든 갈아탈 수 있으니까요.
방법 1: 크롬 개발자 도구 콘솔에서 자바스크립트 실행
자바스크립트 한 줄을 가장 빠르게 실행해 보는 방법은 브라우저의 개발자 도구 콘솔입니다. 아무 웹 페이지나 연 다음 F12 (맥이라면 Cmd+Option+I)를 누르고, Console 탭을 클릭한 뒤 다음을 입력해 보세요:
각 줄마다 Enter를 누르면 됩니다. 콘솔은 표현식의 반환값과 console.log에 전달한 값을 그대로 출력해 줍니다. 변수를 정의하거나 함수를 호출할 수 있고, 현재 페이지도 들여다볼 수 있어요 — 예를 들어 document.title을 입력하면 현재 탭의 제목이 나옵니다.
크롬 개발자 도구 콘솔은 이럴 때 특히 유용합니다:
- 짧은 코드 조각을 2초 만에 테스트하고 싶을 때.
- 실제 사이트의 DOM을 이것저것 건드려 보고 싶을 때.
- 페이지에서 이미 돌아가고 있는 코드를 디버깅할 때.
다만 콘솔에 입력한 내용은 탭을 닫는 순간 전부 사라집니다. 계속 남겨두고 싶은 코드라면 파일로 저장해야 해요.
방법 2: HTML 파일에 <script> 태그로 넣기
웹 페이지의 일부로 자바스크립트를 실행하고 싶다면 HTML 파일 안에 넣으면 됩니다. 아래 내용을 index.html로 저장한 뒤 더블클릭해서 브라우저로 열어 보세요:
<!doctype html>
<html>
<body>
<h1 id="title">로딩 중...</h1>
<script>
document.getElementById("title").textContent = "스크립트에서 안녕하세요";
console.log("스크립트가 실행되었습니다");
</script>
</body>
</html>
<script> 태그는 브라우저에게 "이 부분은 JavaScript로 실행해줘"라고 알려주는 역할을 합니다. 이 코드는 자신이 포함된 페이지에 접근할 수 있기 때문에, document.getElementById(...)로 위쪽에 있는 <h1>을 가져올 수 있죠. console.log 출력 결과는 개발자 도구(DevTools)에서 확인할 수 있습니다.
코드가 몇 줄 이상으로 길어진다면, 별도의 파일로 분리한 뒤 다음과 같이 연결해서 사용하세요:
<script src="app.js"></script>
<script> 태그는 <body> 끝부분에 두거나 defer 속성을 붙여야 HTML 파싱이 끝난 뒤에 실행됩니다. 모듈 스크립트와 로딩 순서에 대한 자세한 내용은 모듈 챕터에서 다룹니다.
방법 3: 터미널에서 Node.js로 실행하기
브라우저 없이 자바스크립트를 돌리고 싶을 때 — 파일 이름을 일괄 변경하는 스크립트, 간단한 서버, 빠르게 돌려보는 데이터 처리 작업 — 이런 상황에는 Node.js가 제격입니다. nodejs.org에서 LTS 버전을 설치한 뒤, 제대로 깔렸는지 확인해 봅시다.
node --version
script.js 파일로 저장하세요:
같은 폴더에서 아래 명령어를 실행하세요:
node script.js
출력은 터미널에 바로 찍힙니다. HTML도, 브라우저도, 빌드 과정도 필요 없죠. 브라우저 밖에서 이루어지는 "실전" 자바스크립트 개발은 대부분 이런 식으로 돌아갑니다. 게다가 Node는 브라우저 프로젝트를 둘러싼 도구들(번들러, 테스트 러너, 린터)까지 돌리는 엔진이기도 해요.
파일 없이 Node만 실행할 수도 있습니다. 터미널에 node만 치고 엔터를 누르면 대화형 프롬프트(REPL)가 열려서, 입력하는 대로 한 줄씩 바로 실행돼요. 브라우저 콘솔처럼 터미널에서 이것저것 빠르게 테스트해 보기 좋습니다.
네 번째 방법: 이 페이지의 에디터
Coddy의 모든 editor-javascript 블록은 실제로 동작하는 라이브 에디터입니다. 코드를 수정하고 Run 버튼을 누르면 바로 결과가 나오죠. 설치도, 설정도, 탭 전환도 필요 없어서 배우는 단계에서 가장 부담 없는 방법이에요:
"세계" 부분을 본인 이름으로 바꿔서 다시 실행해 보세요. 이게 전부입니다 — 수정하고, 실행하고, 결과를 읽는 것. 이 튜토리얼 대부분이 이 흐름을 중심으로 짜여 있습니다.
어떤 방법을 써야 할까?
지금 하려는 일에 맞는 걸 고르면 됩니다:
- 한 줄짜리 코드를 빠르게 테스트하거나, 실제 페이지를 들여다볼 때 — 브라우저 콘솔.
- 웹페이지와 함께 뭔가를 만들 때 — HTML 파일에
<script>태그 사용. - 스크립트, 툴, 서버를 짤 때 — 터미널에서 Node.js 실행.
- 이 튜토리얼을 따라갈 때 — 바로 여기 있는 에디터 블록.
초보자들이 자주 헷갈리는 부분 몇 가지:
- Node.js 환경에는
document나window가 없습니다. 이건 브라우저 전용입니다. Node에서document.getElementById(...)를 호출하면ReferenceError: document is not defined에러가 납니다. - 브라우저 코드는 로컬 파일 시스템에 접근할 수 없습니다. 보안 때문에 브라우저가 페이지를 샌드박스에 가둬두거든요. 로컬 파일을 읽고 싶다면 Node.js 쪽으로 가야 합니다.
console.log는 세 환경 모두에서 동작합니다. 자바스크립트에서 "뭔가 출력하기"의 만능 도구라고 보면 됩니다.
환경이 제대로 돌아가는지 확인하는 스크립트
앞에서 고른 환경에서 아래 코드를 실행해 보세요. 세 줄이 제대로 출력되면 다음 페이지로 넘어갈 준비가 된 겁니다:
한 줄짜리 예제에 세 가지 핵심 기능이 녹아 있습니다. console.log, 내장 Date 객체, 그리고 화살표 함수와 함께 쓰는 배열 메서드죠. 각각에 대해서는 이후 장에서 하나씩 제대로 다룰 예정입니다.
다음 주제: 문법과 세미콜론
이제 코드를 실제로 실행해 볼 환경은 갖춰졌으니, 다음으로 살펴볼 것은 자바스크립트 문법의 생김새입니다. 문(statement)과 식(expression), 그리고 줄 끝마다 세미콜론을 붙일지 말지에 대한 해묵은 논쟁까지 다음 장에서 이어가 보겠습니다.
자주 묻는 질문
자바스크립트 코드는 어떻게 실행하나요?
크게 세 가지 방법이 있습니다. 첫째, 브라우저 개발자 도구 콘솔에 코드를 붙여넣고 Enter를 누르면 됩니다. 둘째, HTML 파일 안에 <script> 태그로 넣고 파일을 열면 됩니다. 셋째, Node.js를 설치한 뒤 터미널에서 node script.js로 실행할 수도 있습니다. 세 방법 모두 같은 언어를 실행하지만, 코드가 돌아가는 환경만 다를 뿐입니다.
터미널(명령 프롬프트)에서 자바스크립트 파일을 실행하려면?
먼저 nodejs.org에서 Node.js를 설치하고 코드를 script.js로 저장하세요. 그런 다음 해당 파일이 있는 폴더에서 터미널을 열고 node script.js를 입력하면 됩니다. console.log(...)로 찍은 값은 터미널에 바로 출력됩니다. HTML도, 브라우저도, 별도 빌드 과정도 필요 없습니다.
크롬에서 자바스크립트를 실행하는 방법은?
아무 웹 페이지나 열고 F12(맥은 Cmd+Option+I)를 눌러 개발자 도구를 연 다음 Console 탭으로 이동하세요. 표현식을 입력하고 Enter를 누르면 현재 페이지를 기준으로 즉시 실행됩니다. 짧은 코드 테스트, DOM 확인, 실제 사이트 동작 확인에 가장 빠른 방법입니다.
