내 컴퓨터에서 자바스크립트를 돌리려면 Node를 설치하고, 작업 폴더에 package.json과 main.js를 만든 뒤 편집기의 터미널에서 node main.js를 칩니다. 끝으로 설정 확인 줄 console.log(this);가 undefined를 찍는지 보고, 레슨과 같은 규칙으로 도는지 확인합니다.
설치가 막혀도 레슨은 폰으로 끝까지 따라갈 수 있습니다. 그래도 직접 바꿔 돌려 보면 예상과 다른 결과를 그 자리에서 확인하고 고칠 수 있습니다. 여기서 만든 환경은 레슨마다 끝에 있는 '컴퓨터에서 해 보기'에 씁니다. Windows나 macOS 컴퓨터가 있어야 하고, 폰·태블릿에서는 할 수 없습니다.
1Node 설치하기
Node는 웹 브라우저 밖에서 자바스크립트를 실행하는 프로그램입니다. nodejs.org/en/download에 들어가 아래처럼 받습니다.
- 맨 위 'Get Node.js®' 옆의 판 번호에 LTS라고 적혀 있는지 봅니다. LTS는 오래 지원하는 판이라는 표시입니다. 그 아래 칸에 나오는 설치 명령(macOS는 nvm, Windows는 Docker 등)은 쓰지 않습니다.
- 'Or get a prebuilt Node.js®' 줄 아래의 단추로 설치 파일을 받습니다. macOS는 'macOS Installer (.pkg)', Windows는 'Windows Installer (.msi)'입니다.
- 받은 파일을 두 번 눌러 설치합니다. 묻는 것은 정해진 대로 두고 넘어가면 되고, 사용권에는 동의하고 관리자 암호를 물으면 넣습니다.
2작업 폴더를 열고 터미널 열기
편집기는 VS Code를 씁니다. HTML·CSS 과목을 했다면 이미 깔려 있습니다. 없으면 code.visualstudio.com에서 받아 설치합니다. macOS는 받은 파일을 열어 나온 Visual Studio Code를 응용 프로그램(Applications) 폴더로 끌어다 놓고, Windows는 받은 설치 파일을 두 번 눌러 정해진 대로 넘깁니다. 메뉴 이름은 영어 화면 기준이고, 괄호 안은 한국어 화면의 이름입니다.
- 바탕화면에
js-study폴더를 만듭니다. - VS Code에서 File → Open Folder(파일 → 폴더 열기)로 그 폴더를 엽니다.
- Terminal → New Terminal(터미널 → 새 터미널)을 고릅니다. 처음 연 폴더라 이 폴더 파일의 작성자를 믿는지(trust) 묻는 창이 뜨면, 내가 만든 빈 폴더이니 Trust Folder & Continue(폴더 신뢰 및 계속)를 누릅니다. 취소하면 터미널이 열리지 않습니다.
- 아래에 터미널이 열립니다. 터미널은 명령을 글자로 쳐서 실행하는 창이고, VS Code의 터미널은 연 폴더에서 시작합니다.
- 터미널에
node --version을 치고 Enter를 누릅니다.
v26.12.0
v로 시작하는 판 번호가 찍히면 Node가 설치된 것입니다. 받은 때에 따라 v24처럼 앞 숫자가 달라도, v22 이상이면 레슨과 같은 결과가 나옵니다. v22보다 낮으면 nodejs.org에서 LTS를 받아 다시 설치합니다. node를 찾을 수 없다는 글이 나오면 VS Code를 닫았다 다시 열어 새 터미널에서 해 봅니다 — 설치 전에 연 터미널은 Node를 모릅니다.
3package.json과 main.js 만들기
왼쪽 탐색기(Explorer) 맨 위의 폴더 이름 줄(JS-STUDY)에 마우스를 올리면 오른쪽 끝에 작은 단추 넷이 나타납니다. 그 가운데 첫째인 새 파일 단추(New File…, 새 파일…)를 누르고, 이름을 친 뒤 Enter를 누릅니다. 이렇게 파일 둘을 만듭니다.
첫째는 package.json입니다. 아래 한 줄을 손으로 치지 말고 그대로 복사해 붙여 넣은 뒤 저장합니다.
{ "type": "module" }
이 한 줄은 이 폴더의 .js 파일을 이 과목과 같은 규칙으로 돌리라는 설정입니다. 자료에 따라 이렇게 도는 파일을 ES 모듈(ES module), 그 규칙을 엄격 모드(strict mode)라고 부릅니다. 손으로 치다 따옴표 하나만 틀려도(작은따옴표로 쳐도) Error: Invalid package config로 시작하는 오류가 나고 아무것도 실행되지 않습니다.
다른 안내에는 npm init -y라는 명령으로 package.json을 만드는 길도 있습니다. 그 명령은 "type": "commonjs"를 적어 넣어 레슨과 다른 옛 방식으로 돌게 하니, 이 과목은 쓰지 않습니다.
둘째는 main.js입니다. 코드를 쓰고 File → Save(파일 → 저장)로 저장합니다.
console.log('플로우 카페');
console.log('커피', 4000);플로우 카페
커피 4000터미널에 node main.js를 치고 Enter를 누르면 main.js가 위에서 아래로 실행되고, 출력이 터미널에 찍힙니다. 레슨의 실행 결과 상자와 같은 글자입니다.
오류가 나면 터미널에는 결과 상자보다 줄이 더 찍힙니다 — main.js 앞의 폴더 경로, node:가 든 at 줄, 끝의 Node 판 줄입니다. 안쪽 줄은 읽지 않아도 되고, 읽는 차례는 오류 메시지 읽기와 같습니다.
4설정 확인 줄 — console.log(this)
main.js 끝에 console.log(this); 한 줄을 더해 다시 돌립니다.
console.log('플로우 카페');
console.log('커피', 4000);
console.log(this);플로우 카페
커피 4000
undefinedthis가 무엇인지는 9단원에서 배웁니다. 지금은 이 줄이 undefined를 찍으면 레슨과 같은 규칙으로 돈다는 표시로만 씁니다.
{}가 찍히면 package.json이 없거나, 이름이나 안의 글자가 틀린 것입니다. 이때 Node는 오류도 경고도 없이 옛 방식으로 돌아, 레슨에서 오류가 나던 코드가 오류 없이 지나갑니다.
| 설정 | console.log(this); | let 없는 total = 0; |
|---|---|---|
package.json에 { "type": "module" } | undefined | ReferenceError — 레슨과 같음 |
package.json 없음 · "modul" 오타 · "commonjs" | {} | 오류 없이 돎 — 레슨과 다름 |
확인이 끝나면 이 줄은 지웁니다. 새 폴더에서 시작할 때마다 한 번 돌려 봅니다.
5설치 없이 맛보기 — 브라우저 콘솔
Node를 설치하기 전에도 크롬의 개발자 도구 콘솔(Console)에서 식의 값을 맛볼 수 있습니다. Ctrl+Shift+J(macOS는 Cmd+Option+J)를 누르면 콘솔이 열리고, 한 줄을 치고 Enter를 누르면 바로 실행됩니다.
| 콘솔에 친 것 | 콘솔에 보이는 것 |
|---|---|
2 + 3 | 5 |
console.log('안녕') | 안녕, 그 아래에 undefined |
콘솔은 친 식의 값을 저절로 보여 주고, 돌려주는 값이 없는 console.log는 그 표시인 undefined까지 보입니다. 파일에서는 console.log로 찍은 것만 보입니다.
콘솔은 이 과목과 규칙이 조금 달라(같은 이름을 let으로 두 번 만들어도 오류가 없는 등) 식의 값을 볼 때만 쓰고, '컴퓨터에서 해 보기'는 Node로 합니다. 처음 붙여 넣으면 크롬이 막을 수 있으니 직접 치거나, 안내에 적힌 낱말(영어 화면은 allow pasting)을 쳐서 붙여 넣기를 풉니다.
예제
아래 세 줄을 main.js로 저장해 node main.js로 돌리면 무엇이 찍힐까요? 적어 본 뒤 결과를 펼쳐 보세요.
2 + 3;
console.log('합계');
2 + 3;실행 결과 보기
합계예상과 다르면 그곳이 배울 곳입니다. 콘솔에 한 줄씩 쳤다면 5가 두 번 보였겠지만, 파일에서는 계산한 값을 console.log로 찍지 않으면 보이지 않습니다.
자주 틀리는 곳
틀린 생각: 편집기에서 고친 코드는 저장하지 않아도 그대로 실행된다.
편집기에 고친 코드가 보이니 Node도 그 코드를 실행하리라 여기게 됩니다. Node가 실행하는 것은 저장된 파일이라, 탭 이름 옆에 ●가 떠 있는(저장하지 않은) 채로 node main.js를 치면 고치기 전의 코드가 실행됩니다.
맞는 규칙: 고치면 저장한 뒤 다시 실행합니다. 탭의 ●가 사라졌는지 보고 node main.js를 칩니다.
틀린 생각: 터미널은 어느 폴더에 있든 main.js를 찾아 돌린다.
파일 이름만 쳐도 되니 컴퓨터가 알아서 찾아 주리라 여기게 됩니다. node main.js는 터미널이 지금 있는 폴더에서만 main.js를 찾아, 다른 폴더이거나 이름을 잘못 치면(mian.js) Error: Cannot find module로 시작하는 오류가 납니다.
맞는 규칙: VS Code에서 작업 폴더를 연 뒤 새 터미널을 열면 그 폴더에서 시작합니다. 파일 이름은 탐색기에 보이는 대로 칩니다.
틀린 생각: 오류도 경고도 없이 돌았으니 레슨과 같은 규칙으로 돈 것이다.
아무 말이 없으니 설정도 맞았으리라 여기게 됩니다. 4절 표처럼 설정이 틀려도 Node는 알리지 않고 옛 방식으로 돕니다.
맞는 규칙: 새 작업 폴더에서는 설정 확인 줄 console.log(this);로 먼저 봅니다. undefined면 레슨과 같고, {}면 package.json을 다시 만듭니다.
틀린 생각: 둥근 따옴표(“ ”)도 따옴표라 문자열을 감쌀 수 있다.
문서 편집기나 폰 메모장에서 옮겨 붙인 코드는 곧은 따옴표가 둥근 따옴표로 바뀌어 있곤 합니다. 자바스크립트는 둥근 따옴표를 알아보지 못합니다.
console.log(“커피”);main.js:1console.log(“커피”); SyntaxError: Invalid or unexpected tokenInvalid or unexpected token은 '알 수 없는 글자가 있다'는 뜻입니다. Mac 한글 입력 상태에서 쳐지는 ₩ 같은 기호도 같은 오류를 냅니다. ^ 줄도 비어 있으니 줄 번호로 그 줄을 찾아 따옴표와 기호를 봅니다.
맞는 규칙: 자바스크립트가 문자열 따옴표로 읽는 것은 곧은 따옴표 '와 "뿐입니다. 코드는 VS Code에서 직접 치거나, 붙여 넣은 뒤 따옴표를 봅니다.
확인 문제
1. 예제 첫째 코드의 1번 줄을 console.log(2 + 3);으로 바꿨습니다. main.js로 저장해 node main.js로 돌리면 무엇이 찍힐까요?
console.log(2 + 3);
console.log('합계');
2 + 3;힌트
세 줄 가운데 console.log가 있는 줄과 없는 줄을 나눠 봅니다.
정답
5
합계1번 줄은 이제 계산한 값을 console.log로 찍습니다. 3번 줄은 그대로 계산만 해 아무것도 남기지 않습니다.
흔한 오답은 5를 한 번 더 쓴 답입니다. 콘솔처럼 3번 줄의 값도 보인다고 본 것입니다.
2. 처음 작업 폴더를 꾸려 코드를 돌리는 차례대로 ㉠~㉣을 놓으세요.
- ㉠ 터미널에
node main.js를 친다 - ㉡ VS Code에서
js-study폴더를 연다 - ㉢
main.js에 코드를 쓰고 저장한다 - ㉣
package.json을 만들어 설정 한 줄을 붙여 넣는다
놓은 뒤에는 이것도 고르세요. ㉢이 ㉠보다 앞에 와야 하는 까닭은 무엇일까요?
- ① Node는 저장된 파일을 실행하기 때문
- ② 저장해야 Node가 코드의 뜻을 알아듣기 때문
- ③ 저장하면 계산한 값이 저절로 화면에 나오기 때문
힌트
㉠~㉣마다 그 일을 하려면 무엇이 먼저 있어야 하는지 따져 봅니다.
정답
㉡ ㉣ ㉢ ㉠ 차례이고, 까닭은 ①입니다. ㉣과 ㉢은 서로 바꿔도 됩니다. 둘 다 폴더를 연 뒤, node main.js를 치기 전에만 하면 됩니다.
- ② Node는 코드의 뜻을 모르고 쓴 대로만 실행합니다(규칙 6). 저장은 실행할 파일을 만드는 일입니다.
- ③ 저장해도 출력은
console.log로 찍은 것만 나옵니다.
3. 아래 main.js를 레슨과 같은 설정(package.json이 있는 폴더)에서 돌리면 무엇이 찍힐까요? package.json이 없는 폴더에서 돌리면 어떻게 달라질까요? 오류 메시지는 …Error: 줄만 써도 됩니다.
console.log(this);
count = 3;
console.log(count);힌트
4절의 표에서 설정마다 console.log(this);와 let 없는 대입이 어떻게 되는지 봅니다.
정답
레슨과 같은 설정에서 돌린 결과입니다.
undefinedmain.js:2count = 3; ^ ReferenceError: count is not defined at main.js:2:7package.json이 없는 폴더에서 돌린 결과입니다.
{}
3
설정이 맞으면 let 없는 count = 3;에서 그런 이름이 없어 멈추고, 설정이 없으면 2번 줄이 오류 없이 지나갑니다.
흔한 오답은 두 경우를 같게 쓴 답입니다. 설정이 없으면 Node가 알려 줄 것이라고 본 것입니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
4절의 main.js를 돌린 뒤, package.json의 이름을 package-off.json으로 바꾸고 다시 돌려 설정 확인 줄이 무엇을 찍는지 봅니다. 다 보면 이름을 되돌립니다.
이제 1단원 레슨들의 '컴퓨터에서 해 보기'도 돌려 볼 수 있습니다.
- 프로그램은 위에서 아래로 — 1절 코드의 2번 줄과 3번 줄 바꾸기
- console.log로 출력하기 — 2절 코드의 1번 줄 쉼표를
+로 - 오류 메시지 읽기 — 3절 코드의 닫는 괄호 고치기
- 변수: let으로 이름 붙이기 —
a = 10;을 2번 줄 앞으로 옮기기 - 이름표 다시 붙이기와 const — 3절 코드의
let a를const a로