console.log? console.error? 무슨 차이일까?
안녕하세요 :)
JavaScript 개발을 하다보면 console.log와 console.error라는 두 가지 함수를 여러 번 접해보셨을 거라고 생각합니다. 둘 다 콘솔에 메시지를 출력하는 용도로 쓰이지만, 어떤 차이가 있을까요? 그리고 각각 언제 사용하는 것이 더 좋을까요? 이번 글에서는 console.log와 console.error에 대해 알아보겠습니다.
콘솔(console)이란 무엇인가
우선 콘솔이 무엇인지부터 보고 넘어가겠습니다. console(콘솔)은 프로그램의 상태가 실행 결과를 출력하고, 개발자가 프로그램과 티키타카할 수 있는 일종의 도구입니다. 웹 개발을 할 때 브라우저의 콘솔을 통해 JavaScript 코드를 실행하고, 디버깅하며, 오류를 확인할 수 있죠.
브라우저 콘솔?
브라우저에서는 F12나 Ctrl + Shift + C를 눌러 개발자 도구를 열 수 있습니다. 거기서 "console" 이나 "콘솔" 탭을 선택하면 콘솔을 사용할 수 있습니다. 여기에 JavaScript 코드를 직접 입력하고 결과를 바로 확인할 수 있습니다.
이러한 콘솔은 개발자에게는 매우매우 중요한데, 개발자가 코드의 동작 및 흐름을 이해하고, 오류를 해결하는 데 있어서 무조건 필요한 도구입니다. 특히 JavaScript 개발에서는 브라우저 콘솔을 통해 디버깅과 테스트를 손쉽게 수행할 수 있어 아주 유용하게 쓰입니다.
console.log와 console.error
console.log와 console.error는 둘 다 어떠한 메시지를 콘솔에서 확인하고 싶을 때 사용합니다. 주로 개발할 때 많이 사용되고, 배포를 하면 코드를 조금이라도 가볍게 하기 위해서 대부분 지워버리죠. 하지만, 디버깅을 할 때는 콘솔에 메시지를 출력해서 코드의 흐름을 파악하고 어디서 문제가 생긴 건지 파악해야 합니다.
- console.log
- .log는 일반적인 정보를 콘솔에 출력하는 함수입니다.
- 함수 실행 결과나 변수의 값을 확인할 때 주로 사용되며, 콘솔에서는 주로 흰색 또는 회색으로 표시됩니다.
- console.error
- .error는 .log와 다르게 오류나 예외 상황을 콘솔에 출력할 때 사용하는 함수입니다.
- 콘솔에서는 빨간색으로 표시되고, 일반 로그와 시각적으로 구분이 가능합니다.
- 문제 상황을 명확하게 알리기 위해 주로 사용되며, 일부 디버깅 도구에서는 concole.error를 중요한 에러로 인식해 알림을 주기도 합니다.
어떤 상황에서 사용할까요?
console.log는 주로 코드의 흐름을 파악할 때 사용됩니다. 변수의 값이나 함수 결과를 출력해, 코드가 예상대로 동즉하는지 확인할 때 적합하죠. 반면, console.error는 특정 예외 상황이나 오류가 발생했을 때 이를 명확히 전달하기 위해 사용됩니다.
API 호출 코드를 예시로 보도록 하겠습니다.
async function FetchExample(url) {
try{
console.log("불러오는 데이터 URL:", url)
const response = await fetch(url); // 일반적인 콘솔 로그 출력
if (response.ok){
console.error("에러: 데이터 불러오기 실패!", response.status); // 오류 로그 출력
return null;
}
const data = await response.json()
console.log("불러온 데이터: ", data);
return data;
}
catch(error){
console.error("에러: 데이터를 불러오는데 예상치 못한 오류가 발생하였습니당.", error);
}
}
FetchExample("https://api.jinukExample.com/data");- API 호출을 시작할 때 호출하려는 URL을 출력하기 위해서, 그리고 불러온 데이터를 확인할 때 console.log을 사용했습니다.
- console.error도 사용하였는데, 서버에서 오류 응답을 받았을 때 오류 상태를 표시하도록 되어있습니다.
끝내는 말
오늘은 console.log와 console.error에 대해 알아보았습니다. 개발을 하다가 console.log와 console.error 두 함수가 보이길래 대충 하나는 그냥 콘솔에다 내가 원하는 데이터를 출력하는 거고, 하나는 오류를 출력하는 거 아닌가? 하다가 제대로 한 번 설명하려고 글을 작성해봤습니다..ㅎ.ㅎ
두 함수는 각각의 목적에 맞게 사용하면 디버깅에 큰 도움이 될 수 있죠. 일반 정보는 console.log, 오류는 console.error로 출력하여 코드의 흐름과 문제 상황을 효과적으로 구분해야 할 때 사용하시면 좋을 거 같습니다.
읽어주셔서 감사합니다 :)