개발 생산성 도구 기초집LESSON 09

디버거 기초: 로그만으로 찾기 어려운 문제를 추적하기

난이도초급

예상 시간50분

선수지식8강 검색, Node.js 또는 사용하는 언어 Debugger

9강. 디버거 기초: 로그만으로 찾기 어려운 문제를 추적하기

1. 이번 강의에서 해결할 문제

로그를 여러 줄 추가해도 어느 호출에서 값이 잘못됐는지 알기 어렵습니다. 같은 입력에서 실행을 멈추고 변수와 Call Stack을 확인합니다.

2. 학습 목표

3. 핵심 개념

Debugger는 실행 중인 프로그램에 연결해 특정 줄에서 멈추고 변수, 식과 호출 경로를 관찰합니다. VS Code의 Debug 설정은 Workspace의 .vscode/launch.json에 저장할 수 있지만 언어·Debugger마다 type과 속성이 다르므로 공식 설정 문서와 언어 확장 문서를 확인합니다.

4. 단계별 실습

JavaScript · 파일 경로: src/app.js

src/app.js
function calculateScore(baseScore, multiplier) {
  const safeMultiplier = Math.max(0, multiplier);
  return baseScore * safeMultiplier;
}

const result = calculateScore(100, -2);
console.log({result});

JSON · 파일 경로: .vscode/launch.json

.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug productivity lab",
      "program": "${workspaceFolder}/src/app.js",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

PowerShell · 실행 위치: D:\Dev\productivity-lab

node .\src\app.js

예상 결과: { result: 0 }과 같은 결과가 표시됩니다. VS Code Run and Debug에서 safeMultiplier 줄에 Breakpoint를 두고 baseScore, multiplier, Call Stack을 확인합니다. 관리자 권한은 필요하지 않습니다.

5. 도구와 설정이 동작하는 이유

launch.json은 어떤 실행 파일과 소스를 Debugger가 시작할지 재현합니다. Breakpoint에서 프로그램이 멈추면 변수의 현재값과 호출 경로를 코드 변경 없이 관찰할 수 있습니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