console.groupEnd() 메서드란?
HTML DOM의 console.groupEnd() 메서드는 콘솔에서 열려 있는 메시지 그룹을 종료하는 역할을 합니다. 이 메서드가 호출되면 이후에 출력되는 메시지들은 더 이상 그룹에 포함되지 않고, 콘솔의 최상위 레벨에 표시됩니다.
메시지 그룹은 console.group()으로 시작하며, console.groupEnd()로 끝납니다. 두 메서드를 함께 사용하면 관련된 로그들을 계층 구조로 깔끔하게 정리할 수 있어 디버깅 시 가독성이 크게 향상됩니다.
문법
console.groupEnd() 메서드의 기본 문법은 다음과 같습니다.
console.groupEnd()
이 메서드는 별도의 매개변수를 받지 않으며, 호출 즉시 현재 활성화된 메시지 그룹을 종료합니다.
예제 코드
다음 예제를 통해 console.groupEnd() 메서드의 동작 방식을 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>console.groupEnd() Method</h1>
<p>F12 키를 눌러 개발자 도구의 콘솔 화면에서 결과를 확인하세요.</p>
<button type="button" onclick="groupMessage()">GROUP</button>
<button type="button" onclick="EndGroup()">END GROUP</button>
<script>
function groupMessage(){
console.group();
console.log("This message will be inside a group!");
console.log("This message will also be inside a group!");
}
function EndGroup(){
console.groupEnd();
console.log("We are now outside the group");
console.log("This message will be outside the group!");
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
GROUP 버튼 클릭 후 개발자 도구(F12)의 콘솔 화면을 보면 다음과 같이 메시지들이 하나의 그룹 안에 들어가 있는 것을 확인할 수 있습니다.
END GROUP 버튼 클릭 후 콘솔 화면을 보면, 이후 출력된 메시지들이 그룹 밖에 표시되는 것을 알 수 있습니다.
코드 상세 분석
1. 버튼 생성
먼저 GROUP과 END GROUP 두 개의 버튼을 만들고, 각각 클릭 시 groupMessage()와 EndGroup() 함수가 실행되도록 설정했습니다.
<button type="button" onclick="groupMessage()">GROUP</button> <button type="button" onclick="EndGroup()">END GROUP</button>
2. 그룹 시작 – 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!");
}3. 그룹 종료 – EndGroup() 함수
EndGroup() 함수 내부에는 console.groupEnd() 메서드가 포함되어 있습니다. 이 메서드가 호출된 이후 작성된 메시지들은 모두 그룹 바깥에 표시됩니다. 참고로, 종료할 메시지 그룹이 존재하지 않더라도 에러가 발생하지 않으므로 안심하고 사용할 수 있습니다.
function EndGroup(){
console.groupEnd();
console.log("We are now outside the group");
console.log("This message will be outside the group!");
}정리
console.groupEnd() 메서드는 console.group()으로 생성한 메시지 그룹을 닫는 전용 메서드입니다. 매개변수 없이 호출하며, 그룹이 없는 상태에서 호출해도 오류가 발생하지 않습니다. 복잡한 로그를 그룹 단위로 묶어 정리하고 싶을 때 console.group(), console.groupCollapsed()와 함께 활용하면 콘솔 디버깅 효율을 크게 높일 수 있습니다.