오늘 필요한 것은 브라우저뿐입니다
자바스크립트를 처음 배울 때 가장 반가운 점은 복잡한 설치 없이 시작할 수 있다는 것입니다. 지금은 개발 전용 프로그램을 설치하지 않아도 됩니다. Chrome이나 Edge 같은 브라우저만 있으면 충분합니다.
이번 장의 목표는 거창하지 않습니다.
개발자 도구를 연다.
Console 탭을 찾는다.
자바스크립트 한 줄을 입력한다.
Enter를 눌러 실행한다.
오류가 나면 겁내지 않고 읽어 본다.
여기까지 해 보면 중요한 감각이 생깁니다. '내가 쓴 문장이 컴퓨터에서 실제로 실행된다'는 감각입니다. 프로그래밍은 이 감각 위에 하나씩 쌓아 가면 됩니다.
AI 생성 이미지
개발자 도구 열기
브라우저에는 웹페이지를 살펴보고 코드를 실행해 볼 수 있는 도구가 들어 있습니다. 이 도구를 개발자 도구라고 부릅니다. 이름은 조금 딱딱하지만, 지금은 연습장이라고 생각하면 됩니다.
Chrome 또는 Edge에서 아무 웹페이지나 열어 보세요. 새 탭을 열어도 괜찮고, 검색 사이트를 열어도 괜찮습니다.
개발자 도구를 여는 방법은 여러 가지입니다.
Windows 또는 Linux:
F12또는Ctrl + Shift + IMac:
Command + Option + I화면에서 마우스 오른쪽 클릭 →
검사선택
개발자 도구가 열리면 화면 오른쪽이나 아래쪽에 새로운 패널이 나타납니다. 처음 보면 글자가 많아서 낯설 수 있습니다. 지금은 전부 알 필요가 없습니다. 위쪽에 있는 탭 중에서 Console을 찾으면 됩니다.
Console은 자바스크립트 코드를 한 줄씩 입력하고 바로 결과를 확인하는 공간입니다. 계산기처럼 입력하면, 브라우저가 그 자리에서 실행해 줍니다.
Console 탭을 클릭하면 아래쪽에 > 모양의 입력 줄이 보일 수 있습니다. 이곳이 우리가 코드를 쓰는 자리입니다.
첫 코드 입력하기
Console 입력 줄에 아래 코드를 그대로 입력해 보세요.
console.log("안녕하세요");입력한 뒤 Enter를 누릅니다.
화면에 다음과 비슷하게 표시될 것입니다.
안녕하세요브라우저에 따라 그 아래에 undefined가 함께 보일 수도 있습니다. 지금은 오류가 아닙니다. 우리가 출력하라고 한 글자는 안녕하세요이고, undefined는 콘솔이 덧붙여 보여 주는 실행 결과라고만 생각해 두면 됩니다.
이 한 줄은 브라우저에게 이런 지시를 한 것입니다.
콘솔에 "안녕하세요"라는 글자를 보여 줘.여기서 console.log는 콘솔에 무언가를 출력할 때 쓰는 명령입니다. log는 기록한다는 뜻을 가진 말입니다. 지금은 '콘솔에 보여 주기' 정도로 이해하면 충분합니다.
코드 한 줄을 나누어 보기
방금 쓴 코드를 작게 나누어 보겠습니다.
console.log("안녕하세요");먼저 console.log입니다.
이 부분은 브라우저가 이미 알고 있는 기능입니다. 우리가 직접 만든 말이 아닙니다. 콘솔에 내용을 보여 달라고 요청할 때 사용합니다.
다음은 괄호 ()입니다.
console.log( );괄호 안에는 console.log에게 전달할 내용을 넣습니다. 식당에서 주문할 때 "이걸 주세요"라고 말하듯, 괄호 안에 "이 내용을 보여 주세요"라고 넣는 것입니다.
그다음은 따옴표 ""입니다.
"안녕하세요"자바스크립트에서 글자는 따옴표로 감싸야 합니다. 따옴표로 감싼 글자를 문자열이라고 부릅니다. 문자열은 문자들이 줄지어 있는 값입니다. 이름은 낯설지만, 그냥 '글자 데이터'라고 생각하면 됩니다.
마지막은 세미콜론 ;입니다.
console.log("안녕하세요");세미콜론은 문장의 마침표와 비슷합니다. "이 명령은 여기서 끝납니다"라는 표시입니다. 자바스크립트에서는 세미콜론이 없어도 실행되는 경우가 많습니다. 하지만 처음에는 붙이는 습관을 들이면 코드의 끝을 눈으로 확인하기 좋습니다.
한 줄씩 실행해 보기
Console은 코드를 한 줄 입력하고 Enter를 누르면 바로 실행합니다. 다음 코드를 한 줄씩 입력해 보세요.
console.log("첫 번째 줄");console.log("두 번째 줄");console.log("세 번째 줄");Console에는 입력한 순서대로 결과가 표시됩니다.
첫 번째 줄
두 번째 줄
세 번째 줄브라우저는 코드를 보통 위에서 아래로, 먼저 만난 줄부터 실행합니다. 사람이 책을 위에서 아래로 읽는 것과 비슷합니다.
이 흐름은 앞으로 계속 중요합니다. 코드가 길어져도 기본 생각은 같습니다.
console.log("문을 연다");
console.log("불을 켠다");
console.log("책상에 앉는다");이 코드는 다음 순서로 실행됩니다.
문을 연다
불을 켠다
책상에 앉는다
컴퓨터는 적힌 순서를 스스로 바꾸지 않습니다. 우리가 쓴 순서대로 차례차례 읽습니다. 그래서 코드를 쓸 때는 "무엇을 먼저 해야 하지?"를 생각하는 습관이 도움이 됩니다.
계산도 바로 해 보기
콘솔은 글자만 보여 주는 곳이 아닙니다. 간단한 계산도 할 수 있습니다.
아래 코드를 입력해 보세요.
console.log(1 + 2);결과는 다음처럼 나옵니다.
3이번에는 1 + 2를 따옴표로 감싸지 않았습니다. 숫자 계산을 하려면 숫자로 써야 하기 때문입니다.
아래 코드도 실행해 보세요.
console.log("1 + 2");이번 결과는 이렇게 나옵니다.
1 + 2겉보기에는 비슷하지만 의미가 다릅니다.
console.log(1 + 2);이 코드는 숫자 1과 숫자 2를 더합니다.
console.log("1 + 2");이 코드는 1 + 2라는 글자를 그대로 보여 줍니다.
따옴표가 있으면 글자입니다. 따옴표가 없으면 자바스크립트가 계산하거나 해석하려고 합니다. 이 차이는 앞으로 자주 만나게 됩니다.
첫 오류를 일부러 만나 보기
이제 오류를 일부러 만들어 보겠습니다. 오류는 실패 표시가 아닙니다. 브라우저가 "여기에서 이해가 안 됐어요"라고 알려 주는 안내문입니다.
아래 코드를 입력해 보세요. 마지막 따옴표를 일부러 빼겠습니다.
console.log("안녕하세요);Console에 빨간 글씨가 나타날 것입니다. 브라우저마다 표현은 조금 다르지만, 이런 메시지를 볼 수 있습니다.
Uncaught SyntaxError: Invalid or unexpected token처음 보면 차갑게 느껴질 수 있습니다. 하지만 나누어 보면 읽을 수 있습니다.
SyntaxError는 문법 오류라는 뜻입니다. 문법은 코드에서 약속된 쓰기 방식입니다. 한국어 문장에서 따옴표를 열었으면 닫아야 하듯, 자바스크립트에서도 따옴표를 열었으면 닫아야 합니다.
이번 코드에서는 여기에서 따옴표를 열었습니다.
"안녕하세요그런데 닫는 따옴표가 없습니다.
올바른 코드는 다음과 같습니다.
console.log("안녕하세요");오류 메시지를 볼 때는 모든 영어를 한 번에 해석하려고 하지 않아도 됩니다. 먼저 세 가지만 확인하세요.
오류가 빨간색으로 표시되었는가?
SyntaxError처럼 오류 종류가 보이는가?내가 방금 입력한 코드에서 빠진 기호가 있는가?
초보자에게 가장 흔한 오류는 대단한 실수에서 나오지 않습니다. 따옴표 하나, 괄호 하나, 철자 하나에서 나옵니다.
철자 오류도 읽어 보기
이번에는 log를 잘못 입력해 보겠습니다.
console.lg("안녕하세요");다음과 비슷한 오류가 나올 수 있습니다.
TypeError: console.lg is not a function이 말은 console.lg라는 기능을 실행하려고 했지만, 그런 함수가 아니라는 뜻입니다. 함수는 나중에 자세히 배웁니다. 지금은 '실행할 수 있는 기능' 정도로만 알아 두면 됩니다.
문제는 lg입니다. 브라우저가 알고 있는 이름은 log인데, 우리는 lg라고 썼습니다.
수정하면 됩니다.
console.log("안녕하세요");오류를 고치는 과정은 보통 이렇게 진행됩니다.
빨간 메시지를 본다.
방금 쓴 코드와 비교한다.
따옴표, 괄호, 철자를 확인한다.
고친 뒤 다시 실행한다.
이 과정이 디버깅의 시작입니다. 디버깅은 오류를 찾고 고치는 일입니다. 거창한 기술처럼 들리지만, 지금처럼 "어디가 다르지?" 하고 비교하는 것에서 출발합니다.
오늘 익힌 것
이번 장에서 한 일은 단순하지만 중요합니다.
브라우저에는 자바스크립트를 실행할 수 있는 Console이 있다.
console.log("안녕하세요");로 글자를 출력할 수 있다.따옴표는 글자를 감싸는 표시다.
괄호 안에는 명령에 전달할 내용을 넣는다.
세미콜론은 코드 한 문장의 끝을 표시한다.
브라우저는 코드를 보통 위에서 아래로 읽고 실행한다.
빨간 오류 메시지는 실패가 아니라 수정할 위치를 알려 주는 단서다.
처음부터 많은 문법을 외울 필요는 없습니다. 지금은 한 줄을 쓰고, 실행하고, 결과를 확인하는 흐름에 익숙해지는 것이 먼저입니다.
다음 장에서는 코드가 컴퓨터에게 보내는 '짧은 지시문'이라는 관점으로 조금 더 깊이 들어갑니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.