nestjs

VS Code에서 NestJS 디버깅

1. 왜 디버깅이 중요한가?

많은 주니어 개발자들은 서버 코드의 문제를 찾기 위해 console.log()를 추가한 후 서버를 재시작하는 방식으로 디버깅을 수행합니다. 하지만 이 방법은 코드 수정 후 서버를 매번 재시작해야 하므로, 비효율적이며 시간이 오래 걸릴 수 있습니다.

이 문제를 해결하기 위해 VS Code의 디버깅 기능을 활용하면, 코드 실행 중에 변수를 실시간으로 확인하고, 중단점(Breakpoint)을 설정하여 코드 흐름을 추적할 수 있습니다.

이번 글에서는 NestJS 프로젝트에서 VS Code를 활용한 디버깅 환경을 설정하는 방법을 설명하겠습니다.

2. VS Code에서 디버깅 환경 설정하기

2-1. VS Code의 디버깅 탭 설정

1. VS Code에서 "디버깅(Debug)" 아이콘(🐞 벌레 아이콘)을 클릭합니다.
2. "create a launch.json file"을 선택합니다.
3. Node.js 환경을 선택합니다. (꼭 Node.js를 선택하지 않아도 됩니다.)
4. 생성된 .vscode/launch.json 파일을 열어, 기존 내용을 삭제한 후 아래 설정을 추가합니다.

3. launch.json 설정

아래 설정을 .vscode/launch.json 파일에 추가합니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Hanpy Framework",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "start:debug", "--inspect-brk"],
      "autoAttachChildProcesses": true,
      "restart": true,
      "sourceMaps": true,
      "stopOnEntry": false,
      "console": "integratedTerminal"
    }
  ]
}

4. 설정 파일 설명

• runtimeExecutable: 실행할 패키지 매니저 지정 (예: "npm").
  • npm 외에도 pnpm 또는 yarn으로 변경할 수 있습니다.
• runtimeArgs: 실행할 명령어 추가
  • "run", "start:debug", "--", "--inspect-brk"
  • "start:debug"는 package.json에서 정의된 스크립트를 실행하는 부분입니다.
• autoAttachChildProcesses: 하위 프로세스도 자동으로 디버깅할 수 있도록 설정
• restart: 코드 변경 시 자동으로 디버깅 세션 재시작
• sourceMaps: TypeScript 코드 디버깅 지원
• console: 터미널에서 실행 (integratedTerminal)

5. 실행 방법

1. 디버깅 탭에서 설정한 디버그 실행 환경 선택

• 디버깅 탭에서 "Debug Nest Framework"를 선택합니다.

2. 디버그 실행 버튼(▶️) 클릭

• 설정한 Node.js 디버깅 환경이 실행됩니다.

3. 브레이크포인트 설정

• 디버깅 중 확인하고 싶은 코드 줄에 빨간 점(🔴) 을 찍어 브레이크포인트(Breakpoint)를 설정합니다.

4. 변수 확인

• 브레이크포인트에서 코드가 멈추면, VS Code에서 실행 중인 변수 값을 실시간으로 확인할 수 있습니다.

6. 브레이크포인트를 활용한 디버깅

브레이크포인트(Breakpoint)란?

브레이크포인트는 특정 코드 줄에서 실행을 일시 중지하여 현재 변수 값과 코드 흐름을 분석할 수 있도록 돕는 기능입니다.

브레이크포인트 설정 방법

디버깅할 코드 줄 왼쪽의 번호 영역을 클릭하면 빨간 점(🔴)이 생깁니다. 디버그 모드를 실행하면 해당 줄에서 코드가 멈추고, 현재 변수 값과 실행 흐름을 확인할 수 있습니다.

변수 값 확인 방법

디버깅이 멈춘 상태에서 VS Code의 "변수(Variables)" 패널을 보면, 현재 실행 중인 코드의 변수 값을 확인할 수 있습니다.

7. package.json의 start:debug 스크립트 설정

launch.json의 "start:debug"가 실행될 때, package.json에 해당 스크립트가 정의되어 있어야 합니다.

"scripts": {
  "start:debug": "node --inspect-brk dist/main.js"
}

위와 같이 설정하면 pnpm run start:debug를 실행할 때, Node.js 디버거가 활성화된 상태로 서버가 실행됩니다.

8. 디버깅 시 주요 단축키

• F5 ➡️ 디버그 실행 / 재시작
• F10 ➡️ 현재 코드 줄을 실행하고 다음 줄로 이동 (Step Over)
• F11 ➡️ 현재 코드 줄 내부로 들어가서 실행 (Step Into)
• Shift + F11 ➡️ 함수 실행이 끝난 후 호출한 곳으로 복귀 (Step Out)
• Ctrl + Shift + D ➡️ 디버깅 패널 열기

9. 결론

VS Code에서 NestJS 프로젝트를 디버깅할 때 console.log()를 남발하는 대신, 브레이크포인트를 활용한 디버깅 환경을 구축하면 훨씬 효율적으로 문제를 분석할 수 있습니다. launch.json을 설정하여 디버깅 환경을 구성하고, npm run start:debug 스크립트를 통해 서버를 실행하며, VS Code에서 브레이크포인트와 변수 확인 기능을 적극 활용하면, 서버 재시작 없이 즉시 디버깅할 수 있습니다.

참고

• https://go.microsoft.com/fwlink/?linkid=830387