📘 10.2.1 console.log - 코딩의 가장 친한 친구
안녕하세요, 여러분. 지난 시간까지 우리는 에러가 발생했을 때 문제를 해결하는 다양한 방법들을 배웠습니다. try...catch, finally, 그리고 에러 정보까지, 문제가 생겼을 때 현명하게 대처하는 방법들을 익혔지요.
이번 시간에는 조금 다른 각도에서 접근해볼 겁니다. 문제가 생기기 전에 미리 우리 코드가 어떻게 동작하는지 확인하는 방법, 바로 console.log에 대해 알아볼 거예요. 이것은 모든 프로그래머가 가장 많이 사용하는, 코딩의 가장 친한 친구와도 같은 존재랍니다.
🧠 새로운 단어들과 친해지기
console.log와 관련된 중요한 단어들을 쉽게 풀어서 설명해드리겠습니다.
| 단어 | 쉬운 설명 |
|---|---|
| console.log | 브라우저의 기록창에 원하는 메시지나 값을 보여주는 특별한 기능입니다. |
| 디버깅 | 프로그램에서 발생하는 문제나 오류를 찾아서 고치는 작업을 의미합니다. |
| 개발자 도구 | 웹 브라우저에 숨어있는 웹 개발과 문제 찾기를 위한 강력한 기능 모음입니다. |
console.log는 "console(기록창)"과 "log(기록하다)"의 합성어로, 기록창에 기록을 남긴다는 뜻입니다. 마치 일기장에 하루 있었던 일을 기록하는 것처럼, 코드에서 일어나는 일들을 기록해두는 역할을 해요.
✨ console.log가 뭔지 알아보기
console.log는 프로그래머에게 있어서 강력한 확대경과 같은 존재입니다. 코드 안에서 무슨 일이 일어나고 있는지 눈으로 직접 볼 수 없을 때, console.log를 사용하면 숨겨진 모든 것들을 명확하게 확인할 수 있어요.
이 특별한 기능의 가장 큰 특징은 실시간으로 코드의 상태를 확인할 수 있다는 점입니다. 변수에 어떤 값이 들어있는지, 함수가 제대로 실행되고 있는지, 조건문이 어떤 경로로 진행되는지를 즉시 알 수 있지요.
또한 console.log는 여러 개의 값을 동시에 출력할 수 있어서, 복잡한 상황도 한 번에 파악할 수 있어요. 마치 여러 장의 사진을 한꺼번에 보여주는 것처럼, 프로그램의 전체적인 흐름을 한눈에 이해할 수 있어요.
무엇보다 console.log는 배우기 쉽고 사용하기 간단해서, 초보자부터 전문가까지 모든 프로그래머가 애용하는 도구입니다. 복잡한 디버깅 도구를 배우기 전에 가장 먼저 익혀야 할 필수 기능입니다.
따뜻한 비유: 요리하면서 맛보는 것
console.log를 더 쉽게 이해하기 위해 '요리하면서 중간중간 맛을 보는 것'에 비유해볼게요.
맛있는 요리를 만들기 위해서는 요리 과정 중간중간에 맛을 봐야 합니다. "간이 적당한가?", "더 끓여야 하나?", "재료가 잘 익었나?" 같은 것들을 확인해야 완벽한 요리가 완성되지요.
코딩도 마찬가지입니다. 프로그램을 만들면서 중간중간에 console.log로 "이 변수에 값이 제대로 들어갔나?", "이 함수가 올바르게 실행되고 있나?", "조건문이 내가 원하는 대로 동작하나?"를 확인해야 해요.
만약 요리할 때 맛을 보지 않는다면 마지막에 너무 짜거나 덜 익은 요리가 나올 수 있어요. 코딩에서도 console.log로 중간 확인을 하지 않으면, 나중에 큰 문제를 발견하게 될 수 있답니다.
console.log는 코딩 요리사의 가장 중요한 맛보기 도구인 셈입니다.
🎯 왜 console.log를 사용할까요?
프로그래머들이 console.log를 이렇게 자주 사용하는 이유는 여러 가지가 있어요.
첫째로 변수의 값을 실시간으로 확인할 수 있습니다. 코드를 작성하다 보면 변수에 내가 생각한 값이 정말로 들어가 있는지 궁금할 때가 많아요. console.log를 사용하면 언제든지 변수의 내용을 들여다볼 수 있어요.
둘째로 함수의 실행 흐름을 추적할 수 있습니다. 복잡한 프로그램에서는 함수들이 어떤 순서로 실행되는지 파악하기 어려울 때가 있어요. console.log를 각 함수의 시작과 끝에 배치하면 실행 순서를 명확히 알 수 있어요.
셋째로 조건문과 반복문의 동작을 확인할 수 있습니다. if문이 내가 원하는 조건에서 실행되는지, for문이 몇 번 반복되는지 등을 직접 눈으로 확인할 수 있지요.
마지막으로 문제 발생 지점을 빠르게 찾을 수 있어요. 에러가 발생했을 때 console.log를 적절히 배치하면 어느 부분에서 문제가 생겼는지 쉽게 추적할 수 있어요.
⚙️ console.log 사용법 배우기
console.log의 기본 사용법은 매우 간단합니다. 기본 구조를 살펴보겠어요.
기본 형태:
console.log("출력하고 싶은 내용");
console.log(변수이름);여러 값 동시 출력:
console.log("이름:", name, "나이:", age);다양한 정보 종류 출력:
console.log("문자열입니다"); // 글자
console.log(123); // 숫자
console.log(true); // 참/거짓
console.log(["배열", "내용"]); // 목록이때 중요한 점은 console.log의 결과를 확인하려면 브라우저의 개발자 도구를 열어야 한다는 것입니다. 웹페이지에서 F12 키를 누르고 "Console" 탭을 클릭하면 모든 출력 결과를 볼 수 있어요.
🧪 직접 해보면서 배우기
이제 실제 예시를 통해서 console.log가 어떻게 동작하는지 자세히 살펴보겠습니다.
🔹 첫 번째 예시: 변수의 값 확인하기
첫 번째 예시에서는 다양한 변수의 값을 console.log로 확인하는 방법을 알아보겠습니다.
// 학생 정보를 변수에 저장하고 확인하기
let studentName = "민수"; // 학생 이름을 저장해요
let studentAge = 12; // 학생 나이를 저장해요
let favoriteSubjects = ["수학", "과학", "체육"]; // 좋아하는 과목들을 목록으로 저장해요
let isHappy = true; // 행복한 상태를 참/거짓으로 저장해요
// 각 변수의 값을 개별적으로 확인하기
console.log("학생 이름: " + studentName); // 이름을 확인해요
console.log("학생 나이: " + studentAge); // 나이를 확인해요
console.log("좋아하는 과목들: " + favoriteSubjects); // 과목 목록을 확인해요
console.log("행복한 상태: " + isHappy); // 기분 상태를 확인해요
// 여러 값을 한 번에 확인하기
console.log("전체 정보:", studentName, studentAge, favoriteSubjects); // 모든 정보를 한꺼번에 봐요이 과정을 단계별로 살펴보면, 먼저 다양한 종류의 변수들을 선언하고 값을 할당합니다. 그다음 각 변수를 개별적으로 출력하여 정확한 값이 저장되었는지 확인하지요. 마지막으로 여러 변수를 한 번에 출력하여 전체적인 정보를 한눈에 파악합니다. 이렇게 하면 변수들이 올바르게 설정되었는지 쉽게 확인할 수 있어요.
🔹 두 번째 예시: 함수의 실행 흐름 추적하기
두 번째 예시에서는 함수가 어떻게 실행되는지 console.log로 추적하는 방법을 알아보겠습니다.
// 간단한 인사 함수 만들기
function greetFriend(friendName) {
console.log("🎉 인사 함수가 시작되었습니다!"); // 함수 시작을 알려줘요
console.log("친구 이름을 받았습니다: " + friendName); // 받은 정보를 확인해요
let greeting = "안녕하세요, " + friendName + "님!"; // 인사말을 만들어요
console.log("인사말을 만들었습니다: " + greeting); // 만든 인사말을 확인해요
console.log("✅ 인사 함수가 완료되었습니다!"); // 함수 완료를 알려줘요
return greeting; // 만든 인사말을 돌려줘요
}
// 함수를 호출하고 실행 과정 관찰하기
console.log("--- 프로그램 시작 ---"); // 전체 프로그램 시작을 표시해요
let result = greetFriend("지연"); // 함수를 실행해요
console.log("최종 결과: " + result); // 함수에서 받은 결과를 확인해요
console.log("--- 프로그램 종료 ---"); // 전체 프로그램 종료를 표시해요이 예시에서는 함수의 전체 실행 흐름을 추적하는 과정을 관찰할 수 있어요. 먼저 함수 시작을 알리는 로그를 출력하고, 매개변수가 올바르게 전달되었는지 확인합니다. 그다음 함수 내부에서 변수가 생성되는 과정을 추적하고, 함수 완료를 알리는 로그를 출력하지요. 마지막으로 프로그램 전체의 시작과 끝을 표시하여 함수가 언제 실행되는지 명확히 파악할 수 있어요.
🔹 세 번째 예시: 반복문에서 활용하기
세 번째 예시에서는 반복문에서 console.log를 어떻게 활용하는지 알아보겠습니다.
// 숫자를 체크하는 반복문
function checkNumbers() {
console.log("🔢 숫자 확인을 시작합니다!"); // 반복 작업 시작을 알려줘요
for (let i = 1; i <= 5; i++) { // 1부터 5까지 반복해요
console.log("현재 검사하는 숫자: " + i); // 지금 처리 중인 숫자를 확인해요
if (i % 2 === 0) { // 숫자가 짝수인지 확인해요
console.log(" → " + i + "는 짝수입니다!"); // 짝수일 때 메시지를 출력해요
} else { // 숫자가 홀수일 때
console.log(" → " + i + "는 홀수입니다!"); // 홀수일 때 메시지를 출력해요
}
}
console.log("🎯 모든 숫자 확인이 완료되었습니다!"); // 반복 작업 완료를 알려줘요
}
checkNumbers(); // 함수를 실행해서 결과를 확인해요이 과정을 분석해보면, 먼저 반복문 시작을 알리는 로그를 출력하고, 반복문의 각 단계에서 현재 처리 중인 값을 확인합니다. 그다음 조건문의 각 경로에서 어떤 결과가 나오는지 추적하고, 마지막에 전체 작업 완료를 알리는 로그를 출력하지요. 이렇게 하면 반복문이 예상대로 동작하는지, 조건문이 올바른 경로로 실행되는지 한눈에 파악할 수 있어요.
🧚♀️ 이야기로 다시 배우기: 선생님의 수업 관찰 일기
지금까지 배운 내용을 하나의 이야기로 다시 정리해볼까요?
여러분이 선생님이 되어 교실을 관찰하는 상황을 상상해보세요.
교실에서 학생들이 수업을 듣고 있습니다. 하지만 선생님은 각 학생이 정말로 수업을 이해하고 있는지, 집중하고 있는지 확인하고 싶어요. 그래서 관찰 일기를 쓰기 시작합니다.
"10시 05분: 철수가 수학 문제를 풀기 시작했다", "10시 10분: 영희가 질문을 했다. 이해도가 높아 보인다", "10시 15분: 민지가 어려워하는 것 같다. 도움이 필요해 보인다" 같은 식으로 말이에요.
이런 세심한 관찰 기록 덕분에 선생님은 어떤 학생이 어떤 부분을 어려워하는지, 수업이 계획대로 진행되고 있는지 정확히 파악할 수 있어요. 문제가 생기면 즉시 도움을 줄 수 있고, 수업 방식도 개선할 수 있지요.
console.log도 바로 이런 관찰 일기와 같습니다. 코드라는 교실에서 변수와 함수라는 학생들이 어떻게 동작하는지 꼼꼼히 기록해주는 것이지요. 덕분에 프로그래머는 코드의 모든 부분이 제대로 실행되고 있는지 확인할 수 있고, 문제가 생기면 빠르게 해결할 수 있답니다.
🔄 console.log 활용하는 순서 정리하기
지금까지 학습한 console.log의 활용 과정을 자연스럽게 정리해보겠습니다.
첫 번째 단계는 확인 지점 설정입니다. 코드에서 확인하고 싶은 부분(변수 값, 함수 실행, 조건문 결과 등)을 정하고 해당 위치에 console.log 문장을 추가하는 것이지요.
두 번째로는 프로그램 실행 단계가 있습니다. 웹페이지를 새로고침하거나 코드를 실행하여 console.log가 동작하도록 해요.
세 번째는 개발자 도구 열기 단계입니다. 브라우저에서 F12 키를 누르거나 우클릭으로 "검사"를 선택하여 개발자 도구를 엽니다.
네 번째로는 콘솔 결과 확인 단계가 있습니다. Console 탭을 클릭하여 출력된 모든 로그들을 차례대로 확인하고 분석해요.
마지막으로 가장 중요한 문제 파악 및 개선 단계에서는 확인한 결과를 바탕으로 예상과 다른 부분을 찾아내고, 필요하면 코드를 수정한 후 다시 테스트를 진행합니다.
🧠 자주 하는 실수와 주의할 점
console.log를 사용할 때 초보자들이 자주 하는 실수들을 미리 알아두면 더 효과적으로 활용할 수 있어요.
❌ 실수 1: console.log를 너무 많이 사용하기
function simpleAdd(a, b) {
console.log("함수 시작");
console.log("첫 번째 값:", a);
console.log("두 번째 값:", b);
console.log("덧셈 진행 중");
let result = a + b;
console.log("덧셈 완료");
console.log("결과:", result);
console.log("함수 종료");
return result;
}이런 실수가 발생하는 이유는 모든 것을 확인하고 싶어 하는 마음 때문입니다. 하지만 너무 많은 로그는 오히려 중요한 정보를 찾기 어렵게 만들어요. 마치 일기에 "숨을 쉬었다", "눈을 깜빡였다"까지 모든 것을 기록하면 정작 중요한 일을 찾기 어려운 것과 같아요. 정말 중요한 부분만 선별해서 로그를 남기는 것이 좋아요.
❌ 실수 2: 브라우저 개발자 도구를 확인하지 않기
console.log("중요한 값:", importantValue);
// 하지만 브라우저에서 F12를 눌러 확인하지 않음!console.log를 코드에 작성했지만 정작 브라우저에서 결과를 확인하지 않는 경우가 있어요. 이는 마치 편지를 썼지만 보내지 않는 것과 같습니다. console.log의 진짜 가치는 출력된 결과를 보고 분석하는 데 있으므로, 반드시 개발자 도구를 열어서 확인하는 습관을 만들어야 해요.
❌ 실수 3: 완성된 코드에 연습용 로그 남겨두기
function getUserName() {
console.log("연습 중: getUserName 함수 호출됨"); // 이런 건 지워야 해요
return "사용자";
}개발과 연습이 끝나면 연습용 console.log는 제거하는 것이 좋습니다. 완성된 프로그램에 "연습 중"이나 "테스트"라는 메시지가 남아있으면 사용자에게 미완성된 느낌을 줄 수 있어요. 마치 선생님이 칠판에 "수업 준비 중"이라고 써놓고 수업을 진행하는 것과 같아요.
✏️ 직접 해보기 - 연습이 필요한 순간
이제 배운 내용을 연습 문제를 통해서 확실히 익혀보겠습니다.
시간이 흘러 여러분의 손끝에서 코드가 춤을 추기 시작합니다. 한 글자 한 글자 입력할 때마다 작은 기적이 일어나는 것을 느끼실 거예요. 그 기적을 직접 만들어보세요.
Ex1) 나의 정보를 변수에 담고 console.log로 확인해보자
// 나의 기본 정보를 변수에 저장하기
let myName = "지우"; // 내 이름을 저장해요
let myAge = 11; // 내 나이를 저장해요
let myHobbies = ["그림 그리기", "독서", "게임"]; // 내 취미들을 목록으로 저장해요
// 각 정보를 개별적으로 출력하기
console.log("이름:", myName); // 이름을 확인해요
console.log("나이:", myAge); // 나이를 확인해요
console.log("취미:", myHobbies); // 취미 목록을 확인해요
// 모든 정보를 한 번에 출력하기
console.log("전체 정보:", myName, myAge, myHobbies); // 모든 정보를 한꺼번에 봐요이 연습을 통해 console.log의 기본적인 사용법과 여러 값을 동시에 출력하는 방법을 익힐 수 있어요.
Ex2) 간단한 함수를 만들고 실행 과정을 확인해보자
// 좋아하는 색깔을 알려주는 함수
function tellFavoriteColor(color) {
console.log("🌈 색깔 함수가 시작되었습니다!"); // 함수 시작을 알려줘요
console.log("받은 색깔:", color); // 받은 색깔 정보를 확인해요
let message = "제가 좋아하는 색깔은 " + color + "입니다!"; // 메시지를 만들어요
console.log("만든 메시지:", message); // 만들어진 메시지를 확인해요
console.log("✨ 색깔 함수가 완료되었습니다!"); // 함수 완료를 알려줘요
return message; // 만든 메시지를 돌려줘요
}
// 함수 호출하고 결과 확인하기
console.log("--- 함수 테스트 시작 ---"); // 테스트 시작을 표시해요
let result = tellFavoriteColor("파란색"); // 함수를 실행해요
console.log("최종 결과:", result); // 함수에서 받은 결과를 확인해요
console.log("--- 함수 테스트 완료 ---"); // 테스트 완료를 표시해요이 문제는 함수의 실행 흐름을 추적하고 각 단계별 결과를 확인하는 방법을 연습하는 데 도움이 됩니다.
Ex3) 반복문에서 console.log 사용해보자
// 1부터 5까지 숫자와 그 제곱을 계산하기
function calculateSquares() {
console.log("🔢 제곱 계산을 시작합니다!"); // 계산 시작을 알려줘요
for (let i = 1; i <= 5; i++) { // 1부터 5까지 반복해요
console.log("현재 숫자:", i); // 지금 처리 중인 숫자를 확인해요
let square = i * i; // 제곱을 계산해요
console.log(" → " + i + "의 제곱은 " + square + "입니다!"); // 계산 결과를 보여줘요
}
console.log("🎯 제곱 계산이 모두 완료되었습니다!"); // 계산 완료를 알려줘요
}
calculateSquares(); // 함수를 실행해서 결과를 확인해요이 연습문제를 통해 반복문의 각 단계에서 변수 값의 변화를 추적하는 방법을 익힐 수 있어요.
🤔 조금 더 어려운 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해서 console.log에 대한 이해를 확인해보겠습니다.
Q1. 다음 코드의 console.log 출력 순서를 예상하고 그 이유를 설명해 보세요.
console.log("1번 메시지");
function testFunction() {
console.log("3번 메시지");
}
console.log("2번 메시지");
testFunction();
console.log("4번 메시지");정답: "1번 메시지", "2번 메시지", "3번 메시지", "4번 메시지" 순서로 출력됩니다.
해설: 자바스크립트는 코드를 위에서 아래로 순차적으로 실행해요. 함수는 선언된 위치가 아니라 호출된 위치에서 실행되므로, testFunction() 호출 시점에 "3번 메시지"가 출력됩니다. 이를 통해 코드의 실행 순서와 함수 호출 타이밍을 이해할 수 있어요.
Q2. 디버깅을 할 때 console.log를 효과적으로 사용하는 방법은 무엇일까요?
정답: 문제가 발생할 것 같은 구간의 앞뒤에 console.log를 배치하여 변수 값의 변화를 추적하고, 의미 있는 설명과 함께 출력하는 것입니다.
해설: 효과적인 디버깅을 위해서는 단순히 값만 출력하는 것이 아니라 "어떤 값인지", "언제 출력되는지"를 명확히 표시해야 해요. 예를 들어, console.log(x) 보다는 console.log("함수 시작 시 x 값:", x)처럼 설명을 포함하는 것이 나중에 로그를 분석할 때 훨씬 도움이 됩니다.
🔄 9단원 복습 - this와 친해지기
잠깐! 이전에 배운 내용을 다시 한번 복습해볼까요? 9단원에서 배운 this에 대해 간단한 문제로 기억을 되살려보겠습니다.
복습 문제 1: 메서드에서 this 확인하기
// 게임 캐릭터 객체를 만들어보세요
let character = {
name: "용사",
level: 5,
sayHello: function() {
console.log("안녕하세요! 저는 " + this.name + "이고 레벨 " + this.level + "입니다.");
}
};
character.sayHello(); // 실행해보세요!해답과 설명:
this.name은character.name인 "용사"를 가리켜요this.level은character.level인 5를 가리켜요- 객체의 메서드에서
this는 그 객체 자신을 뜻해요 - 결과: "안녕하세요! 저는 용사이고 레벨 5입니다."가 출력됩니다
복습 문제 2: call 메서드로 this 바꾸기
// this를 다른 객체로 바꿔보세요
let dog = {
name: "멍멍이",
speak: function() {
console.log(this.name + "가 짖어요!");
}
};
let cat = {
name: "야옹이"
};
dog.speak(); // 결과는?
dog.speak.call(cat); // 결과는?해답과 설명:
dog.speak(): "멍멍이가 짖어요!" 출력 (this는 dog)dog.speak.call(cat): "야옹이가 짖어요!" 출력 (this가 cat으로 바뀜)call메서드를 사용하면 함수의this를 원하는 객체로 바꿀 수 있어요
지금까지 console.log의 모든 특성과 활용법을 따뜻한 이야기와 함께 알아보았습니다. console.log는 여러분이 코딩을 배우면서 가장 자주 사용하게 될 소중한 도구입니다. 마치 요리할 때의 맛보기처럼, 코드의 맛을 확인하고 더 나은 프로그램을 만들어가는 데 큰 도움이 될 거예요!
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| console.log의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 주요 특징과 활용법 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
🎯 추가 연습 문제들
조금 더 연습하고 싶은 분들을 위한 추가 문제들입니다!
추가 문제 1. 변수들의 값을 console.log로 확인해보세요.
// 답:
let myName = "영희";
let myAge = 11;
let myHobbies = ["수영", "피아노"];
console.log("이름:", myName);
console.log("나이:", myAge);
console.log("취미:", myHobbies);추가 문제 2. 반복문의 실행 과정을 console.log로 확인해보세요.
// 답:
for (let i = 1; i <= 3; i++) {
console.log("현재 숫자:", i);
}
console.log("반복문 완료!");추가 문제 3. 조건문의 실행 경로를 console.log로 확인해보세요.
// 답:
function checkNumber(num) {
console.log("숫자 확인:", num);
if (num > 5) {
console.log("5보다 큰 숫자");
} else {
console.log("5 이하의 숫자");
}
}
checkNumber(7);
checkNumber(3);추가 문제 4. 다음 코드에서 console.log가 어떤 순서로 실행될까요?
console.log("1번");
function test() {
console.log("3번");
}
console.log("2번");
test();
console.log("4번");답: "1번", "2번", "3번", "4번" 순서로 출력됩니다. 함수는 호출될 때까지 실행되지 않으므로 test() 호출 시점에 "3번"이 출력됩니다.
추가 문제 5. 다음 중 어떤 console.log 사용법이 더 유용할까요?
// A
console.log(userName);
// B
console.log("사용자 이름:", userName);답: B번이 더 유용합니다. 어떤 값인지 설명을 함께 출력하면 나중에 로그를 확인할 때 이해하기 쉽습니다.
📂 마무리 정보
오늘 배운 10.2.1 내용이 여러분의 자바스크립트 지식에 잘 저장되었나요? 다음 시간에는 더 흥미로운 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'10. 오류와 친구하기 (에러 처리와 디버깅) > 10.2 디버깅 도구 사용하기' 카테고리의 다른 글
| 10.2.3 코드 여행길의 쉼터 만들기 - 중단점이라는 특별한 정거장 (0) | 2025.07.14 |
|---|---|
| 10.2.2 브라우저 디버거 - 코드를 천천히 들여다보는 강력한 확대경 (0) | 2025.07.14 |