console.log 활용법 총정리 | 디버깅부터 console API까지

웹 개발자라면 누구나 한 번쯤 사용하는 기능이 바로 console.log입니다.
간단한 출력 도구로만 쓰는 경우가 많지만, 실제로는 디버깅과 성능 최적화, 코드 품질 개선에 활용할 수 있는 강력한 도구입니다.

이번 글에서는 console.log 활용법을 단계별로 정리해 보겠습니다.

codepen이나 jsfiddle에서 테스트 시 주의할 점

console.table이나 console.error, console.group, console.time 등 대부분의 console API 기능들이 codepen이나 jsfiddle에서는 제대로 동작하지 않습니다.

꼭 브라우저 개발자 도구 콘솔 창에서 테스트하는 것을 추천드립니다.

브라우저마다 console API의 디자인이나 동작 방식이 약간 달라질 수도 있습니다.

console.log 기본 출력 활용법

가장 단순한 사용법은 문자열이나 변숫값을 출력하는 것입니다.

const name = "꼴레뇨";
console.log("Hello, " + name); // Hello, 꼴레뇨
console.log(`Hello, ${name}`); // Hello, 꼴레뇨

👉 템플릿 리터럴(`)을 사용하면 문자열을 +로 합치지 않아도 돼서 가독성이 크게 좋아집니다.

여러 값 출력하는 console.log 활용법

쉼표(,)를 사용하면 변수 여러 개를 동시에 출력할 수 있습니다.

const name = "꼴레뇨";
const age = 99;
const grade = 1;
console.log("학생 정보:", name, age, grade); // "학생 정보:", "꼴레뇨", 99, 1

스타일 적용한 console.log 출력

CSS 스타일을 적용해 콘솔 메시지를 꾸밀 수 있습니다.

console.log("%c중요 알림!", "color: red; font-weight: bold; font-size: 20px;");

👉 아래와 같이 스타일이 적용된 콘솔 메시지를 콘솔 창에서 볼 수 있습니다. 눈에 확실히 띄기 때문에 꼭 놓치면 안 되는 정보 같은 게 있다면 유용하게 사용할 수 있을 것 같습니다.

중요 알림!

console.error, console.warn, console.info를 활용한 console 로그 레벨 관리

console.log 외에도 다양한 출력 메서드가 있습니다.
console.error와 console.warn 같은 경우에는 아이콘과 배경색을 다르게 해서 눈에 띄게 해주기 때문에 아주 유용합니다.

console.error("에러 발생");
console.warn("경고 메시지");
console.info("정보 메시지");
console.log("로그 메시지");

👉 각 브라우저 개발자 도구 콘솔 창에는 console 로그 레벨 필터링 기능이 있습니다. console 메시지가 많을 경우 굉장히 유용합니다.

JavaScript 속도 측정을 위한 console.time, console.timeEnd 활용

코드 실행 시간을 측정하려면 console.time과 console.timeEnd를 활용합니다.
시작 시간을 변수에 넣고, 종료시간에서 시작 시간을 빼서 초로 환산하는 방식으로도 가능하지만 console.time과 console.timeEnd를 이용하면 훨씬 편하고, 깔끔합니다.

console.time("loop");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("loop"); // loop: 3.5849609375 ms

👉 자동으로 ms로 변환까지 해줍니다. JavaScript 속도 측정할 때 필수적으로 사용해야 하는 console API입니다.

console.table을 활용한 데이터 시각화

배열이나 객체 배열을 표(table) 형태로 출력할 수 있습니다.

const students = [
  { name: "철수", age: 8 },
  { name: "영희", age: 9 },
  { name: "민수", age: 10 }
];
console.table(students);

👉 콘솔 창에 테이블 형태로 보기 좋게 출력됩니다.

console.group으로 로그 그룹화하기

관련된 로그를 그룹화해 출력할 수 있습니다.

console.group("학생 정보");
console.log("이름: 꼴레뇨");
console.log("나이: 99");
console.groupEnd();

console.group("블로그 정보");
console.log("이름: 심플 코딩 연구소");
console.log("플랫폼: 워드프레스");
console.groupEnd();

👉 콘솔 창에서 그룹별로 접었다 폈다 할 수 있어서 유용합니다.

console.trace로 경로 추적

console.trace가 호출된 전체 경로를 표시해 줍니다.

function thirdFunction() {
    console.trace('이 함수는 어디서 호출되었을까요?');
}

function secondFunction() {
    thirdFunction();
}

function firstFunction() {
    secondFunction();
}

firstFunction();

👉 호출 경로가 케이스별로 다르거나 에러 추적 시 유용하게 사용할 수 있습니다.

console.trace 출력 예시

이 함수는 어디서 호출되었을까요?
thirdFunction @ VM369:2
secondFunction @ VM369:6
firstFunction @ VM369:10
(익명) @ VM369:13

console.assert로 특정 조건에서만 로그 출력

조건이 false 일 때만 로그를 출력합니다.

// 에러 로그 출력됨
console.assert(1 === 2, '에러가 발생했습니다.');
// 아무 로그도 출력되지 않음
console.assert(1 === 1, '정상입니다.');

console.assert 출력 예시

어설션 실패:에러가 발생했습니다.
thirdFunction @ VM1997:2
secondFunction @ VM1997:6
firstFunction @ VM1997:10
(익명) @ VM1997:13

👉 if 문 + console.error + console.trace가 합쳐진 기능입니다. 테스트 코드나 유효성 검사에 아주 유용하게 사용할 수 있습니다.

console.count로 특정 이벤트 발생 횟수 카운트

특정 이벤트 발생 횟수를 세줍니다.

console.count('Button Click'); // Button Click: 1
console.count('Button Click'); // Button Click: 2
console.count('Button Click2'); // Button Click2: 1
console.count('Button Click'); // Button Click: 3

👉 반복 이벤트 추적에 편리합니다. 특정 이벤트가 과도하게 발생하는지 확인하기에도 좋을 것 같습니다.

console.clear로 콘솔 창 초기화

콘솔 창을 초기화합니다. 보통은 브라우저 개발자 도구의 clear console 버튼을 이용하겠지만 소스 코드로도 초기화를 할 수 있습니다.

console.clear();

👉 언뜻 보면 쓸모가 없어 보이지만 콘솔 내용을 한꺼번에 파일에 저장하거나 자동으로 서버로 보내는 경우가 있을 경우 유용하게 사용될 수도 있을 것 같습니다.

실무에서 console.log 활용 시 주의할 점

• 프로덕션 코드에서는 console.log를 최소화하거나 제거:
  불필요한 로그는 성능 저하와 보안 이슈를 유발할 수 있습니다.
• 전문 로깅 라이브러리 사용 고려:
  규모가 커지면 winston, pino 같은 로깅 도구 사용이 효율적입니다.
• 로그 레벨 관리:
  error, warn, info, log를 적절히 사용해서 로그 메시지를 체계적으로 구분하면 유지 보수성이 좋아집니다.

console API 요약

이 글에서 소개된 console API 메서드명과 기능만 간략하게 표로 요약해 봤습니다.

Console API	설명
console.log	다양한 데이터 타입을 콘솔에 출력한다.
console.error	에러 메시지를 콘솔에 출력한다.
console.warn	경고 메시지를 콘솔에 출력한다.
console.info	정보 메시지를 콘솔에 출력한다.
console.time	타이머를 시작해 코드 실행 시간을 측정한다.
console.timeEnd	타이머를 종료하고 경과 시간을 출력한다.
console.table	데이터를 테이블 형식으로 콘솔에 출력한다.
console.group	관련 로그를 그룹으로 묶어 출력한다.
console.trace	호출 스택을 추적해 콘솔에 출력한다.
console.assert	조건이 false일 때 에러 메시지를 출력한다.
console.count	특정 라벨의 호출 횟수를 콘솔에 출력한다.
console.clear	콘솔의 모든 출력을 초기화한다.

자주 묻는 질문(FAQ)

마무리

console.log와 console API에 이렇게 많은 기능이 있는지 처음 알았습니다. 개발 경력이 꽤 많은데도 불구하고, 처음 보는 기능들이 많았습니다.

기능이 많기도 하지만 상당수의 기능들이 실무에서 유용하게 쓰일 것 같았습니다.

그동안 console.log만 사용했었는데 다른 console API 기능들도 적극적으로 활용해 봐야겠습니다.

블로그 글 작성하려고 일부러 살펴봤는데 생각보다 많은 지식을 얻은 것 같아서 기쁘네요.

다른 유용한 console 기능이 있으면 댓글로 공유 부탁드립니다.

👉 지금 바로 프로젝트에 적용해 보고, 필요하다면 전문 로깅 라이브러리까지 고려해 보세요.

---

참고 자료

https://developer.mozilla.org/ko/docs/Web/API/Console

https://developer.chrome.com/docs/devtools/console?hl=ko