코딩은 즐거운 일이지만, 때로는 꽤 지루하고 답답해지기도 합니다.
코드를 작성하다가 갑자기 프로그램이 실행되지 않아 크게 좌절한 경험이 누구에게나 있을 것입니다. 더 짜증 나는 상황은 코드가 실행되긴 하는데 왜 제대로 작동하지 않는지 원인을 알 수 없을 때입니다. 고쳐야 할 부분이 코드 어딘가에 분명히 있는데 그것이 무엇인지 찾지 못하는 것이죠.
바로 이럴 때 자바스크립트 콘솔(JavaScript Console)이 큰 힘이 됩니다. 콘솔을 활용하면 코드 내부에서 어떤 일이 일어나고 있는지 실시간으로 추적할 수 있어, 문제의 원인을 훨씬 쉽게 파악할 수 있습니다.
이 가이드에서는 자바스크립트 콘솔을 사용하는 방법을 살펴보고, 실제 애플리케이션에 콘솔을 적용한 예제까지 함께 다룹니다. 끝까지 읽고 나면 자바스크립트 콘솔을 빠르게 익힐 수 있을 것입니다.
자바스크립트 콘솔이란?
개발자 여러분, 이제 콘솔을 소개합니다. 개발자로 일하는 동안 콘솔과 함께하는 시간이 아주 많을 테니, 지금부터 제대로 친해져 두는 것이 좋습니다.
콘솔은 애플리케이션이 실행되는 동안 메시지를 출력할 수 있는 공간이자, 웹 페이지의 내용을 직접 조작할 수 있는 도구입니다.
코드에 특정 시점에 메시지를 기록하도록 지시하면, 해당 메시지가 콘솔에 나타납니다. 또한 콘솔에서는 변수와 값을 수정하거나, 변수에 저장된 값을 확인할 수도 있습니다.
콘솔을 열려면 먼저 개발자 도구(developer tools)를 실행해야 합니다. Chrome에서는 Windows 기준 Ctrl + Shift + I, Mac 기준 Cmd + Alt + I를 누르면 됩니다. Firefox에서는 Command + Option + K 단축키를 사용하세요.
단축키를 누르면 아래와 같은 창이 열립니다:
모든 최신 브라우저는 자체적인 개발자 도구 세트를 갖추고 있으며, 브라우저마다 공통으로 제공되는 기능들도 많습니다. 이 튜토리얼에서는 그중에서도 콘솔에만 집중해서 살펴보겠습니다.
콘솔 시작하기
먼저 콘솔에 메시지를 출력해 보겠습니다. 웹 페이지를 열지 않아도 가능합니다. 브라우저 콘솔을 열고 실행하고 싶은 자바스크립트 문장을 입력하기만 하면 됩니다.
콘솔에서 주로 사용하는 세 가지 메서드는 다음과 같습니다:
console.log(): 콘솔에 일반 메시지를 출력합니다.console.warn(): 콘솔에 경고 메시지를 출력합니다.console.error(): 콘솔에 오류 메시지를 출력합니다.
본격적으로 시작하기 전에 한 가지 주의할 점이 있습니다. 코드가 어떤 동작을 하는지 정확히 모른다면 콘솔에 절대 아무것도 붙여넣지 마세요. 콘솔을 이용해 사용자의 민감한 정보에 접근하는 사기 사례가 존재하기 때문에, 많은 웹사이트에서는 이에 대한 경고 문구를 표시합니다.
그럼 시작해 보겠습니다! 콘솔에 메시지를 출력하려면 다음 코드를 사용합니다:
console.log("콘솔에 메시지를 기록합니다!");이 명령을 실행하면 다음과 같은 결과가 반환됩니다:
콘솔에는 오류와 경고도 출력할 수 있습니다. 일반적인 log() 문과 달리, 경고는 주황색, 오류는 빨간색으로 표시되어 한눈에 구별됩니다:
console.warn("잠깐, 뭔가 일이 벌어지고 있습니다!");
console.error("잠깐, 코드가 작동을 멈췄습니다!");위 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다:
애플리케이션에서 콘솔 활용하기
콘솔 객체가 실제로 어떻게 작동하는지 보여드리기 위해, '쿠키 클리커(Cookie Clicker)' 스타일의 간단한 앱을 만들어 보겠습니다. 이 앱은 차 한 잔 이미지가 클릭된 횟수를 세는 카운터를 화면에 표시하며, 모든 클릭 이벤트를 콘솔에 기록해 언제 클릭이 발생했는지 추적할 수 있게 해줍니다.
프런트엔드 개발하기
첫 번째 단계는 애플리케이션의 프런트엔드를 만드는 것입니다. "index.html"이라는 파일을 생성하고 다음 코드를 붙여넣으세요:
<!DOCTYPE html>
<html>
<head>
<title>Tea Clicker</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="container">
<h2>Tea Clicker</h2>
<p>차 컵을 마음껏 클릭해 보세요!</p>
<img src="https://images.all-free-download.com/images/graphiclarge/tea_cup_with_teabag_311679.jpg" height="100" width="100" onclick="createClick()" />
<p>차 컵을 <span>0</span>번 클릭했습니다.</p>
</div>
<script src="./scripts.js"></script>
</body>
</html>이 코드는 웹 페이지에 네 가지 요소를 표시합니다: 게임 제목, 게임 설명, 차 한 잔 이미지, 그리고 사용자가 차 컵을 몇 번 클릭했는지 알려주는 메시지입니다.
페이지를 좀 더 보기 좋게 만들기 위해 스타일도 추가해 보겠습니다. "styles.css"라는 파일을 만들고 다음 코드를 붙여넣으세요:
.container {
background-color: lightblue;
margin: auto;
width: 50%;
padding: 40px;
text-align: center;
}
span {
color: yellow;
}
img {
border-radius: 50px;
}이 스타일은 차 클리커 게임을 위한 박스를 만들고, 클릭 카운터의 색상을 노란색으로 설정하며, 이미지에 둥근 모서리를 적용합니다. 현재 웹 페이지는 다음과 같이 보입니다:
하지만 차 컵을 클릭해도 아무 일도 일어나지 않습니다. 아직 자바스크립트 코드를 추가하지 않았기 때문입니다. 이제 애플리케이션의 자바스크립트 코드를 작성해 보겠습니다.
자바스크립트로 기능 추가하기
사용자가 차 컵을 클릭하면 카운터가 1씩 증가해야 합니다. 카운터를 증가시키기 전에, 먼저 작업할 DOM 요소인 이미지와 카운터를 선택해야 합니다. 여기서 DOM(Document Object Model, 문서 객체 모델) 요소란 웹 페이지를 구성하는 태그들을 의미합니다.
var clickCounter = document.querySelector("span");
var teaCup = document.querySelector("img");또한 차 컵이 클릭된 횟수를 추적할 변수를 하나 설정합니다:
var clicks = 0;
다음 단계는 버튼이 클릭되었을 때 이를 콘솔에 기록하고 카운터를 1 증가시키는 함수를 만드는 것입니다. 다음 코드를 사용하면 됩니다:
function createClick() {
console.log("버튼이 클릭되었습니다!")
clicks += 1;
clickCounter.innerText = clicks;
}첫 번째 줄은 콘솔에 "버튼이 클릭되었습니다!"라는 메시지를 출력합니다. 그다음 "clicks" 카운터에 1을 더하고, innerText 메서드를 사용해 <span> 태그의 텍스트 내용을 업데이트된 클릭 횟수로 변경합니다.
이제 웹 페이지를 열고 차 컵 이미지를 클릭해 보겠습니다:
위에서 볼 수 있듯이, 차 컵을 클릭하면 카운터가 1씩 증가하고, 코드에 지정한 메시지가 콘솔에 출력됩니다. 덕분에 사용자가 언제 차 컵을 클릭했는지 손쉽게 파악할 수 있습니다.
이것은 console.log() 문의 아주 기본적인 활용 예이지만, 규모가 큰 애플리케이션에서는 로깅이 훨씬 폭넓게 사용됩니다. 대부분의 경우 로그는 애플리케이션의 개발 버전에만 남겨둡니다. 사용자에게는 화면 뒤에서 일어나는 일을 보여줄 필요가 없기 때문입니다. 그럼에도 불구하고 로깅은 개발자에게 없어서는 안 될 소중한 도구입니다.
마치며
콘솔은 코드가 어떻게 작동하는지 이해하는 데 활용할 수 있는 강력한 도구입니다. 코드가 실행되는 동안 디버깅 메시지를 출력하거나, 경고와 오류를 추적하는 데 사용할 수 있습니다.
로그 문은 애플리케이션을 개발하는 중이거나, 디버깅에 활용할 수 있는 사용자 지정 오류 메시지를 만들고 싶을 때 사용하는 것이 좋습니다. 반면, 온라인에 공개되는 웹 애플리케이션에는 너무 많은 로그를 남기지 않는 것이 바람직합니다.