HTML DOM의 console.groupCollapsed() 메서드는 브라우저 콘솔에서 접혀진(collapsed) 상태로 시작되는 메시지 그룹을 생성합니다. 일반적인 console.group() 메서드와 달리, 이 메서드로 묶인 메시지들은 기본적으로 펼쳐져 있지 않고 접힌 상태로 표시되어 콘솔 화면을 깔끔하게 정리할 수 있습니다.
문법(Syntax)
console.groupCollapsed() 메서드의 기본 문법은 다음과 같습니다.
console.groupCollapsed(label)
여기서 label은 그룹에 지정할 라벨(이름)로, 선택적으로 사용할 수 있습니다.
예제(Example)
console.groupCollapsed() 메서드가 실제로 어떻게 동작하는지 예제를 통해 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>console.groupCollapsed() Method</h1>
<p>F12 키를 눌러 개발자 도구의 콘솔 화면에서 결과를 확인하세요.</p>
<button type="button" onclick="normMessage()">NORMAL</button>
<button type="button" onclick="CollMessage()">COLLAPSED</button>
<script>
function normMessage(){
console.log("Hello world!");
}
function CollMessage(){
console.groupCollapsed();
console.log("This message will be inside a collapsed group!");
console.log("This message will also be inside a collapsed group!");
}
</script>
</body>
</html>출력 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
NORMAL 버튼을 클릭한 후 개발자 도구(F12)의 콘솔 화면을 확인하면 다음과 같습니다.
COLLAPSED 버튼을 클릭한 후 개발자 도구의 콘솔 화면을 확인하면, 메시지들이 하나의 접힌 그룹 안에 정리되어 표시됩니다.
코드 분석
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. 버튼 생성
먼저 NORMAL과 COLLAPSED 두 개의 버튼을 만들고, 각각 클릭 시 normMessage() 함수와 CollMessage() 함수가 실행되도록 onclick 이벤트를 연결했습니다.
<button type="button" onclick="normMessage()">NORMAL</button> <button type="button" onclick="CollMessage()">COLLAPSED</button>
2. normMessage() 함수
normMessage() 함수 내부에는 console.log() 메서드가 있습니다. 이 메서드는 매개변수로 전달받은 문자열이나 객체를 콘솔에 그대로 출력하는 역할을 합니다.
function normMessage(){
console.log("Hello world!");
}3. CollMessage() 함수
CollMessage() 함수 내부에는 console.groupCollapsed() 메서드가 포함되어 있습니다. 이 메서드가 호출된 이후에 작성된 모든 메시지는 하나의 접힌 메시지 그룹 안에 표시됩니다. 기본적으로 펼쳐진 상태로 출력되는 console.group() 메서드와 달리, 이 메서드를 사용하면 메시지들이 접힌 상태로 그룹화됩니다.
function CollMessage(){
console.groupCollapsed();
console.log("This message will be inside a collapsed group!");
console.log("This message will also be inside a collapsed group!");
}정리
console.groupCollapsed() 메서드는 로그가 많은 대규모 애플리케이션을 디버깅할 때 특히 유용합니다. 관련된 로그들을 하나의 접힌 그룹으로 묶어두면 콘솔이 복잡해지는 것을 방지할 수 있으며, 필요할 때 그룹을 클릭하여 내용을 펼쳐 확인할 수 있습니다.