콘솔 열고 첫 코드 실행하기

프로그래밍을 배울 때 가장 많이 막히는 지점은 뜻밖에도 문법이 아니다. 환경 설정이다. 뭘 설치하라는데 설치가 안 되고, 경로를 잡으라는데 경로가 뭔지 모르겠고, 그러다 지친다.

자바스크립트는 이 단계가 없다. 지금 이 글을 보고 있는 브라우저가 이미 완성된 실습 환경이다. 앞 강의에서 봤듯 브라우저 안에는 자바스크립트 엔진이 들어 있다.

개발자 도구 열기

브라우저에서 아무 페이지나 열어두고 아래 키를 누른다.

운영체제	단축키	대안
윈도우	F12	Ctrl + Shift + J
맥	Command + Option + J	우클릭 → 검사

화면 한쪽에 창이 열린다. 이게 개발자 도구다. 상단 탭 중에서 Console을 고른다.

깜빡이는 커서 옆에 > 기호가 보이면 준비가 끝났다. 여기에 자바스크립트를 한 줄씩 쳐서 바로 실행할 수 있다.

첫 번째 코드

콘솔에 이렇게 치고 엔터를 누른다.

1 + 1

콘솔

계산기가 됐다. 이번엔 글자를 다뤄본다. 따옴표로 감싸는 게 규칙이다.

"안녕" + " 자바스크립트"

콘솔

'안녕 자바스크립트'

숫자에서 +는 더하기지만, 글자에서 +는 이어붙이기다. 같은 기호가 대상에 따라 다르게 동작한다. 이 얘기는 6강에서 제대로 다룬다.

console.log — 앞으로 가장 많이 쓸 명령

콘솔에 직접 칠 때는 결과가 알아서 보인다. 하지만 파일에 저장해둔 코드는 결과를 자동으로 보여주지 않는다. 그래서 **"이걸 좀 보여줘"**라고 시켜야 한다.

그 명령이 console.log()다.

console.log("첫 번째 줄");
console.log("두 번째 줄");
console.log(3 * 7);

콘솔

첫 번째 줄
두 번째 줄
21

괄호 안에 넣은 값이 콘솔에 찍힌다. 여러 개를 쉼표로 나열하면 한 줄에 나란히 나온다.

console.log("가격:", 1000, "원");

콘솔

가격: 1000 원

앞으로 이 명령을 수천 번 쓰게 된다. 코드가 생각대로 동작하지 않을 때, 중간에 console.log를 끼워 넣어 값이 어떻게 변하는지 들여다보는 게 가장 기본적인 디버깅이다.

파일에 코드를 넣는 법

콘솔은 실험용이다. 진짜 웹페이지를 만들 때는 코드를 파일에 저장하고 HTML에서 불러온다.

폴더를 하나 만들고 파일 두 개를 넣는다.

<!doctype html>
<html>
  <body>
    <h1>연습</h1>
    <script src="app.js"></script>
  </body>
</html>

console.log("파일에서 실행됐다");

<script> 태그가 app.js를 불러온다. HTML 파일을 브라우저로 열고 콘솔을 보면 메시지가 찍혀 있다.

세미콜론과 주석

두 가지 문법 규칙만 짚고 간다.

세미콜론(;)은 문장의 끝을 표시한다. 사실 자바스크립트는 대부분의 경우 없어도 알아서 붙여준다. 하지만 예외 상황에서 엉뚱하게 동작할 때가 있어서, 처음에는 붙이는 습관을 들이는 쪽을 권한다.

주석은 실행되지 않는 메모다. 코드가 왜 이렇게 생겼는지 남길 때 쓴다.

// 한 줄 주석이다. 이 줄은 실행되지 않는다.

/*
  여러 줄에 걸친 주석.
  긴 설명을 적을 때 쓴다.
*/

console.log("실행된다"); // 코드 뒤에 붙여도 된다

콘솔

실행된다

에러를 만나는 법, 그리고 읽는 법

일부러 틀린 코드를 쳐본다.

console.log(hello);

콘솔

Uncaught ReferenceError: hello is not defined

빨간 글씨가 뜬다. 초보자는 여기서 당황하지만, 사실 에러 메시지는 가장 친절한 안내문이다. 뜯어보면 이렇다.

에러 메시지 읽기

01
Uncaught
아무도 이 문제를 처리하지 않아서 그대로 튀어나왔다는 뜻이다.
02
ReferenceError
에러의 종류. 존재하지 않는 이름을 불렀을 때 나온다.
03
hello is not defined
구체적인 원인. hello 라는 게 어디에도 없다는 뜻이다.

hello를 따옴표로 감싸면 글자가 되어 정상 동작한다. 따옴표가 없으면 자바스크립트는 그걸 이름으로 이해하고, 그런 이름을 가진 게 없으니 못 찾겠다고 말한다.

console.log("hello");

콘솔

hello

정리하면

브라우저 개발자 도구의 Console 탭에서 자바스크립트를 바로 실행할 수 있다.
console.log()는 값을 눈으로 확인하는 명령이다. 앞으로 계속 쓴다.
파일에 저장한 코드는 <script src="app.js"></script>로 불러온다.
에러 메시지는 종류와 원인을 함께 알려준다. 겁내지 말고 읽는다.

다음 강의부터 진짜 문법이 시작된다. 첫 주제는 변수다. 값에 이름을 붙여 보관하는 방법이다.

디코드랩