HTML DOM의 console.warn() 메서드는 브라우저 콘솔에 경고(warning) 메시지를 표시하는 데 사용됩니다. 대부분의 브라우저에서는 일반 로그와 구별하기 위해 경고 메시지 앞에 노란색 느낌표 아이콘이 함께 표시됩니다.
이 메서드의 가장 큰 장점은 코드 실행을 중단하지 않는다는 점입니다. 즉, 프로그램 흐름에 영향을 주지 않으면서 개발자가 사용자의 특정 동작에 대해 경고 메시지를 남길 수 있습니다. 디버깅 시 잠재적인 문제 상황을 표시할 때 특히 유용합니다.
문법(Syntax)
console.warn() 메서드의 기본 문법은 다음과 같습니다.
console.warn(message)
여기서 message는 필수 매개변수로, 문자열(string) 또는 객체(object) 타입을 사용할 수 있으며, 콘솔 화면에 경고 형태로 출력됩니다.
예제(Example)
다음은 console.warn() 메서드를 활용한 실제 예제입니다. 버튼을 4번 초과하여 클릭하면 콘솔에 경고 메시지가 표시되는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h1>console.warn() Method</h1>
<p>아래 버튼을 4번 이상 클릭해 보세요</p>
<button onclick="warning()" type="button">CLICK</button>
<script>
var i=0;
function warning(){
i++;
if(i>4)
console.warn("You have clicked this button too many times");
}
</script>
<p>F12 키를 눌러 콘솔에서 경고 메시지를 확인할 수 있습니다.</p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
CLICK 버튼을 4번 넘게 클릭한 후, 개발자 도구의 콘솔(Console) 탭을 열어보면 다음과 같이 경고 메시지가 출력된 것을 확인할 수 있습니다.
코드 분석
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
먼저, 사용자가 클릭할 때마다 warning() 함수를 호출하는 CLICK 버튼을 생성합니다.
<button onclick="warning()" type="button">CLICK</button>
warning() 함수는 클릭될 때마다 변수 i의 값을 1씩 증가시킵니다. 그리고 변수 i가 4보다 커지는 순간, 조건문(if)에 의해 console.warn(msg) 메서드가 실행되어 msg 매개변수의 내용이 경고 메시지로 콘솔에 표시됩니다.
var i=0;
function warning(){
i++;
if(i>4)
console.warn("You have clicked this button too many times");
}정리
console.warn()은 console.log()와 유사하지만 경고 수준의 메시지를 시각적으로 구분하여 표시한다는 차이점이 있습니다. 코드 실행을 방해하지 않으므로, 비정상적이지만 치명적이지 않은 상황을 기록하거나 사용자 동작에 대한 피드백을 남기는 데 적합합니다. 개발자 도구(F12)의 콘솔 탭에서 손쉽게 결과를 확인할 수 있다는 점도 기억해 두세요.