JavaScript - Console.log(): 당신의 디버깅과 코드 이해의 관문
안녕하세요, 도전하는 프로그래머 여러분! 오늘 우리는 자바스크립트 개발자의 도구箱에서 가장 기본적이고 유용한 도구 중 하나인 console.log()에 대해 깊이 알아보게 될 것입니다. 친절한 이웃의 컴퓨터 과학 교사로서, 이 여정을 안내해 드리게 되어 기쁩니다. 믿으세요, 이 강의가 끝나면 프로처럼 로그를 남기는 법을 배우게 될 것입니다!
console.log()는 무엇인가요?
이제 구체적인 내용으로 들어가기 전에 console.log()가 정확히 무엇인지 이해해 보겠습니다. 복잡한 기계를 만들고 있지만 내부를 볼 수 없다면, 작은 창을 통해 내부를 훑어보는 것이 도움이 될지요. 그게 exactly console.log()가 코드에 대해 해주는 일입니다!
console.log()는 자바스크립트의 메서드로, 콘솔에 메시지를 인쇄하거나 "로그"를 남깁니다. 코드의 각 단계에서 자신에게 남긴 작은 메모와 같아요.
왜 중요한가요?
- 디버깅: 코드에서 오류를 찾고 수정하는 데 도움이 됩니다.
- 흐름 이해: 프로그램이 어떻게 순차적으로 실행되는지 볼 수 있습니다.
- 값 확인: 변수 값을 출력하여 기대하는 값인지 확인할 수 있습니다.
이제 손을 dirt하고 코드에 손을 대보겠습니다!
JavaScript console.log() 메서드
기본 사용법
가장 간단한 예제부터 시작해 보겠습니다:
console.log("Hello, World!");이 코드를 실행하면 콘솔에 "Hello, World!"가 출력됩니다. 간단하죠? 하지만 이 작은 메서드는 매우 강력합니다!
변수 로그
단순히 문자열만 로그할 수는 없습니다. 변수를 시도해 보겠습니다:
let name = "Alice";
let age = 30;
console.log(name);
console.log(age);이렇게 출력됩니다:
Alice
30문자열과 변수 결합
이제 더 흥미로워집니다. 문자열과 변수를 로그에 결합할 수 있습니다:
let fruit = "apple";
console.log("I love eating " + fruit + "s!");이렇게 출력됩니다: "I love eating apples!"
하지만 템플릿 리터럴을 사용하여 더 쉽게 할 수 있습니다:
let vegetable = "carrot";
console.log(`My favorite vegetable is a ${vegetable}.`);출력: "My favorite vegetable is a carrot."
${} 문법을 사용하면 문자열에 표현식을 직접 삽입할 수 있습니다!
여러 가치 로그
한 번에 하나의 것만 로그할 수는 없습니다. 이를 보세요:
let x = 5;
let y = 10;
console.log("x =", x, "and y =", y);출력: "x = 5 and y = 10"
객체 로그
자바스크립트 객체는 좀 더 복잡하지만, console.log()는 이를 쉽게 처리합니다:
let person = {
name: "Bob",
age: 25,
job: "Developer"
};
console.log(person);이렇게 콘솔에 전체 객체 구조를 출력합니다. 복잡한 데이터를 다루는 데 매우 유용합니다!
클라이언트 측 자바스크립트에서 console.log() 사용
이제 기본 내용을 다루었으므로, 웹 브라우저 환경에서 console.log()가 어떻게 작동하는지 살펴보겠습니다.
출력을 어디서 볼 수 있나요?
클라이언트 측 자바스크립트(즉, 브라우저에서 실행되는 자바스크립트)에서 작업할 때, 콘솔 출력을 볼 수 있도록 브라우저의 개발자 도구를 열어야 합니다. 다음은 빠른 가이드입니다:
- Chrome/Edge: F12 키를 누르거나 우클릭하고 "Inspect"를 선택한 후 "Console" 탭을 클릭합니다.
- Firefox: F12 키를 누르거나 우클릭하고 "Inspect Element"를 선택한 후 "Console" 탭을 클릭합니다.
- Safari: 환경 설정에서 "Develop" 메뉴를 활성화한 후 "Show Web Inspector"를 Develop 메뉴에서 선택합니다.
HTML 예제
간단한 HTML 파일을 만들어 자바스크립트를 추가해 보겠습니다:
<!DOCTYPE html>
<html>
<head>
<title>Console.log Demo</title>
</head>
<body>
<h1>Check the console!</h1>
<script>
console.log("This message is coming from the HTML file!");
let counter = 0;
for (let i = 0; i < 5; i++) {
counter += i;
console.log(`Counter is now: ${counter}`);
}
</script>
</body>
</html>이 HTML 파일을 브라우저에서 열고 콘솔을 확인하면 다음과 같이 보입니다:
This message is coming from the HTML file!
Counter is now: 0
Counter is now: 1
Counter is now: 3
Counter is now: 6
Counter is now: 10이 예제는 루프의 진행 상황을 추적하는 데 console.log()를 어떻게 사용할 수 있는지 보여줍니다 - 디버깅에 매우 유용합니다!
서버 측 자바스크립트에서 console.log() 사용
console.log()은 브라우저뿐만 아니라 서버 측 자바스크립트에서도 매우 유용합니다. Node.js를 서버 측 자바스크립트로 사용할 때도 마찬가지입니다.
Node.js에서 자바스크립트 실행
먼저 Node.js가 설치되어 있는지 확인하세요. 그런 다음 app.js라는 파일을 만들고 다음 내용을 추가합니다:
console.log("Hello from Node.js!");
function calculateArea(radius) {
let area = Math.PI * radius * radius;
console.log(`The area of a circle with radius ${radius} is ${area.toFixed(2)}`);
return area;
}
calculateArea(5);
calculateArea(7.5);이를 실행하려면 터미널을 열고 app.js가 있는 폴더로 이동한 후 다음을 타이پ합니다:
node app.js터미널에서 출력을 볼 수 있습니다:
Hello from Node.js!
The area of a circle with radius 5 is 78.54
The area of a circle with radius 7.5 is 176.71콘솔 메서드 표
다음은 유용한 콘솔 메서드 목록을 마크다운 형식으로 작성했습니다:
| 메서드 | 설명 |
|---|---|
console.log() |
콘솔에 메시지를 출력합니다 |
console.error() |
콘솔에 오류 메시지를 출력합니다 |
console.warn() |
콘솔에 경고 메시지를 출력합니다 |
console.info() |
콘솔에 정보 메시지를 출력합니다 |
console.table() |
표 형식의 데이터를 표시합니다 |
console.time() |
연산 시간을 측정하기 위해 타이머를 시작합니다 |
console.timeEnd() |
console.time()으로 시작된 타이머를 종료합니다 |
결론
이제 console.log()의 세계를 여행하고, 클라이언트 측과 서버 측 자바스크립트에서의 응용을 배웠습니다. 기억하세요, console.log()는 코딩 여정에서 언제나 당신의 든든한 동반자입니다. 디버깅, 학습, 탐구하는 데 매우 유용한 도구입니다.
프로그래밍 여정을 계속하면서, console.log()를 자주 사용하게 될 것입니다. 이 도구를 잘 활용하면 많은 도움이 될 것입니다. 그러니 빨리 로그를 남기고, 행복하게 코딩하세요!
Credits: Image by storyset