자바스크립트란? 설치와 첫 console.log

코딩을 처음 시작할 때 가장 많이 듣는 이름이 자바스크립트입니다. 웹페이지의 버튼을 누르면 무언가 움직이는 것, 카카오톡 채팅창처럼 실시간으로 메시지가 뜨는 것, 유튜브의 좋아요 카운트가 새로고침 없이 바뀌는 것 — 거의 모두 JS 가 뒤에서 일합니다. 1편은 "JS 가 어디서 돌아가는지"부터 "내 컴퓨터에서 첫 코드를 출력하는 법"까지를 천천히 같이 해봅니다.

JS 는 어디서 돌아가나 — 브라우저와 Node.js

자바스크립트는 1995년에 웹 브라우저 안에서만 돌리려고 만들어진 언어였습니다. "버튼 누르면 색깔 바꾸기" 정도가 처음의 사용처였죠. 지금은 두 곳에서 돌아갑니다.

• 브라우저 — 크롬·사파리·파이어폭스 안의 자바스크립트 엔진(V8·JavaScriptCore·SpiderMonkey)이 실행합니다. 새 탭에서 F12 → Console 만 열면 그 자리에서 코드를 칠 수 있습니다.
• Node.js — 2009년에 등장한 "브라우저 밖 자바스크립트". 같은 V8 엔진을 가져와서 서버, 자동화 스크립트, CLI 도구, 빌드 도구를 만들 때 씁니다.

이 두 환경은 코드 문법은 99% 같지만, 쓸 수 있는 도구가 다릅니다. 브라우저에서는 document(웹페이지)에 접근하고, Node 에서는 fs(파일 시스템)에 접근하는 식입니다. 교재 1~13편은 두 환경에서 모두 돌아가는 "순수 JS" 위주로 진행하고, 14편부터 환경별 차이를 본격적으로 다룹니다.

Node.js LTS 설치 — Windows · macOS · 우분투

1편에서는 Node.js 만 깔면 됩니다. 브라우저는 어차피 다 있으니까요. Node 를 깔면 터미널(명령창)에서 node hello.js 라고 칠 수 있게 됩니다. 버전은 항상 LTS(Long-Term Support) — 안정 지원 버전을 고르세요. 2026년 5월 기준 LTS 는 v22.x 대입니다.

Windows

1. nodejs.org 접속 → LTS 버튼(왼쪽, 초록색) 다운로드.
2. .msi 실행 → 기본 옵션 그대로 다음·다음·설치.
3. 설치 끝나면 PowerShell(시작 메뉴에서 검색) 을 새로 열어:

node --version
# 예: v22.11.0  ← 이렇게 버전이 떠야 OK

macOS

Homebrew 가 있으면 한 줄이면 끝납니다.

# Homebrew 가 없다면 먼저 설치:
# /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

brew install node
node --version

우분투 / 데비안

기본 저장소의 Node 는 보통 옛날 버전이라, NodeSource 의 최신 LTS 저장소를 권장합니다.

# Node.js 22 LTS 설치 (2026년 5월 기준)
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs
node --version
npm --version

설치가 끝나면 두 개 명령이 같이 생깁니다.

• node — 자바스크립트를 실행
• npm — 다른 사람이 만든 코드를 가져다 쓰는 패키지 관리자 (19편에서 자세히)

첫 console.log — 두 가지 방법

이제 진짜 첫 코드를 띄워봅니다. 두 가지 방법으로 모두 해보세요. 둘이 똑같이 작동한다는 걸 보면 "JS 가 어디서나 돈다"는 감이 옵니다.

방법 1 — 브라우저 콘솔 (설치 0)

1. 아무 웹페이지에서 F12 키를 누릅니다 (맥은 ⌥ + ⌘ + I).
2. 상단 탭 중 Console 클릭.
3. 아래 입력창에 다음 한 줄을 치고 엔터:

console.log("Hello, JS!");

바로 아래에 Hello, JS! 라고 흰색으로 출력되면 성공입니다.

방법 2 — Node 로 파일 실행

아무 폴더에서 hello.js 라는 이름의 파일을 만들고, 안에 한 줄을 넣습니다.

// hello.js
console.log("Hello, JS!");
console.log("오늘은", new Date().toLocaleDateString("ko-KR"), "입니다.");

그 폴더에서 터미널을 열고:

node hello.js
# 출력:
# Hello, JS!
# 오늘은 2026. 5. 16. 입니다.

두 줄이 차례로 뜨면 됩니다. console.log() 는 앞으로 가장 많이 쓸 명령입니다 — "지금 이 값이 무엇인지 보여줘" 라고 JS 한테 말하는 표준 방법입니다.

VS Code 추천 — 무엇으로 코드를 쓰나

메모장으로도 JS 는 쓸 수 있지만, 코드 편집기를 쓰면 문법 강조, 자동완성, 에러 표시가 즉시 보입니다. 무료 표준은 Visual Studio Code(VS Code) — 마이크로소프트가 만들고 거의 모든 직장에서 씁니다.

1. code.visualstudio.com 에서 OS 별 설치.
2. 왼쪽 사이드바 네모 아이콘 → 확장 검색에서 다음 3개만 우선 설치:
   • Korean Language Pack — UI 한국어화 (선택)
   • Prettier - Code formatter — 저장하면 자동 정렬 (12편에서 더 자세히)
   • JavaScript (ES6) code snippets — clg 치면 console.log() 자동 완성
3. 폴더를 통째로 열려면 파일 → 폴더 열기. hello.js 가 사이드바에 보이면 끝.

교재 26편 로드맵 — 우리는 어디로 가나

1편에서 "Hello, JS!" 를 띄웠다면, 26편을 마칠 즈음 어떤 능력이 생기는지 한 눈에 보여드릴게요.

한 편을 30분~1시간이면 충분히 따라올 수 있게 짧고 친절하게 쓰겠습니다. 모르는 단어가 나오면 그 편에서 반드시 한 번 풀이를 합니다. 시리즈 전체에서 "왜 이걸 쓰지?" 라는 질문에 답하는 데 가장 많은 분량을 씁니다 — 문법만 외우는 것보다 한 칸 더 깊게요.