Notion API 로그에서 Object 데이터 확인하기- 효과적인 디버깅 방법
요즘 웹 개발을 하다 보면 다양한 API와 연동하는 경우가 많아졌습니다. 저도 최근 Notion API를 사용하면서 로그에 나타난 [Object] 데이터를 확인하느라 고생했는데요. 이번 글에서는 제가 직접 해결한 방법을 소개해보려 합니다.
문제 상황: [Object]로만 표시되는 로그
본격적인 소개에 앞서, 개발 중 마주친 문제 상황을 설명해볼게요. Notion API를 통해 데이터를 가져오는 과정에서, 콘솔에 출력된 로그가 다음과 같이 표시되었습니다:
1{
2 object: 'list',
3 results: [
4 {
5 object: 'page',
6 id: '1d73947b-e60a-80b5-9ba1-f45a8fd8fa2f',
7 created_time: '2025-04-16T07:33:00.000Z',
8 last_edited_time: '2025-04-16T07:33:00.000Z',
9 created_by: [Object],
10 last_edited_by: [Object],
11 cover: null,
12 icon: null,
13 parent: [Object],
14 archived: false,
15 in_trash: false,
16 properties: [Object],
17 url: 'https://www.notion.so/uuid-blar-blar',
18 public_url: null
19 },
20 // ... 더 많은 결과
21 ]
22}문제는 created_by, last_edited_by, parent, properties와 같은 중요한 필드들이 모두 [Object]로만 표시되어 내부 데이터를 확인할 수 없다는 점이었습니다. 이런 정보는 개발에 반드시 필요한 부분이었죠.
해결 방법: 효과적인 디버깅 기법
1. console.dir 사용하기
가장 먼저 시도한 방법은 console.log 대신 console.dir을 사용하는 것이었습니다:
1console.dir(notionData, { depth: null });depth: null 옵션을 추가하면 객체의 모든 중첩 레벨을 표시해줍니다. 이 방법으로 대부분의 경우 충분히 데이터를 확인할 수 있었습니다.
2. JSON.stringify 활용하기
더 명확하게 보고 싶을 때는 JSON.stringify를 사용했습니다:
1console.log(JSON.stringify(notionData, null, 2));두 번째 파라미터는 replacer 함수인데 null로 설정하고, 세 번째 파라미터인 2는 들여쓰기 공백 수를 의미합니다. 이렇게 하면 보기 좋게 포맷팅된 전체 객체 내용을 확인할 수 있었죠.
3. 디버깅용 커스텀 함수 만들기
반복적인 작업을 줄이기 위해 디버깅용 함수를 만들어 사용했습니다:
1const debug = (obj, label = 'Debug') => {
2 console.log(`\n=== ${label} ===`);
3 console.log(JSON.stringify(obj, null, 2));
4 console.log('================\n');
5};
6
7// 사용 예시
8debug(notionData, 'Notion API Response');이 함수는 객체와 라벨을 받아서 구분하기 쉽게 로그를 출력해줍니다.
4. Chrome DevTools의 Network 탭 활용하기
브라우저에서는 Chrome DevTools의 Network 탭을 통해 API 응답을 원본 그대로 확인할 수 있었습니다:
- 브라우저에서 F12를 눌러 개발자 도구를 열기
- Network 탭으로 이동
- API 요청을 클릭하고 Response 탭에서 전체 응답 확인
이 방법은 특히 API의 실제 응답 구조를 이해하는 데 큰 도움이 되었습니다.
5. VS Code 디버거 사용하기
더 복잡한 디버깅이 필요할 때는 VS Code의 디버거를 활용했습니다:
.vscode/launch.json파일 생성:
1{
2 "version": "0.2.0",
3 "configurations": [
4 {
5 "name": "Next.js: debug server-side",
6 "type": "node-terminal",
7 "request": "launch",
8 "command": "npm run dev"
9 }
10 ]
11}- 코드에 중단점 설정
- F5를 눌러 디버거 시작
이렇게 하면 실행이 중단점에서 멈추고, 변수 패널에서 모든 객체의 구조를 자세히 탐색할 수 있었습니다.
적용 결과: 완전한 객체 구조 확인
위 방법들을 적용한 결과, Notion API 응답의 완전한 구조를 확인할 수 있었습니다. 특히 properties 객체 내부의 필드들과 각 필드의 타입, 값 등을 명확히 파악할 수 있었죠.
장단점 분석
🟢 장점
- 코드 수정 없이 기존 로그를 더 자세히 확인 가능
- 필요에 따라 다양한 디버깅 방법을 선택적으로 활용할 수 있음
- 복잡한 중첩 객체도 쉽게 탐색 가능
🟡 취향
- console.dir vs JSON.stringify는 상황에 따라 선택할 수 있음
- 디버거 사용은 설정이 필요하지만 한 번 익숙해지면 편리함
🔴 단점
- 큰 객체의 경우 출력이 너무 방대해질 수 있음
- 프로덕션 환경에서는 디버깅 코드 제거 필요
활용 팁
제가 이 방법들을 적용하게 된 이유는 Notion API의 복잡한 응답 구조 때문이었어요. 이전에는 단순히 console.log만 사용했는데, 그와 비교하면 훨씬 효율적으로 디버깅할 수 있었습니다.
특히 다음과 같은 경우에 유용하게 사용할 수 있습니다:
- 복잡한 외부 API 응답 구조 파악할 때
- 타입스크립트로 타입 정의해야 할 때 실제 데이터 구조 확인
- 중첩된 객체에서 특정 값을 찾아야 할 때
마무리
개발하다 보면 로그만으로는 충분한 정보를 얻기 어려울 때가 있습니다. 특히 [Object]로만 표시되는 경우처럼요. 하지만 적절한 디버깅 도구와 방법을 알고 있다면 훨씬 수월하게 문제를 해결할 수 있습니다.
이 글이 Notion API나 다른 복잡한 객체를 다루는 개발자분들께 작은 도움이 되었으면 좋겠습니다. 디버깅이 어렵게 느껴지더라도, 적절한 도구를 활용하면 생각보다 쉽게 해결할 수 있답니다! 🙌