HTML DOM의 console.info() 메서드는 콘솔에 정보성(informational) 메시지를 출력할 때 사용하는 자바스크립트 메서드입니다. 주로 디버깅이나 테스트 과정에서 유용하게 활용되며, 일반적인 console.log()와 달리 정보 전달 목적의 메시지를 구분해서 보여준다는 특징이 있습니다.
흥미로운 점은 브라우저마다 표시 방식이 조금씩 다르다는 것입니다. 예를 들어 파이어폭스(Firefox)나 크롬(Chrome)에서는 console.info()로 출력한 문장 앞에 파란색 작은 i 아이콘이 함께 표시되어, 일반 로그와 시각적으로 구분됩니다.
문법(Syntax)
HTML DOM console.info() 메서드의 기본 문법은 다음과 같습니다.
console.info( message )
여기서 message는 필수 매개변수로, 문자열(string) 또는 객체(object) 타입을 사용할 수 있으며, 지정된 값이 그대로 콘솔에 출력됩니다.
예제(Example)
이제 console.info() 메서드가 실제로 어떻게 동작하는지 간단한 예제를 통해 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>console.info() Method</h1>
<p>Press F12 key to view the message in the console view.</p>
<button onclick="printInfo()">INFO</button>
<script>
function printInfo(){
console.info("Information is printed");
console.info("This is some other information ");
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
INFO 버튼을 클릭한 후 F12 키를 눌러 콘솔 창을 확인해 보면 아래와 같이 메시지가 출력된 것을 볼 수 있습니다.
코드 설명
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. 버튼 생성
먼저 클릭 이벤트가 발생했을 때 printInfo() 함수를 실행하도록 연결된 INFO 버튼을 만들었습니다.
<button onclick="printInfo()">INFO</button>
2. 함수 정의
printInfo() 함수 내부에는 console.info() 메서드가 포함되어 있어, 버튼이 클릭될 때마다 정보성 메시지가 콘솔에 출력됩니다. 실행 결과에서 확인할 수 있듯이, console.info()로 작성된 메시지 옆에는 i 아이콘이 붙어 있는 것을 알 수 있습니다.
function printInfo(){
console.info("Information is printed");
console.info("This is some other information ");
}마무리
console.info()는 단순히 메시지를 출력하는 것을 넘어, 디버깅 시 정보성 로그와 일반 로그를 시각적으로 구분할 수 있게 해주는 유용한 도구입니다. console.log(), console.warn(), console.error() 등 다른 콘솔 메서드들과 함께 활용하면 더욱 체계적으로 코드를 분석하고 문제를 해결할 수 있습니다.