프로그래밍/Node.js + Vue.js

떨어지는 용 2020. 7. 1. 15:37

▶Node.js + Vue.js Visual Studio Code 디버그 모드

▶설명

Node.js 개발을 진행하면서 디버그 모드를 사용하지 않는다면, 많은 불편이 있을 수 있습니다.

Visual Studio Code에서 제공하는 디버그 모드를 설정하여, 개발 편의성을 올리도록 하겠습니다.

아래의 내용은 Visual Studio Code에서 디버그 모드를 사용한 경험을 기반으로 작성한 것입니다.

다른 분들은 더 많은 기능을 아실 거로 생각하지만, 제가 아는 내용만 간단히 작성하도록 하겠습니다.

이제 개발을 위해 백엔드 프로젝트를 Visual Studio Code 디버그 모드로 실행하는 방법을 알아보겠습니다.

우선 터미널에서 [Ctrl + C] 단축키로 백엔드 프로젝트가 실행되어 있으면 종료시킵니다. (디버그 모드로 실행할 때, 충돌이 발생하지 않도록 하기 위해서입니다.)

1.[F5] 키를 누르고, Select Enviroment에서 Node.js를 선택합니다.

2. 또는 좌측에 Run 버튼을 클릭한 후에, create a launch.json file을 클릭 후 Select Enviroment에서 Node.js를 선택합니다.

3. 생성된 launch.json에 내용 중 program 부분을 아래와 같이 수정합니다.

...
"program": "${workspaceFolder}\\backend\\bin\\www"
...

4. [F5] 키를 눌러 디버그 모드를 실행합니다.

5. 또는 좌측에 Run 버튼을 클릭한 후에, Start Debugging 버튼을 클릭하여 디버그 모드를 실행합니다.

6. 실행 확인

http://localhost:3000 으로 접속하여 위에처럼 표시되면 성공입니다.

이제 Visual Studio Code에서 디버그 모드를 사용할 수 있게 되었습니다.

백엔드 프로젝트에서 작업을 진행하면서 브레이크 포인트 등으로 디버그에 큰 도움이 될 것입니다.

[참고] launch.json 파일 위치는 root 폴더에서 .vscode 아래에 생성됩니다.

※ [Shift + F5] 단축키로 디버그 모드를 종료할 수 있습니다.

대부분 디버그 단축키는 비슷하지만, 모르는 분도 있을 수 있어서 작성합니다.

테스트 코드를 작성하고 브레이크 포인트를 설정하여 디버그하는 방법을 알아보도록 하겠습니다.

Express 기본 인덱스 페이지에 테스트 코드를 입력하고, 브레이크 포인트를 설정하도록 하겠습니다.

1. backend/routes/index.js 파일에 테스트 코드 입력하고 저장

...
const data = 1;
console.log("data : ", data);
...

2. 변수 선언 줄에 커서를 위치하고 [F9] 키를 눌러, 좌측 줄 번호에 빨간색으로 브레이크 포인트 설정된 것을 확인할 수 있습니다. (단축키가 아닌, 좌측 줄 번호 옆을 클릭하여 브레이크 포인트를 설정할 수도 있습니다.)

3. [F5] 키를 눌러서 backend 프로젝트를 디버그 모드 실행

4. 실행 확인. http://localhost:3000을 접속하면 브레이크 포인트에서 멈춰서 진행되지 않는 것을 알 수 있습니다.

Visual Studio Code를 확인하겠습니다.

(1) 변수를 확인하는 곳입니다. 아직은 data 값이 undefined인 것을 알 수 있습니다.

(2) 코드 어느 부분에서 멈춰있는지 알 수 있습니다.

5. [F10] 키를 눌러서 다음 단계로 진행합니다.

(1) 다음 단계로 진행되면서 변숫값이 변경된 것을 알 수 있습니다.

(2) 현재 단계를 알 수 있습니다.

6. [F5] 키를 누르면 다음 브레이크 포인트로 이동합니다. 다음 브레이크 포인트 없으면 코드가 실행됩니다.

7. 코드가 변경되면 [Ctrl + Shift + F5] 단축키로 재실행 후 진행하시기 바랍니다.

8. 단축키로 설명해 드리고 있지만, 상단 패널에 버튼을 눌러서 사용해도 됩니다.

Visual Studio Code에서 Node.js 작업을 진행할 때, 디버그 모드 사용법을 알아봤습니다.

다음 글에서는 frontend, backend 프로젝트 개발 시에 연동하는 방법을 알아보도록 하겠습니다.