console 심화 — table, group, time, assert 활용법

const users = [
  { name: "정훈", age: 25, role: "개발자" },
  { name: "길동", age: 30, role: "디자이너" },
  { name: "순신", age: 28, role: "PM" },
];

// 전체 표시
console.table(users);
// ┌─────────┬────────┬─────┬──────────┐
// │ (index) │  name  │ age │   role   │
// ├─────────┼────────┼─────┼──────────┤
// │    0    │ "정훈" │  25 │ "개발자" │
// │    1    │ "길동" │  30 │ "디자이너"│
// │    2    │ "순신" │  28 │  "PM"    │
// └─────────┴────────┴─────┴──────────┘

// 특정 열만 표시
console.table(users, ["name", "role"]);

console.group("사용자 정보");
console.log("이름: 정훈");
console.log("나이: 25");

  console.group("주소"); // 중첩 그룹
  console.log("도시: 서울");
  console.log("구: 강남구");
  console.groupEnd();

console.groupEnd();

// 기본 접힌 상태로 표시
console.groupCollapsed("상세 디버그 정보");
console.log("이 내용은 접혀 있음");
console.groupEnd();

function logRequest(method, url, response) {
  console.groupCollapsed(`${method} ${url} — ${response.status}`);
  console.log("Headers:", response.headers);
  console.log("Body:", response.body);
  console.log("Duration:", response.duration + "ms");
  console.groupEnd();
}

console.time("배열 정렬");
const arr = Array.from({ length: 100000 }, () => Math.random());
arr.sort();
console.timeEnd("배열 정렬");
// 배열 정렬: 42.123ms

// 중간 지점 측정
console.time("전체 작업");

console.time("데이터 로딩");
// ... 데이터 로딩
console.timeEnd("데이터 로딩");

console.time("데이터 가공");
// ... 데이터 가공
console.timeEnd("데이터 가공");

console.timeEnd("전체 작업");

// timeLog — 종료하지 않고 중간 시간 확인
console.time("프로세스");
// ... 작업 1
console.timeLog("프로세스", "1단계 완료");
// ... 작업 2
console.timeLog("프로세스", "2단계 완료");
console.timeEnd("프로세스");

const age = 15;

console.assert(age >= 18, "미성년자입니다!", { age });
// Assertion failed: 미성년자입니다! { age: 15 }

console.assert(age >= 0, "나이가 음수입니다!");
// (조건이 true이므로 아무것도 출력 안 됨)

// 데이터 검증에 활용
function processUser(user) {
  console.assert(user != null, "user가 null입니다");
  console.assert(user?.name, "name이 없습니다", user);
  console.assert(user?.age > 0, "age가 유효하지 않습니다", user);
}

function handleClick(button) {
  console.count(button);
}

handleClick("좋아요");   // 좋아요: 1
handleClick("좋아요");   // 좋아요: 2
handleClick("싫어요");   // 싫어요: 1
handleClick("좋아요");   // 좋아요: 3

console.countReset("좋아요");
handleClick("좋아요");   // 좋아요: 1

function c() {
  console.trace("호출 경로 추적");
}

function b() {
  c();
}

function a() {
  b();
}

a();
// 호출 경로 추적
//   at c (script.js:2)
//   at b (script.js:6)
//   at a (script.js:10)

// DOM 요소의 속성을 보고 싶을 때
console.log(document.body);  // HTML로 표시
console.dir(document.body);  // 객체 속성으로 표시

// 깊이 제한 (Node.js)
const nested = { a: { b: { c: { d: 1 } } } };
console.dir(nested, { depth: 2 }); // 2단계까지만 표시

console.log(
  "%c성공!%c 데이터가 저장되었습니다.",
  "color: green; font-weight: bold; font-size: 16px;",
  "color: inherit;"
);

// 여러 스타일
console.log(
  "%c[INFO]%c 서버 시작 %c포트: 3000",
  "background: #007bff; color: white; padding: 2px 6px; border-radius: 3px;",
  "",
  "color: #007bff; font-weight: bold;"
);

// 경고 — 노란색 배경
console.warn("이 API는 곧 폐기됩니다.");

// 에러 — 빨간색 배경 + 스택 트레이스
console.error("데이터 로딩 실패:", error);

// info — 파란색 아이콘 (브라우저마다 다름)
console.info("현재 버전: 2.0.0");

// debug — 기본적으로 숨겨져 있음 (로그 레벨 설정 필요)
console.debug("디버그 정보:", { state });

// 방법 1: 조건부 로깅
const isDev = process.env.NODE_ENV === "development";

const logger = {
  log: (...args) => isDev && console.log(...args),
  warn: (...args) => isDev && console.warn(...args),
  error: (...args) => console.error(...args), // 에러는 항상 표시
};

// 방법 2: 빌드 시 제거 (terser 플러그인)
// webpack/vite 설정에서 console.log를 자동 제거