# JavaScript 콘솔 메서드 10가지 꿀팁 – 모르면 손해! 디버깅 시간을 단축하는 비법 --- # # 서론: “콘솔에 뭘 써야 할지 모르겠어요?” 프론트엔드 개발을 시작한 지 얼마 안 된 초보자라면, 브라우저 콘솔에 `console.log()`만 찍어두고는 **“왜 이렇게 디버깅이 오래 걸리지?”** 라는 고민을 한 번쯤은 해봤을 겁니다. 실제 현업에서도 **“콘솔 메서드가 부족해서 디버깅이 힘들다”** 라는 이야기를 자주 듣습니다. 하지만 여러분이 아직 모르는 **10가지 JavaScript 콘솔 메서드**가 있습니다. 이 메서드들을 제대로 활용하면 복잡한 객체를 한눈에 파악하고, 실행 흐름을 시각적으로 추적하며, 심지어 퍼포먼스까지 체크할 수 있습니다. 오늘은 **JavaScript 콘솔 메서드**, **디버깅 팁**, **개발자 도구** 라는 SEO 키워드를 중심으로, 초보자도 바로 적용할 수 있는 실전 예시와 함께 소개합니다. --- # # 본론 ## # 1. `console.table()` – 표 형태로 데이터 시각화 ``` js const users = [ { id: 1, name: '홍길동', age: 28 }, { id: 2, name: '김철수', age: 34 }, { id: 3, name: '이영희', age: 22 } ]; console.table(users); ``` - **효과**: 배열이나 객체를 표 형태로 출력해 한눈에 비교 가능 - **활용 상황**: API 응답 데이터를 확인하거나, 반복문 안에서 각 아이템을 검증할 때 > **팁**: `console.table()`은 객체 배열뿐 아니라 객체 자체도 컬럼 형태로 보여줍니다. --- ## # 2. `console.group()` / `console.groupEnd()` – 로그 그룹화 ``` js console.group('User Info'); console.log('Name: 홍길동'); console.log('Age: 28'); console.groupEnd(); ``` - **효과**: 관련 로그를 하나의 그룹으로 묶어 트리 구조로 표시 - **활용 상황**: 복잡한 함수 로직을 단계별로 추적하거나, 여러 모듈에서 발생하는 로그를 구분하고 싶을 때 --- ## # 3. `console.assert()` – 조건이 거짓일 때만 경고 ``` js const isLoggedIn = false; console.assert(isLoggedIn, '사용자가 로그인되지 않았습니다.'); ``` - **효과**: 조건이 `false`일 때만 메시지를 출력해 불필요한 로그를 최소화 - **활용 상황**: 테스트 코드에 간단히 삽입해 가정(assumption)을 검증하고 싶을 때 --- ## # 4. `console.count()` – 호출 횟수 추적 ``` js function foo() { console.count('foo 호출 횟수'); } foo(); foo(); foo(); ``` - **효과**: 동일 라벨에 대해 호출된 횟수를 자동 카운트 - **활용 상황**: 루프가 몇 번 실행됐는지, 이벤트 리스너가 중복 등록됐는지 확인할 때 --- ## # 5. `console.time()` / `console.timeEnd()` – 코드 실행 시간 측정 ``` js console.time('fetchTime'); fetch('https://api.example.com/data') .then(res => res.json()) .then(() => console.timeEnd('fetchTime')); ``` - **효과**: 지정한 라벨에 대한 경과 시간을 밀리초 단위로 출력 - **활용 상황**: API 응답 시간, 복잡한 연산 함수 성능을 빠르게 체크하고 싶을 때 --- ## # 6. `console.trace()` – 현재 호출 스택 출력 ``` js function a() { b(); } function b() { c(); } function c() { console.trace('현재 호출 스택'); } a(); ``` - **효과**: 함수 호출 흐름을 트레이스 형태로 보여줌 - **활용 상황**: 콜백 지옥에 빠졌을 때 어느 지점에서 호출됐는지 파악하고 싶을 때 --- ## # 7. `console.dir()` – 객체 구조 상세히 보기 ``` js const elem = document.querySelector('#myDiv'); console.dir(elem); ``` - **효과**: DOM 요소의 프로퍼티와 메서드를 트리 형태로 탐색 가능 - **활용 상황**: DOM API를 직접 확인하거나, 객체 내부에 숨겨진 프로퍼티를 찾아볼 때 --- ## # 8. `console.warn()` & `console.error()` – 레벨별 로그 구분 ``` js console.warn('이 API는 곧 폐기됩니다.'); console.error('서버 응답이 비정상적입니다.'); ``` - **효과**: 콘솔에 색상과 아이콘을 달리해 심각도 구분 - **활용 상황**: 개발 단계에서 경고와 에러를 명확히 구분해 팀원과 공유하고 싶을 때 --- ## # 9. `console.clear()` – 콘솔 초기화 ``` js console.clear(); // 이전 로그를 모두 지웁니다. ``` - **효과**: 디버깅 중 화면을 깔끔하게 정리 - **활용 상황**: 장시간 디버깅 후 이전 로그가 방해될 때 --- ## # 10. `console.groupCollapsed()` – 자동 접힌 그룹 ``` js console.groupCollapsed('디테일 로그'); console.log('세부 정보 1'); console.log('세부 정보 2'); console.groupEnd(); ``` - **효과**: 기본적으로 접힌 상태로 그룹을 만들어 필요할 때만 펼침 - **활용 상황**: 로그가 많아 콘솔이 복잡해질 때, 핵심 정보만 먼저 보여주고 싶을 때 --- # # 결론: 오늘 바로 적용해 보세요! 위에서 소개한 **10가지 콘솔 메서드**는 단순히 `console.log()`를 대체하는 수준이 아니라, **디버깅 효율을 극대화**하고 **코드 가독성을 높이는 강력한 도구**입니다. 1️⃣ **표**로 데이터를 한눈에 파악하고 2️⃣ **그룹**으로 로그를 정리하며 3️⃣ **시간**과 **카운트**로 퍼포먼스를 체크하고, 이 모든 것이 **개발자 도구** 안에서 바로 이루어집니다. > **실전 팁**: 프로젝트에 `debug.js` 같은 파일을 만들어, 자주 쓰는 콘솔 메서드들을 함수화해 두면 팀 전체가 동일한 디버깅 스타일을 유지할 수 있습니다. 이제 브라우저 콘솔을 **무시무시한 디버깅 지옥**이 아니라, **친절한 조력자**로 바꿔 보세요. **💡 행동 유도** - 오늘 작성 중인 프로젝트에 `console.table()`과 `console.time()`을 각각 하나씩 적용해 보세요. - 다음 주 회의 때 팀원에게 **“콘솔 메서드 10가지”**를 공유하고, 가장 유용했던 메서드를 투표해 보세요. 디버깅에 드는 시간을 절반으로 줄이고, 더 빠르게 코드를 완성하는 경험을 직접 체험해 보시길 바랍니다! 🚀