[Javascript] console.dir()로 객체의 모든 depth 구조 출력

 

 

오늘 할 내용은 코드로 바로 확인 해보자.

 

 

service 부

 

 

단순히 axios로 불러온 데이터를 파싱해서 쓰려고 했는데, 모든 depth의 데이터가 나오지 않았다.

 

예전에도 이런적이 한 번 있었는데 이번에 또 같은 케이스여서 포스팅을 해본다.

 

 

console.log(Openai_data.data)

 

 

이렇게 사진처럼 comments: [Array] 라고 나오는데 나는 그 값을 필요로해서 보고싶었다.

 

 

자바스크립트에서 객체를 콘솔에 출력하면, 기본적으로 일부 깊이까지만 출력되고, 

 

그 이상의 깊이는 [Array]나 [Object] 형태로 간략하게 표시되는 경우가 있다.

 

 

이때 console.dir() 을 쓰면 해결 가능하다.

 

자주 사용하는 console.log()와 console.dir()를 비교해 보면서 뭔지 알아보자.

 

 

console.log()와 console.dir()

 

- console.log()

 

사용법: 데이터를 간단하고 빠르게 확인하고 싶을 때 사용한다.

 

출력 형식: 일반적인 로그 출력에 적합하다.

 

깊이 제한: 중첩된 속성을 일정 깊이까지만 보여준다.

 

 

- console.dir(): 

 

사용법: 객체의 내부 구조를 자세히 보고 싶을 때 사용한다.

 

출력 형식: 트리 형태로 객체의 구조를 보여준다.

 

깊이 제한: depth 옵션으로 출력 깊이를 조절할 수 있다.

 

                 null이면 모든 수준을, 숫자를 지정하면 해당 깊이만큼만 탐색한다.

 

console.dir(Newming_data.data, { depth: null }); // 무한 깊이까지 출력

console.dir(Newming_data.data, { depth: 2 }); // 2단계 깊이까지 출력

 

이런식으로 코드는 작성하면 된다.

 

 

depth에 대해서 좀 더 자세히 살펴 보면,

 

console.dir() 메서드의 두 번째 인자로 옵션 객체를 전달할 수 있다. 

 

여기서 depth 프로퍼티는 객체의 내부를 얼마나 깊게 보여줄지 정하는 옵션인데, 

 

null로 설정하면 객체의 모든 수준의 내용을 보여준다. 

 

{depth: 숫자}: 숫자를 지정하면 해당 깊이만큼만 탐색한다. 

 

 

console.dir(Openai_data.data, { depth: null });

 

 

기존에 console.log(Openai_data.data) 부분을

 

console.dir(Openai_data.data, { depth: null }); 이렇게 변경하니 원하는대로 모든 depth의 데이터가 나왔다.

 

 

한번 더 정리를 하자면

 

console.log()는 빠르게 값 확인하기 좋다.

 

console.dir()은 객체 분석하기 좋고,  세부적으로 깊이를 조절할 수도 있다.