[Project] 프로젝트 삽질기56 (feat debug)

들어가며

여러분들은 만약 테스트 코드를 작성하지 않고 API를 개발한다면 API가 정상 동작하는지 어떻게 확인하시나요? 아마 서버를 직접 실행한 후, API를 여러 번 호출해 보면서 개발한 API가 정상적으로 동작하는지 확인해야 할 것입니다. 그 과정에서 로직 중간에 console.log 코드를 작성해서 실행하며 동작을 확인하기도 합니다. console.log 코드를 작성해서 디버깅을 하다가 우연히 운영 환경의 서버로 코드가 머지될 경우, 불필요한 로그 출력 코드가 추가되는 문제도 발생할 수 있습니다. 저는 이런 문제를 겪지 않기 위해 서버 개발을 할 때 디버거를 활용합니다. 디버거를 활용하면 console.log 코드로 확인하는 방식 보다 API 동작에 대한 문제를 깊게 파악할 수 있습니다.

 

주변을 둘러보니 의외로 디버거를 활용하지 않는 분들을 많이 볼 수 있었는데요. 디버거를 활용하지 않는 분들에게 작게나마 도움이 되고자VSCode에서 NestJS 코드를 디버깅하는 방법을 공유하기 위해 이 글을 적습니다. 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

디버거

디버깅은 버그를 수정할 때만 사용하는 것이 아니라 예상하는 결과와 실제 동작의 결과와의 차이를 줄이기 위해 필요합니다. API를 개발할 때, 확인하고 싶은 코드가 어떻게 동작하는지, 데이터는 어떻게 변경되는지, 외부 라이브러리는 어떻게 동작하는지 등을 디버거를 통해 확인할 수 있습니다. 

 

그럼 간단하게 디버거를 활용하는 방법에 대해 알아보겠습니다. 

 

 

 

 

 

코드의 동작 방식을 알고 싶은 곳이 있다면, 코드 라인 옆에 브레이크 포인트를 잡습니다. 

 

 

 

 

 

 

그 후 VSCode의 디버깅 탭으로 들어가서, launch.json 파일을 만듭니다. 

 

 

 

 

 

 

그럼 vscode 중앙 상단에 환경을 선택하는 리스트가 나올 텐데, 여기서는 Node.js를 선택합니다. 그럼 아래와 같은 코드가 vscode 디렉터리에 나올 것입니다. 

 

 

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "프로그램 시작",
        "skipFiles": [
          "<node_internals>/**"
        ],
        "progran": "${file}"
      }
    ],
}

 

 

 

위 내용을 저는 아래와 같이 수정했습니다.

 

 

{
  // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
  // 기존 특성에 대한 설명을 보려면 가리킵니다.
  // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Internal Nest Framework",
      "skipFiles": ["<node_internals>/**"],
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "start-debug", "--", "--inspect-brk"],
      "autoAttachChildProcesses": true,
      "restart": true,
      "sourceMaps": true,
      "stopOnEntry": false,
      "console": "integratedTerminal"
    }
  ]
}

 

 

 

위의 runtimeArgs는 아래의 pakcage.json의 스크립트를 실행합니다.

 

 

// package.json
"scripts": {
	"start-debug": "nest start user --debug --watch"
}

 

 

 

작성한 launch.json 파일은 Visual Studio Code에서 NestJS 애플리케이션을 디버깅하기 위한 구성입니다. 여러 옵션들이 있지만, 주요 옵션들에 대한 간단한 설명은 다음과 같습니다.

 

 

