node.js + typescript 디버그 모드 실행하기(웹스톰)

디버그 모드는 왜 쓰는지?

node.js, typescript를 사용하는 웹스톰 프로젝트에서 디버그 모드에 들어가는 방법을 알아본다. 디버그 모드에서 브레이크 포인트를 걸어 코드 진행을 멈출 수 있고, 변수의 값과 같은 정보를 알 수도 있다. 디버그 모드 없이 개발한다면, 특정 변수를 확인하기 위해서 console.log(변수) 같은 코드를 추가해야 할 것이다. 디버그 모드를 이용하면, 이러한 번거로움 없이 코드를 확인할 수 있다.

디버그 모드 적용하기

참고링크: 웹스톰공식문서

전제조건: 프로젝트에 ts-node가 설치되어 있어야 한다.

1. 상단 메뉴의 Run탭에서 Edit Configuration을 선택한다.

웹스톰 화면

2. 새로 나타난 창의 좌측 상단 + 버튼을 누르고 Node.js를 클릭한다.

웹스톰 화면

3. 우측 화면 Configuration탭의 Node parameters에 --require ts-node/register를 추가한다.

웹스톰 화면

Working directory는 package.json이 있는 프로젝트 디렉토리를 선택한다.

Javascript file은 실행할 타입스크립트 파일을 선택한다.

4. 우측 하단의 apply 버튼을 눌러서 적용한다.

5. 상단 메뉴의 Run탭을 누르고 Debug를 누른다.

웹스톰 화면

6. 성공적으로 실행되면, 하단에 디버그 창이 뜨면서 프로그램이 실행된다.

소스 코드를 추가하고 다시 실행하려면 어떻게?

소스 코드를 추가하고 다시 실행하고 싶다면, CTRL + F5를 누르거나 하단 디버그 창의 좌측 상단 버튼을 누른다.

웹스톰 화면

디버그 모드 실행중에  특정 코드를 확인해보고 싶다면(REPL처럼)?

REPL은 코드를 입력하면 읽고 실행해 주는 것을 반복하는 환경을 의미한다. 디버그 모드 중에서도 REPL 같은 환경이 제공된다. 디버그 브레이크를 건 상황에서, 특정 코드를 확인해 보았다. 그리고 하단 창의 Debugger  Console탭을 확인한다.

SELECT 쿼리의 결과가 담긴 post 변수를 확인해보고 싶었다.

그리고 post 변수를 확인해보기 위해 하단에 post를 타이핑했다. 다음은 그 결과이다.

포커스된 라인에 타이핑을 하면 그 결과가 상단에 나타난다.