삼천포로 빠진 Node debugging 환경세팅
node express 서버로 HTTP 통신을 해서 데이터를 받아와 js로 기능 구현을 하는 연습중이다.
일단 앞선 문장의 표현이 정확한 표현인지도 잘 모르겠을만큼 서버와 클라이언트의 통신 방법과 환경 구성에 대한 이해가 너무나 부족한 상황인 것 같은데, 한꺼번에 여러가지를 하려니 내가 뭘 모르는지도 모르겠는 상황에 이르렀다.
그러던 중 얼마전부터 새삼 중요성을 깨닫고 있는 것이 바로 디버깅이다.
디버깅 방법이야 여러가지가 있겠지만 최근 크롬 브라우저로 뷰를 보면서 작업할 때, 디버깅에 얼마나 익숙하냐의 차이는 기능 구현뿐만 아니라 코딩시간이나 습관에도 영향을 크게 미칠 것만 같은 너낌적인 너낌. 사실 크롬 개발자 도구를 이용한 디버깅에 익숙해지기 시작하면서 작업 자체의 만족도와 흥미가 상당히 올라갔다고 해도 과언이 아니다.
node 환경에서도 평상시엔 vsc에서 F9 혹은 break point를 걸고 F5를 누르면 디버깅 콘솔이 나타나곤 했는데, readline 모듈을 사용할 때는 이게 정상적으로 작동하지를 않았다. 작동하지 않았다기보다는 몰라서 사용을 못한거겠지만…
그 때, 어떤 동료가 분명 nodemon --inspect 라는 걸 알려줘서 어떻게 어떻게 당시 상황만 마무리하고 넘어갔던 기억이 있는데, 역시나 제대로 사용할 줄을 모르니 다시 돌아오게 된다. 조금 억울한 부분이 있다면 과정 시작전 pre-school에서 첫번째로 만난 녀석이 vs-code의 debugging 시스템이 얼마나 훌륭한가에 대한 자랑을 ‘해석’하는 일이었는데 결국 정복하지 못했다. 지금보다도 더 사전 지식이 없었으니 당연한 결과였던 것 같기도 하고…
Node express 통신 환경에서 디버깅을 어떻게 하냐고…
console.log 를 사용하면 된다.
- 여기저기 필요하다고 생각하는 곳마다 열심히
console.log를 찍어 놓으면 거기로 데이터가 들어오고 있는지 어떻게 들어오고 있는지 확인할 수가 있다. - 눈으로 확인을 해야 이해가 더 잘가는 나에게는 아주 유용하고, 유일한 방법인데, 여간 귀찮기도 하고, 시간도 많이 걸린다.
- 아주 효율적이지도 않고, 좋은 습관도 아닌 것 같으니 새로운(?)… 조금 더 정상적인 방법을 찾아내야 했다.
Node 환경에서 debugging을 할 수 있도록 세팅을 해보자!
1. package.json 세팅
1
"debug": "nodemon --inspect ./bin/www"
- 최근에 친하게 지내게 된 녀석인데
npm init으로 만들어 낼 수 있고, npm 프로젝트 내용과dependency가 기록되어 있다. name: 프로젝트 제목(폴더 이름)start:nodemon으로./bin/www를 실행debug: 디버깅은nodemon --inspect를 사용할거임dependencies에 있는 내용은express관련 의존 모듈들이다. 이제보니debug가 있는데 저건 또 어떤건지 알아봐야 될듯하다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"name": "raccoon-shopping-express",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "nodemon ./bin/www",
"debug": "nodemon --inspect ./bin/www"
},
"dependencies": {
"cookie-parser": "~1.4.4",
"cors": "^2.8.5",
"debug": "~2.6.9",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"morgan": "~1.9.1",
"pug": "2.0.0-beta11"
},
"devDependencies": {
"parcel-bundler": "^1.12.4",
"sass": "^1.32.8"
}
}
2. launch.json 세팅
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector",
"program": "${workspaceFolder}/raccoon-shopping-express/app.js"
}
]
}
F5나Ctrl + Shift + D를 눌러서 디버깅 탭에 가면create configuration을 해야한다고 나오는데, 나는 사실 이게 뭔지도 모르겠고, 겁나서 별로 보고 싶지가 않았다.- 대충 관련된 메뉴가 있어서 누르면 자동으로
launch.json이 생성되고, 아니면 그냥 직접 생성해서 세팅을 해도 상관이 없다. nodemon, inspector, path까지 설정- 설정은 요기를 참고했다.
3. debugger (or break on)
1
2
3
4
5
router.get(JSON_DATA.hotDealList.path, function (req, res, next) {
const resFile = require('../serverData/hotDealList.json');
res.json(resFile);
debugger;
});
- 이제 코드에서 확인하고 싶은 곳에
debugger를 걸거나,break on(F9) 하고,- 나는 서버쪽에서
res.json()혹은res.send()등 파일들이 어떻게 들어오는지 확인하고 싶어서 이렇게 해봤다.
- 나는 서버쪽에서
package.json이 있는 곳에서,nodemon --inspect ./bin/www해도 되고, 이미package.json에 등록했으니npm run debug하면
1
2
3
4
5
6
7
8
9
10
> raccoon-shopping-express@0.0.0 debug /mnt/c/Users/Raccoon/Desktop/squad_front/03-shopping/fe-w3-shopping/raccoon-shopping-express
> nodemon --inspect ./bin/www
[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node --inspect ./bin/www`
Debugger listening on ws://127.0.0.1:9229/de7f45ae-2d40-4e3e-9272-6e4fc035030b
For help, see: https://nodejs.org/en/docs/inspector
Debugger listening이라는 메세지가 나온다.
4. Debugger 실행
F5혹은 디버거 탭에서Node:Nodemon으로RUN
port: 9229로node --inspect실행을 하면
- 아래처럼
Debugger attached되면서debug console색깔이 예쁘게 바뀐다. - 여기까지 오면 성공인 것 같다. 이제 이 환경에서 잘 확인만 하면되는데,
express나 서버통신 환경에 대한 이해가 부족해서 조금 더 헤맸다.
5. 이것저것 확인해보기
- 이제서야 내가 확인하고 싶었던걸 확인할 수 있다.
debug console에서resFile확인
잘 들어오고 있다.
- 브라우져에서
response가 있는지 확인(브라우저F5) Network탭도 확인
잘 들어오고 있다.
res.json(resFile)
res.json(resFile.hotDealList)
- Response Header 구경
- 이제보니 어제 그렇게 고생시켰던 cross-orgin 내용도 있고, 여기에 정보들이 다 있었다.
- 이제 이런식으로 node에서 디버깅 할 수 있게 됐다. 기능구현하러 가야지…
알게 된것
- 평상시에 연습용으로 간단히 확인할 때, 콘솔창 따로 떼서 옆에 두고 쓰고 싶다는 생각을 자주 했었는데
chrome://inspect를 크롬 주소창에 입력해도 되고, 요기 녹색NodeJS버튼을 눌러도DevTools창이 뜬다.- 자주 사용할 것 같기도 하고…
- 디버깅 중이라면 디버그 콘솔로도 사용이 가능한 것 같다.
