자바스크립트가 어떤 언어인지, 브라우저와 Node.js라는 두 실행 환경이 어떻게 다른지 정리합니다. 개발자 도구 콘솔 사용법, Node.js 설치와 확인 방법, console.log로 첫 코드를 실행하는 과정까지 차근차근 따라 해 봅니다.
자바스크립트로 코드를 쓰려면 먼저 그 코드가 어디에서 실행되는지 알아야 해요. 이번 강에서는 자바스크립트가 어떤 언어인지 살펴보고, 브라우저 개발자 도구와 Node.js라는 두 실행 환경을 준비한 뒤 console.log로 첫 코드를 실행해 봅니다.
앞으로 46강 동안 모든 예제를 직접 실행하며 배우게 되니, 이번 강의 환경 준비를 꼭 끝내 두세요.
자바스크립트는 어떤 언어인가요
자바스크립트(JavaScript)는 원래 웹 페이지를 움직이게 하려고 만들어진 프로그래밍 언어예요. 버튼을 누르면 메뉴가 펼쳐지거나, 새로고침 없이 댓글이 추가되는 동작이 대부분 자바스크립트로 만들어져요.
지금은 웹 페이지뿐 아니라 서버, 명령줄 도구, 데스크톱·모바일 앱까지 만들 수 있는 범용 언어가 되었어요. 웹 개발을 하려면 거의 반드시 만나게 되는 언어라서 첫 언어로 배우기에도 좋아요.
자바(Java)와는 다른 언어예요
이름이 비슷하지만 자바와 자바스크립트는 문법도, 쓰임새도 다른 별개의 언어예요. 이름은 탄생 당시 자바의 인기를 빌리려는 마케팅 때문에 붙은 것이라 둘을 헷갈리지 않아도 돼요.
ECMAScript라는 표준
자바스크립트의 공식 문법 표준은 ECMAScript라고 불러요. 해마다 새 버전(ES2024, ES2025 같은 이름)이 나오며 기능이 조금씩 추가돼요.
이 강좌는 최신 브라우저와 Node.js에서 동작하는 현대적인 문법을 기준으로 설명해요.
실행 환경: 브라우저와 Node.js
자바스크립트 코드는 혼자서 실행되지 않고, 코드를 읽어서 실행해 주는 실행 환경이 필요해요. 대표적인 실행 환경은 두 가지예요.
| 구분 | 브라우저 | Node.js |
|---|---|---|
| 실행 위치 | 크롬, 엣지, 파이어폭스 등 웹 브라우저 안 | 내 컴퓨터의 터미널(명령 프롬프트) |
| 주 용도 | 웹 페이지의 화면 동작 | 서버, 명령줄 도구, 개발 도구 |
| 설치 | 브라우저만 있으면 됨 | Node.js를 따로 설치해야 함 |
| 출력 확인 | 개발자 도구의 콘솔 탭 | 터미널 화면 |
| 고유 기능 예시 | alert(알림 창 띄우기) |
파일 읽기·쓰기 |
두 환경 모두 같은 자바스크립트 문법을 이해해요. 다만 환경마다 추가로 제공하는 기능이 달라서, 브라우저에서 되는 코드가 Node.js에서는 안 되는 경우가 있어요.
환경 차이를 직접 확인하는 예
alert는 브라우저에서 알림 창을 띄우는 기능이에요. 브라우저 콘솔에서 아래 코드를 실행하면 창이 뜨지만, Node.js에서는 그런 창이 없으니 오류가 나요.
alert('안녕하세요!');
Node.js에서 실행하면 다음과 같은 오류를 볼 수 있어요.
ReferenceError: alert is not defined
alert is not defined는 'alert라는 것이 정의되어 있지 않다'는 뜻이에요. 문법은 같아도 환경이 제공하는 기능은 다르다는 점을 기억해 두세요.
반면 이번 강에서 배울 console.log는 두 환경 모두에서 동작해요. 그래서 이 강좌의 예제는 대부분 console.log로 결과를 확인해요.
브라우저 개발자 도구 콘솔 사용하기
설치 없이 가장 빨리 자바스크립트를 실행하는 방법은 브라우저의 개발자 도구 콘솔이에요. 크롬이나 엣지 기준으로 설명할게요.
콘솔 여는 방법
| 운영체제 | 단축키 |
|---|---|
| Windows / Linux | F12 또는 Ctrl + Shift + J |
| macOS | Cmd + Option + J |
단축키 대신 웹 페이지 빈 곳에서 마우스 오른쪽 버튼을 눌러 '검사'를 선택한 뒤, 위쪽 탭에서 Console(콘솔)을 눌러도 돼요.
콘솔에서 코드 실행하기
콘솔 맨 아래 > 표시 옆에 코드를 입력하고 Enter를 누르면 바로 실행돼요. 다음 코드를 입력해 보세요.
console.log('브라우저에서 실행한 첫 코드');
브라우저에서 실행한 첫 코드
undefined
첫 줄은 console.log가 출력한 내용이에요. 둘째 줄의 undefined는 콘솔이 '방금 실행한 코드의 결과값'을 덤으로 보여 준 것인데, console.log 자체는 돌려주는 값이 없어서 undefined가 표시돼요.
오류가 아니니 신경 쓰지 않아도 돼요. (undefined는 3강 자료형에서 자세히 다뤄요.)
여러 줄 입력과 붙여넣기 주의
콘솔에서 Enter는 곧바로 실행이에요. 여러 줄을 입력하고 싶다면 Shift + Enter로 줄을 바꾸세요.
다른 곳에서 복사한 코드를 처음 붙여넣으면, 크롬은 보안을 위해 붙여넣기를 막고 allow pasting을 직접 입력하라는 경고를 보여 줄 수 있어요. 출처를 모르는 코드를 콘솔에 붙여넣으면 계정 정보가 탈취될 수 있으니, 내용을 이해한 코드만 실행하세요.
Node.js 설치하기
브라우저 콘솔은 간단히 시험해 보기에 좋지만, 코드를 파일로 저장하고 반복 실행하기에는 Node.js가 편해요. 이 강좌의 예제도 Node.js에서 그대로 실행되도록 작성했어요.
설치 순서
- 공식 사이트
https://nodejs.org에 접속해요. - LTS(Long Term Support, 장기 지원) 버전을 내려받아요. LTS는 오랫동안 안정적으로 지원되는 버전이라 학습용으로 가장 알맞아요.
- 내려받은 설치 파일을 실행하고 기본 설정 그대로 '다음'을 눌러 설치를 마쳐요.
macOS나 Linux에서 패키지 관리자나 nvm 같은 버전 관리 도구를 써도 되지만, 처음이라면 공식 설치 파일이 가장 간단해요.
설치 확인
설치가 끝나면 터미널을 새로 열어요. Windows는 '명령 프롬프트'나 'PowerShell', macOS는 '터미널' 앱을 쓰면 돼요.
그리고 다음 명령을 입력해요.
node -v
npm -v
v24.11.1
11.6.2
숫자는 설치한 시점에 따라 달라요. v로 시작하는 버전 번호가 보이면 성공이에요.
npm은 Node.js와 함께 설치되는 패키지 관리 도구로, 나중에 다른 사람이 만든 코드를 내려받을 때 사용해요.
REPL로 바로 실행해 보기
터미널에 node만 입력하면 REPL(Read-Eval-Print Loop)이라는 대화형 모드가 열려요. 브라우저 콘솔처럼 한 줄씩 입력하면 바로 실행돼요.
$ node
Welcome to Node.js v24.11.1.
Type ".help" for more information.
> console.log('REPL에서 안녕!')
REPL에서 안녕!
undefined
> 2 + 3
5
> .exit
REPL을 빠져나올 때는 .exit를 입력하거나 Ctrl + C를 두 번 누르면 돼요.
파일로 첫 코드 실행하기
이제 코드를 파일로 저장해서 실행해 볼게요. 코드 편집기는 무료인 Visual Studio Code(VS Code)를 많이 써요.
메모장으로도 가능하지만 편집기를 쓰면 오타를 찾기 훨씬 쉬워요.
hello.js 만들기
작업할 폴더를 하나 만들고, 그 안에 hello.js라는 파일을 만들어 아래 내용을 저장하세요. 자바스크립트 파일의 확장자는 .js예요.
// 나의 첫 자바스크립트 프로그램
console.log('Hello, JavaScript!');
console.log('자바스크립트 첫 코드');
터미널에서 그 폴더로 이동한 뒤 node 파일이름으로 실행해요.
cd 작업폴더경로
node hello.js
Hello, JavaScript!
자바스크립트 첫 코드
코드 해설
//뒤의 내용은 주석이에요. 사람이 읽는 메모라서 실행되지 않아요.console.log(...)는 괄호 안의 값을 화면에 한 줄로 출력해요.'Hello, JavaScript!'처럼 따옴표로 감싼 글자를 문자열이라고 해요. 작은따옴표'와 큰따옴표"둘 다 쓸 수 있어요.- 줄 끝의
;(세미콜론)은 '문장이 끝났다'는 표시예요. 생략해도 대부분 동작하지만, 이 강좌에서는 붙이는 스타일로 통일해요. - 코드는 위에서 아래로 한 줄씩 순서대로 실행돼요.
console.log 자세히 보기
console.log는 값을 확인하는 가장 기본적인 도구예요. 앞으로 코드가 예상대로 동작하는지 확인할 때 계속 쓰게 되니 여러 사용법을 익혀 두세요.
여러 값과 계산 결과 출력하기
// 쉼표로 여러 값을 한 번에 출력
console.log('사과', '바나나', '포도');
// 문자열과 계산 결과를 함께 출력
console.log('2 + 3 =', 2 + 3);
// 숫자 계산은 따옴표 없이
console.log(10 * 4);
console.log(7 / 2);
// 괄호를 비워 두면 빈 줄 출력
console.log();
console.log('끝');
사과 바나나 포도
2 + 3 = 5
40
3.5
끝
코드 해설
- 괄호 안에 쉼표
,로 값을 나열하면, 값 사이에 공백 한 칸을 넣어 한 줄로 출력해요. '2 + 3 ='은 따옴표 안에 있으니 글자 그대로 출력되고, 따옴표 밖의2 + 3은 계산되어5가 출력돼요.*는 곱하기,/는 나누기예요. 연산자는 4강에서 자세히 배워요.console.log()처럼 아무것도 넣지 않으면 빈 줄 하나가 출력돼요.
따옴표가 있을 때와 없을 때
따옴표의 유무에 따라 결과가 완전히 달라져요. 이 차이를 꼭 눈으로 확인해 보세요.
console.log('10 + 20'); // 문자열: 글자 그대로 출력
console.log(10 + 20); // 숫자: 계산 결과 출력
10 + 20
30
주석 쓰는 두 가지 방법
// 한 줄 주석: 이 줄의 // 뒤는 실행되지 않아요
/*
여러 줄 주석:
이 사이의 내용은 모두 무시돼요
*/
console.log('주석은 출력되지 않아요'); // 줄 끝에도 주석을 달 수 있어요
주석은 출력되지 않아요
console의 다른 출력 기능 맛보기
console에는 log 말고도 출력 기능이 더 있어요. 브라우저 콘솔에서 실행하면 색깔과 아이콘이 다르게 표시돼서 구분하기 쉬워요.
| 메서드 | 용도 |
|---|---|
console.log() |
일반 출력 |
console.warn() |
경고 메시지(노란색 표시) |
console.error() |
오류 메시지(빨간색 표시) |
Node.js에서 console.warn과 console.error는 일반 출력과 다른 통로(표준 에러)로 내보내져요. 지금은 '이런 것도 있다' 정도로만 알아 두고, 학습 중에는 console.log만 써도 충분해요.
초보자가 자주 하는 실수
처음에는 오류 메시지가 낯설어서 당황하기 쉬워요. 메시지의 첫 단어와 줄 번호를 읽는 습관을 들이면 대부분 금방 고칠 수 있어요.
대소문자를 틀린 경우
자바스크립트는 대소문자를 구분해요. console.Log나 Console.log는 전혀 다른 이름으로 취급돼요.
console.Log('안녕'); // L이 대문자
TypeError: console.Log is not a function
'console.Log는 함수가 아니다'라는 뜻이에요. 철자와 대소문자를 다시 확인하세요.
따옴표 짝이 맞지 않는 경우
console.log('안녕하세요);
SyntaxError: Invalid or unexpected token
SyntaxError는 문법 오류예요. 문자열을 여는 따옴표와 닫는 따옴표는 같은 종류로 짝을 맞춰야 해요.
'안녕"처럼 섞어 써도 같은 오류가 나요.
REPL 안에서 node 명령을 입력한 경우
node를 입력해 REPL(> 표시)에 들어간 상태에서 node hello.js를 입력하면 문법 오류가 나요. 파일 실행 명령은 REPL이 아니라 터미널에서 입력해야 해요.
.exit로 먼저 빠져나오세요.
파일을 찾지 못하는 경우
Error: Cannot find module 'C:\Users\me\hello.js'
터미널의 현재 폴더에 hello.js가 없을 때 나는 오류예요. cd 명령으로 파일이 있는 폴더로 이동했는지, 파일 이름에 오타가 없는지, 확장자가 hello.js.txt처럼 잘못 저장되지 않았는지 확인하세요.
node 명령을 인식하지 못하는 경우
Windows에서 'node'은(는) 내부 또는 외부 명령... 이 아닙니다라는 메시지가 나오면, 설치 직후 터미널을 새로 열지 않았거나 설치가 제대로 끝나지 않은 경우가 많아요.
터미널을 닫았다가 다시 열고, 그래도 안 되면 다시 설치해 보세요.
연습 문제
문제 1
intro.js 파일을 만들어 아래처럼 세 줄을 출력하세요.
이름: 김코딩
관심 분야: 웹 개발
목표: 자바스크립트 완주하기
문제 2
console.log 한 번에 쉼표를 사용해, 하루가 몇 분인지 계산해서 다음처럼 출력하세요. 숫자 1440은 직접 쓰지 말고 24 * 60으로 계산하세요.
하루는 1440 분입니다.
문제 3
다음 코드에는 오류가 두 군데 있어요. 고쳐서 Hello 다음 줄에 World가 출력되게 만드세요.
console.log('Hello");
Console.log('World');
정답 예시
문제 1 정답
// 자기소개 세 줄 출력
console.log('이름: 김코딩');
console.log('관심 분야: 웹 개발');
console.log('목표: 자바스크립트 완주하기');
이름: 김코딩
관심 분야: 웹 개발
목표: 자바스크립트 완주하기
console.log를 세 번 호출하면 세 줄이 순서대로 출력돼요.
문제 2 정답
// 쉼표로 문자열과 계산 결과를 이어서 출력
console.log('하루는', 24 * 60, '분입니다.');
하루는 1440 분입니다.
쉼표로 나열한 값 사이에 공백이 자동으로 들어가서 하루는 1440 분입니다.가 돼요.
문제 3 정답
// 따옴표 짝 맞추기, console은 소문자로
console.log('Hello');
console.log('World');
Hello
World
첫 줄은 작은따옴표로 열고 큰따옴표로 닫아서 SyntaxError가 났고, 둘째 줄은 Console의 대문자 C 때문에 ReferenceError: Console is not defined가 났어요.
핵심 정리
- 자바스크립트는 웹 페이지에서 시작해 지금은 서버·도구·앱까지 만드는 범용 언어이고, 표준 이름은 ECMAScript예요.
- 코드를 실행하려면 실행 환경이 필요하며, 대표적으로 브라우저와 Node.js가 있어요.
- 두 환경은 문법은 같지만 제공하는 기능이 달라요.
alert는 브라우저 전용이고,console.log는 둘 다 쓸 수 있어요. - 브라우저 콘솔은
F12(macOS는Cmd + Option + J)로 열고, 입력 후Enter로 바로 실행해요. - Node.js는 nodejs.org에서 LTS 버전을 설치하고
node -v로 확인해요. - 파일은
.js로 저장하고 터미널에서node 파일이름.js로 실행해요. console.log는 쉼표로 여러 값을 공백으로 이어 출력하고, 따옴표 안은 글자 그대로, 따옴표 밖의 식은 계산해서 출력해요.- 주석은
//(한 줄)과/* */(여러 줄)로 쓰고, 자바스크립트는 대소문자를 구분해요.
강좌 이어 보기
- 다음 강좌: 2강 변수: let·const·var (곧 올라옵니다)
- 자바스크립트 강좌 전체 목차 보기