들어가며
유튜브 스크롤을 내리다가 노마드 코더의 영상 중에서 '무턱대고 console.log만 찍고 있나요?'라는 제목에 뜨끔하면서도 공감하여 시청하게 되었습니다.
이 영상을 통해 console이 제공하는 다양한 기능을 알게 되어서 유용하게 사용할 수 있는 메서드 중심으로 내용을 정리해 보려 합니다.
Console API
Console API는 mdn 문서에서 아래와 같이 말하고 있습니다.
브라우저의 디버깅 콘솔에 접근할 수 있는 메서드를 제공합니다. 동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여럿 있습니다.
웹 프론트 작업을 할 때는 대부분 브라우저의 개발자 도구 툴에서 디버깅하는 용도로 사용할 것 같은데요, 개발자 도구에 console. 을 찍어보면 많은 메서드가 존재한다는 것을 알 수 있습니다.
console.log
아마 디버깅을 할 때 가장 먼저 접하고 자주 사용하는 console.log()입니다. 이 메서드는 괄호 안에 들어간 내용을 콘솔 창에 출력해 줍니다.
숫자, 변수, 문자 등 다양하게 넣어 확인할 수 있습니다.
저는 원하는 값이 제대로 출력되는지 확인하는 용도로 가장 많이 사용하고 있습니다.
const a = 3;
const b = '이름';
console.log('콘솔'); // '콘솔'
console.log(123); // 123
console.log(a); // 3
console.log(`${b} 입니다.`); // '이름 입니다.'
console.count
React 개발 중에는 가끔 예상치 못한 곳에서 렌더링이 여러 번 발생하여 성능에 영향을 줄 수 있습니다. 이럴 때, 몇 번 렌더링 되었는지 확인하기 위해 console을 사용하게 됩니다.
만약 버튼을 누를 때마다 실행되는 함수의 호출 횟수를 파악하고 싶다면, 이전에는 useState와 console.log를 이용해서 찍었겠지만,
import { useState } from "react";
import "./styles.css";
export default function App() {
const [count, setCount] = useState(0);
const countFunction = () => {
setCount(count + 1);
console.log(count);
};
return (
<div className="App">
<button onClick={() => countFunction()} type="button">클릭</button>
</div>
);
}
console.count를 활용하면 아래와 같이 간단하게 코드를 변경할 수 있습니다.
import "./styles.css";
export default function App() {
const countFunction = () => {
console.count();
};
return (
<div className="App">
<button onClick={() => countFunction()} type="button">클릭</button>
</div>
);
}
console.count 괄호 안에는 label을 넣을 수 있습니다. 기본적으로 넣지 않으면 default로 표현되고 원하는 문자를(ex. ’함수 실행’) 넣으면 아래와 같이 원하는 문자로 볼 수 있습니다.
계속 카운트를 하다가 console.countReset([label])을 통해서 카운트 개수를 초기화 할 수 있습니다.
여기서 괄호안에는 배열로 초기화 시키고 싶은 label값을 넣으면 됩니다.
console.table
console.table은 데이터를 확인할 때 유용하게 쓰일 것 같습니다.
API에서 가져온 데이터를 console.log에 찍어보면 일반적으로 배열 객체 형태로 표시됩니다. 해당 값을 확인하려면 화살표를 눌러서 하나하나 펼쳐보아야 하는 불편함이 있었습니다.
여기서 console.table로 데이터를 확인해 보면 데이터가 테이블 형태로 표현되어 더 보기 편한 형태로 표시됩니다. 또한 테이블 정렬 기능도 있어서 데이터의 최솟값과 최댓값 확인에도 편리했습니다.
원하는 column만 표시하고 싶을 때는 console.table(data, ["column명"]); 이런식으로 사용해주시면 됩니다.
만약 객체 안에 값이 많을 때는 어떻게 표현될까요? 값이 많은 경우에는 테이블이 스크롤 되지는 않고, 필요한 경우에는 값이 말 줄임 되는 형태로 표현됩니다. 값이 많을 때는 이러한 점을 고려하여 테이블 아래에 있는 log 형태와 함께 사용해 보면 좋을 것 같습니다.
2차 배열도 배열의 index 순으로 테이블에 표현될 수 있습니다.
혹시나 배열 안에 배열 객체도 확인이 가능한가 했지만, 아직까지는 테이블에서 그려주지 못하더라구요. ㅎㅎ
console.assert
'assert'라는 단어가 생소해서 바로 어떤 동작을 하는 메서드인지 파악이 되지 않았는데요, 직역으로 ‘단언하다’라는 뜻을 가진 이 메서드는 조건이 ‘거짓’인 경우에만 콘솔 에러를 표시해 줍니다.
참일 때는 아무것도 표시되지 않고, 거짓일 때 에러가 표시되는 것을 통해 확신의 참이나 거짓을 찾고 싶을 때 유용하게 쓰일 것 같습니다.
console.trace
trace는 '추적하다'는 뜻과 같이 이 콘솔이 어떤 코드를 거쳐서 나왔는지 추적할 수 있게 해줍니다.
예시를 보면 이해가 더 쉬울 것 같은데요.
const function1 = () => {
const function2 = () => {
console.trace();
}
function2();
}
function1();
console.trace를 사용하면 fuction2가 실행되고 fuction1에서 호출되었다는 흐름을 파악할 수 있습니다.
복잡한 함수를 사용하다 보면 어디서부터 실행되었는지 찾기 어려울 때가 있습니다. 이럴 때 console.trace를 이용해 보면 어떨까요?
마치며
항상 console.log를 이용해서 디버깅 하다 보면 헷갈리는 부분도 있고, 디버깅을 위해 useState를 추가하는 등의 부가적인 귀찮은 작업들이 있었는데요, 오늘 정리한 메서드들을 이용하여 다양하게 활용하면 좋을 것 같다고 생각했습니다.
글 읽어주셔서 감사합니다.