Categories: JavaScript

JavaScript 자바스크립트 console 콘솔 사용하기

자바스크립트 console 이란?

자바스크립트 console 은 디버깅 및 로깅을 위한 중요한 도구로, 웹 브라우저 환경에서 자주 사용됩니다. console 객체는 다양한 메서드를 제공하여 정보를 콘솔에 출력하고 디버깅하는 데 도움을 줍니다.

자주 쓰는 console 메서드

  1. log(message1, message2, …, messageN)
    • 콘솔에 일반적인 로그 메시지를 출력합니다. 여러 값들을 동시에 출력할 수 있습니다.
  2. info(message1, message2, …, messageN)
    • 정보성 메시지를 출력합니다. 주로 일반적인 로그와 구분하여 사용합니다.
  3. warn(message1, message2, …, messageN)
    • 경고 메시지를 출력합니다. 사용자에게 주의가 필요한 상황을 알립니다.
  4. error(message1, message2, …, messageN)
    • 에러 메시지를 출력합니다. 주로 프로그램에서 예외가 발생했을 때 사용합니다.
  5. table(data, columns)
    • 테이블 형태로 데이터를 출력합니다. 배열이나 객체의 속성을 표 형태로 표시하여 구조를 시각화합니다.
  6. group(label)
    • 그룹을 생성하여 관련된 로그 메시지를 그룹화합니다. groupEnd로 그룹을 종료합니다.
  7. count(label)
    • 지정된 레이블의 호출 횟수를 출력합니다. 반복문에서 몇 번 반복되는지 확인할 때 유용합니다.
  8. time(label) 및 timeEnd(label)
    • 지정된 레이블로 시작한 시간부터 종료 시간까지 걸린 시간을 측정합니다.
  9. assert(expression, message)
    • 주어진 조건이 거짓일 때만 메시지를 출력합니다. 조건이 참이면 아무것도 출력하지 않습니다.
  10. clear()
    • 콘솔의 모든 로그를 지웁니다. 화면을 정리할 때 사용합니다.

console 메서드 예제

log(message1, message2, …, messageN)

콘솔에 일반적인 로그 메시지를 출력합니다.

JavaScript
console.log("안녕하세요!", 20, { name: "John" });
JavaScript

info(message1, message2, …, messageN)

정보성 메시지를 출력합니다.

JavaScript
console.info("이 메시지는 정보를 담고 있습니다.");
JavaScript

warn(message1, message2, …, messageN)

경고 메시지를 출력합니다.

JavaScript
console.warn("주의: 이 작업은 실패할 수 있습니다.");
JavaScript

error(message1, message2, …, messageN)

에러 메시지를 출력합니다.

JavaScript
console.error("에러 발생! 코드를 확인하세요.");
JavaScript

table(data, columns)

테이블 형태로 데이터를 출력합니다.

JavaScript
const data = [
  { name: "John", age: 20 },
  { name: "Jane", age: 25 }
];
console.table(data);
JavaScript

group(label)

그룹을 생성하여 관련된 로그 메시지를 그룹화합니다.
groupEnd로 그룹을 종료합니다.

JavaScript
console.group("그룹 이름");
console.log("그룹 내용 1");
console.log("그룹 내용 2");
console.groupEnd();
JavaScript

count(label)

지정된 레이블의 호출 횟수를 출력합니다. 반복문에서 몇 번 반복되는지 확인할 때 유용합니다.

JavaScript
for (let i = 0; i < 5; i++) {
  console.count("반복 횟수");
  console.log("반복문이 실행되었습니다.");
}
JavaScript

time(label) 및 timeEnd(label)

코드 블록의 실행 시간을 측정하는 데 사용되는 console 메서드입니다.

JavaScript
console.time("myTimer"); // 타이머 시작

// 코드 블록 실행 (예: 반복문 또는 함수 호출)
for (let i = 0; i < 1000000; i++) {
  // 무언가 작업
}

console.timeEnd("myTimer"); // 타이머 종료 및 실행 시간 출력
JavaScript

assert(expression, message)

주어진 표현식(expression)이 false로 평가되면 오류 메시지(message)를 출력하는 console 메서드입니다. 조건이 참이면 아무것도 출력하지 않습니다.

JavaScript
x = 15;
console.assert(x < 10, "오류: x는 10보다 커야 합니다.");
JavaScript

결론

console 은 자바스크립트 디버깅의 필수 도구로 다양한 메서드를 통해 다양한 유형의 메시지를 출력하고 관련 정보를 확인할 수 있습니다. 로깅 및 디버깅에 효과적으로 활용하여 코드를 개선하고 오류를 신속하게 해결할 수 있습니다.

suover

Recent Posts

그림으로 쉽게 배우는 자료구조와 알고리즘: 미션3 | 문서 압축 (허프만 코딩)

들어가며 소프트웨어가 처리해야 하는 데이터 양이 늘어날수록, 단순히 기능 구현만으로는 성능과 효율을 보장하기 어렵습니다. 특히…

1주 ago

만들면서 쉽게 배우는 컴퓨터 구조: 미션3 | STOREB 명령어와 A·B 비교 구현

들어가며 소프트웨어를 구현할 때 성능 최적화나 안정성을 높이려면, 단순히 고수준 코드만 신경 쓰는 것을 넘어…

1주 ago

그림으로 쉽게 배우는 자료구조와 알고리즘: 미션2 | CPU 스케줄링

들어가며 소프트웨어가 복잡해질수록, 단순히 알고리즘의 시간복잡도만으로는 모든 문제를 해결할 수 없습니다. 특히 운영체제 수준에서는 다중…

2주 ago

만들면서 쉽게 배우는 컴퓨터 구조: 미션2 | 터널 연결부터 32바이트 RAM까지

들어가며 복잡한 소프트웨어가 원활히 동작하려면 단순히 코드만 잘 짜는 것으로는 부족합니다. 트랜잭션 처리나 대규모 데이터…

2주 ago

그림으로 쉽게 배우는 자료구조와 알고리즘: 미션1 | 메모리 검색

들어가며 소프트웨어를 개발할 때 메모리 관리 방식은 프로그램의 안정성과 성능을 좌우하는 핵심 요소입니다. 특히 자바스크립트,…

3주 ago

만들면서 쉽게 배우는 컴퓨터 구조: 미션1 | 진리표부터 회로 구현까지

들어가며 소프트웨어 개발자는 코드가 어떻게 실행되는지 정확히 이해해야 할 필요가 있습니다. 우리가 작성한 프로그램은 결국…

4주 ago