콘솔 로깅: console.log vs JSON.stringify

JavaScript 콘솔 출력 차이: console.log vs JSON.stringify

개발하다 보면 콘솔에 객체 데이터를 출력할 때 예상과 다르게 보일 때가 있다.
특히, 브라우저 콘솔과 VS Code 터미널에서 다르게 보이는 경우가 있는데, 그 이유를 정리해보았다.

console.log의 출력 방식

일반적으로 객체를 출력할 때 이렇게 작성한다.

console.log("매칭 정보:", response.data);

하지만 환경에 따라 다르게 보인다.

1. 브라우저 콘솔

   • 객체 형태로 트리 구조를 유지하며 출력됨.
   • 펼쳐서 각 키-값을 확인할 수 있음.

2. VS Code 터미널 (Node.js 환경)

   • JSON이 아닌 일반 객체로 출력되며 한 줄로 나올 가능성이 높음.
   • 계층 구조를 보기 어렵고, 복잡한 객체일수록 가독성이 떨어짐.

JSON.stringify를 활용한 출력 포맷팅

객체를 더 보기 좋게 출력하려면 JSON.stringify를 사용하면 된다.

console.log("매칭 정보2:", JSON.stringify(response, null, 2));

이 코드에서 JSON.stringify의 의미는 다음과 같다.

• response: 변환할 객체
• null: replacer 함수 (필터 역할) 사용 안 함
• 2: 들여쓰기 2칸 적용

결과 차이

const userData = {
  user: {
    name: "김개발",
    skills: ["JavaScript", "React", "Node.js"],
    experience: {
      years: 3,
      companies: ["테크컴퍼니", "스타트업"]
    }
  }
};

// VS Code 터미널에서
console.log("유저 정보:", userData);
// 출력: 유저 정보: { user: { name: '김개발', skills: [ 'JavaScript', 'React', 'Node.js' ], experience: { years: 3, companies: [Array] } } }

// JSON.stringify 사용
console.log("유저 정보:", JSON.stringify(userData, null, 2));
// 출력:
// 유저 정보: {
//   "user": {
//     "name": "김개발",
//     "skills": [
//       "JavaScript",
//       "React",
//       "Node.js"
//     ],
//     "experience": {
//       "years": 3,
//       "companies": [
//         "테크컴퍼니",
//         "스타트업"
//       ]
//     }
//   }
// }

이렇게 계층 구조를 유지한 채 정리된 JSON 형식으로 출력된다.

결론

✔️ 브라우저 콘솔에서는 console.log(obj)가 트리 구조로 보이지만, 터미널에서는 한 줄로 보일 수 있다.
✔️ JSON.stringify(obj, null, 2)를 사용하면 어느 환경에서든 포맷팅된 JSON 형식으로 출력할 수 있다.
✔️ 복잡한 객체를 출력할 때는 JSON.stringify를 활용하자!