HTML DOM의 console.group() 메서드는 콘솔에서 메시지 그룹의 시작을 선언하는 데 사용됩니다. 이 메서드가 호출된 이후에 출력되는 모든 메시지는 해당 그룹 내부에 표시됩니다. 선택적인 label 매개변수를 활용하면 하나의 그룹만 만들 수도 있고, 라벨이 서로 다른 여러 개의 그룹을 만들 수도 있습니다.
문법(Syntax)
console.group() 메서드의 기본 문법은 다음과 같습니다.
console.group([label])
여기서 label은 선택적(optional) 매개변수입니다. 문자열 타입이며, 생성되는 메시지 그룹의 이름(라벨) 역할을 합니다.
예제(Example)
HTML DOM console.group() 메서드의 실제 동작을 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>console.group() Method</h1>
<p>F12 키를 눌러 콘솔 화면에서 메시지를 확인하세요.</p>
<button type="button" onclick="normMessage()">NORMAL</button>
<button type="button" onclick="groupMessage()">GROUP</button>
<script>
function normMessage(){
console.log("Hello world!");
}
function groupMessage(){
console.group();
console.log("This message will be inside a group!");
console.log("This message will also be inside a group!");
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
NORMAL 버튼을 클릭한 후 콘솔을 확인한 결과입니다.
GROUP 버튼을 클릭한 후 콘솔을 확인한 결과입니다.
코드 설명
위 예제에서는 두 개의 버튼 NORMAL과 GROUP을 만들었습니다. 사용자가 각 버튼을 클릭하면 normMessage()와 groupMessage() 함수가 실행됩니다.
<button type="button" onclick="normMessage()">NORMAL</button> <button type="button" onclick="groupMessage()">GROUP</button>
normMessage() 함수
normMessage() 함수에는 console.log() 메서드가 포함되어 있습니다. 이 메서드는 매개변수로 전달된 문자열이나 객체를 단순히 콘솔에 그대로 출력합니다.
function normMessage(){
console.log("Hello world!");
}groupMessage() 함수
groupMessage() 함수 내부에는 console.group() 메서드가 있습니다. 이 지점 이후에 작성된 모든 메시지는 하나의 메시지 그룹 안에 함께 표시됩니다.
function groupMessage(){
console.group();
console.log("This message will be inside a group!");
console.log("This message will also be inside a group!");
}정리
console.group()은 디버깅 시 관련된 로그들을 계층적으로 묶어 가독성을 높여주는 유용한 도구입니다. 그룹을 종료하려면 console.groupEnd() 메서드를 호출하면 되며, 기본적으로 접힌 상태로 그룹을 만들고 싶다면 console.groupCollapsed()를 사용할 수 있습니다.