HTML DOM의 console.error() 메서드는 웹 브라우저의 콘솔(console)에 오류 메시지를 출력하는 데 사용됩니다. 이 메서드는 코드의 문제를 추적하고 원인을 파악하는 테스트 및 디버깅 작업에서 매우 유용하게 활용됩니다.
문법(Syntax)
console.error() 메서드의 기본 문법은 다음과 같습니다.
console.error(message)
여기서 message는 자바스크립트 문자열 또는 객체를 의미하며, 필수(required) 매개변수입니다. 일반적인 console.log()와 달리, console.error()로 출력된 메시지는 콘솔에서 빨간색 오류 아이콘과 함께 표시되어 오류임을 한눈에 알 수 있습니다.
예제(Example)
다음은 HTML DOM console.error() 메서드를 활용한 예제입니다. 버튼을 클릭하면 객체 형태의 오류 메시지가 콘솔에 출력됩니다.
<!DOCTYPE html>
<html>
<body>
<h1>console.error() Method</h1>
<p>아래 버튼을 클릭하면 객체가 오류 메시지로 콘솔에 출력됩니다</p>
<button type="button" onclick="errMessage()">ERROR</button>
<script>
function errMessage(){
var errObj = { Message:"ERROR has been caused", Value:"NEGATIVE"};
console.error(errObj);
}
</script>
<p>F12 키를 눌러 개발자 도구의 콘솔 탭에서 오류 메시지를 확인할 수 있습니다</p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
ERROR 버튼을 클릭한 후, 개발자 도구(DevTools)의 콘솔 탭을 확인해 보면 다음과 같이 오류 메시지가 출력된 것을 볼 수 있습니다.
예제 동작 방식 설명
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
1. 버튼 생성
먼저 사용자가 클릭하면 errMessage() 함수를 실행하는 ERROR 버튼을 만듭니다.
<button type="button" onclick="errMessage()">ERROR</button>
2. 오류 객체 생성 및 출력
errMessage() 함수 내부에서는 Message와 Value라는 두 개의 속성을 가진 객체(errObj)를 생성합니다. 그런 다음 이 객체를 console 객체의 error() 메서드에 매개변수로 전달하면, console.error() 메서드가 해당 객체를 오류 메시지 형태로 콘솔에 출력합니다.
function errMessage(){
var errObj = { Message:"ERROR has been caused", Value:"NEGATIVE"};
console.error(errObj);
}정리
console.error()는 단순히 정보를 기록하는 console.log()와 달리, 오류 상황을 명확하게 표시할 때 사용하는 메서드입니다. 문자열뿐만 아니라 객체도 출력할 수 있어, 복잡한 에러 정보를 구조화해서 확인할 수 있다는 장점이 있습니다. 디버깅 시 try-catch 문과 함께 활용하면 더욱 효과적으로 오류를 관리할 수 있습니다.