1. type: 디버깅을 위해 사용할 디버거 유형을 지정합니다. 여기서는 "node"를 사용하고 있습니다.
2. request: 디버거에게 요청의 종류를 지정합니다. 여기서는 애플리케이션을 시작하고 디버깅 모드로 설정하도록 "launch"를 사용하고 있습니다.
3. name: 디버그 구성의 이름을 지정합니다. 이 이름은 Visual Studio Code에서 디버그 구성을 선택할 때 사용됩니다. 저는 Debug Internal Nest Framework라는 이름으로 디버그 구성 이름을 설정했습니다.
4. skipFiles: 디버깅 중에 무시할 파일 패턴을 지정합니다. <node_internals>/**는 Node.js 내부 파일을 무시하도록 설정합니다.
5. runtimeExecutable: 실행할 런타임(여기서는 npm)을 지정합니다.
6. runtimeArgs: 런타임에 전달할 추가 인수를 지정합니다. 여기서는 npm run start-debug -- --inspect-brk를 사용하여 NestJS 애플리케이션을 디버깅 모드로 시작합니다.
7. autoAttachChildProcesses: 자식 프로세스에 자동으로 디버거를 연결할지 여부를 설정합니다.
8. restart: 코드 변경이 감지되면 자동으로 애플리케이션을 재시작할지 여부를 설정합니다.
9. sourceMaps: 소스 맵을 사용 하여 디버깅하는지 여부를 설정합니다. NestJS 프레임워크의 경우 소스 맵은 TypeScript 코드에서 디버깅할 때 유용합니다.
10. stopOnEntry: 애플리케이션 시작 시 첫 번째 줄에서 중단할지 여부를 설정합니다. 여기서는 false로 설정되어 있어 시작 시 중단하지 않습니다.
11. console: 디버그 콘솔을 어디에 표시할지를 설정합니다. 여기서는 "integratedTerminal"로 설정되어 내장 터미널에서 디버그 콘솔이 표시됩니다.

 

 

 

 

 

위와 같이 옵션을 설정하고 저장하면, 디버거에서 위와 같이 'Debug Internal Nest Framework"라는 옵션이 나오는데, 여기서 실행 버튼을 클릭합니다.

 

 

 

 

 

 

 

그럼 디버그 모드로 서버가 실행되는데요. 이때 위와 같은 실행 버튼이 나옵니다. 만약 브레이크 포인트를 지장 하셨다면, 위의 버튼을 클릭하여 브레이크 포인트로 설정된 코드의 동작 방식을 확인할 수 있습니다. 왼쪽부터 각각의 아이콘이 어떤 역할을 하는지 정리했습니다.

 

 

1. continue: 다음 브레이크 포인트로 진행
2. step over: 브레이크 포인트가 아닌 코드 한 줄 한 줄씩 진행, 다른 함수 안으로는 들어가지 않음
3. step into: 현재 코드줄이 만약 함수와 같이 내부로 진입할 수 있다면 내부로 진입 아니면 다음 줄로 진행
4. step into: 현재 코드줄이 만약 함수와 같이 내부라면 외부로 빠져나옴 아니면 다음 줄로 진행
5. restart: 디버깅 재시작
6. stop: 디버깅 중지

 

 

위의 아이콘을 각각 실행하면 아래처럼, 변수, 조사식, 호출 스택을 확인할 수 있는데요. 각 코드 라인에서 현재 변수는 어떤 값을 갖고 있으며, 수식은 어떤 값을 갖고 있는지를 확인할 수 있습니다. 관련된 예시를 살펴보겠습니다. 

 

 

 

 

 

 

 

브레이크 포인트로 설정된 코드가 실행될 때, 현재 로컬에서는 어떤 변수 값을 갖고 있는지를 확인할 수 있습니다. 변수 창에서는 코드가 한 줄씩 실행되면서 정의되어 있는 변수와 this, 클로저, 전역변수를 확인할 수 있습니다. 여기서 변수의 값을 변경해서 동작도 가능합니다. 그리고 위의 사진에는 없지만, 조사식이라는 부분도 있는데요. 조사식은 코드를 진행하면서 확인하고 싶은 변수나 수식을 입력하면 코드가 진행됨에 따라 해당 변수나 수식에 대한 값을 확인할 수 있습니다.

 

 

 

 

 

 

그리고 호출스택을 보면 호출이 진행되면서 어떤 뎁스로 코드가 호출이 되었는지 확인할 수 있습니다. 

 

 

 

반복문의 브레이크포인트

만약 반복문에서 브레이크 포인트를 설정한 경우, 반복문이 끝날 때까지 디버깅 단계를 확인해야 하기 때문에 번거로울 수 있는데요. 반복문을 설정할 때는 브레이크 포인트에 조건을 걸어서 원할 때만 브레이크 포인트에 걸리도록 할 수 있습니다.

 

 

 

 

 

반복문에 브레이크 포인트를 설정하고, 디버거를 실행합니다. 그 후 브레이크 포인트를 기준으로 우측 클릭을 한 후 중단점 편집을 클릭합니다. 그 후 내가 원하는 조건을 작성하고 enter를 하면 내가 원하는 조건일 때만 브레이크 포인트에 걸리게 됩니다.

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

마치며

앞으로도 팀의 발전을 돕는 개발자가 되기 위해 노력하려 합니다. 팀에 필요한 부분이 무엇일지 고민하면서, 팀에 도움이 된다면, 열심히 공부해서 실무에 적용할 수 있는 개발자가 되기 위해 노력하고 싶습니다. 팀의 성장에 기여할 수 있는 개발자가 되겠습니다. 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

참고 및 출처

Debugging NestJS in VSCode

Debugging NestJS in VS Code

Nestjs: right settings for debugging

nodejs 디버깅 방법

[ 웹 개발 ] NestJs VSCode 디버깅 모드 세팅 하는방법을 알아보자.

NestJS (with Mono Repo) WebStorm으로 디버깅 하기

Debugging and Profiling memory leaks in NodeJS using Chrome

SSR Memory Leak 디버깅하는 방법

Next.js 에서 메모리 누수 확인/수정하기