Node.js로 스티밋에서 할 수 있는 것(2): 디버깅 방법 및 excel로 활용하기

in #kr8 years ago (edited)

본격적인 개발에 앞서 visual studio를 이용하여 debug하는 방법 및 기본적인 몇가지에 대하여 알아보자.

사실 개발의 70% 이상은 디버깅 시간이다. 디버깅을 효과적으로 하면 개발시간을 획기적으로 줄일 수 있다. 특히 steem.js는 문서화가 거의 되어 있지 않기 때문에 함수에서 전달해 주는 값을 알기 위해서는 디버깅이 필수이다.

1. 중간점 설정

코드 중 실행 중 변수의 값을 알고 싶은 경우가 있다. 고전적인 방법은 print 문을 중간 중간에 넣어서 확인하는 것인데, 이렇게 되면 너무 많은 정보가 출력되기 때문에 효과적인 디버깅을 할 수 없다. 가장 쉬운 방법은 궁금한 부분에서 실행을 잠시 멈추게 하고, 궁금한 변수의 값을 직접 보는 것이다.

중간점을 설정하는 방법은 간단하다. 궁금한 코드가 있는 줄을 선택한 후 "디버그/중단점 설정/해제"를 선택하면 된다. 중간점을 설정하면 줄 왼쪽에 빨간 점이 나타난다. 코드가 실행되다가 빨간 점이 있는 곳에서 멈춘다. 단축키는 F9이다.
image.png

2. 변수 값 보기

중간점을 설정한 지점에서 멈추게 되면 아래 쪽에 보면 볼 수 있는 변수들이 보인다.
image.png

getDiscussionsByAuthorBeforeDate 함수의 return 값인 post에 대하여 보자.
post를 클릭해 보면 아래와 같은 변수 상태가 보인다.
image.png

10개의 글이 있으며, 각각에 대해서는 또 클릭해서 봐야 한다.
post를 클릭해보면 상당히 많은 변수가 나온다. 여기에서 본인이 필요한 정보를 찾아서 왼쪽에 있는 이름으로 해당 데이터를 접근하면 된다.
image.png

예를들어 아래 글 중 본문을 출력하고 싶으면 아래와 같이 작성하면 된다.
console.log(post[0].body)

매번 이렇게 하면 시간이 많이 걸리므로, 함수를 하나 이용할 때 마다 돌려주는 값들을 복사하여 excel 파일에 저장해 놓으면 향후 작업할 때 시간을 많이 절약할 수 있다.

3. 반환 값의 형식 보기

post[0]의 값을 보면 어떤 변수는 number이고, 어떤 변수는 string이다. 이것을 참고하여 원하는 형태로 변환해서 사용해야 한다.
image.png

pending_payout_value를 보면 숫자이어야 하지만 표기는 string으로 되어있다. 숫자 뒤에 SBD라는 문자열도 포함되어 있다. 앞으로 이렇게 문자열로 표기된 숫자들을 숫자로 변경해야하는 경우가 많이 나온다. 이를 위하여 형 변환에 대하여 정리하고 넘어간다.

string을 실수로

pending_payout_value에는 아래와 같은 형태의 문자열이 들어가 있다.
image.png

계산에 필요한 것은 공백 앞에 있는 숫자이므로 앞에서 배운 split이라는 함수를 이용한다.
pending_payout_value.split(' ')

이렇게 되면 아래와 같이 두 문자열로 나뉘어진다.
pending_payout_value[0] -> "23.723"
pending_payout_value[1] -> "SBD"

문자열을 실수(float)로 바꾸는 방법은 parseFloat() 를 이용하면 된다.
즉 post[0]에 들어있던 voting 값을 실수로 변환하는 방법은 아래와 같다.
parseFloat(pending_payout_value .split(' '))

split다음에 [0]을 붙이지 않았는지 궁금할 수 있는데, 0번째는 그냥 사용하여도 된다.
즉 아래 두 문장은 같은 값을 돌려준다.
parseFloat(pending_payout_value .split(' '))
parseFloat(pending_payout_value .split(' ')[0])

string을 정수로
parseInt()를 사용하면 된다.

4. 출력 결과를 엑셀에서 활용하기

우선 출력결과를 copy하기 위해서는 ConEmu (x64)를 설치해야 한다. 윈도우의 기본 프로그램인 command를 대체할 수 있는 좋은 프로그램이다.
아래 사이트에서 다운 받아서 설치하면 된다.
https://conemu.github.io/

엑셀에서 결과를 활용하기 위해서는 출력물에 구분자가 필요하다. 예제에는 ";"을 구분자로 사용한다. ConEmu에서 아래와 같이 실행하면 결과가 화면에 보인다.

node postList.js

image.png

화면과 같이 원하는 부분을 선택하여 복사한 후 excel에서 붙여넣기를 하면 아래와 같이 한 컬럼에 한 줄씩 데이터가 들어간다.
image.png

그 후 변환할 데이터를 선택한 후 "데이터/텍스트 나누기"를 선택한 후 "구분기호로 분리됨" 선택한 후 "다음"을 누른다.
image.png

구분기호 중 세미콜론을 선택하면 아래와 같이 구분자가 잘 적용되어 나온다.
image.png

구분자를 적용한 결과이다.
image.png

모든 것을 프로그램으로 코딩하면 좋겠지만 excel로 할 수 있는 것은 excel로 하는 것이 가장 빠르게 일을 처리할 수 있는 방법이다.


개발을 하다보면 동일한 행동을 무수히 많이 반복을 하게 된다. 예를들어 디버깅 시작하기, 멈추기, 중간점 설정하기, 다음 문장 실행하기 등등. 그때 마다 마우스 잡고, 메뉴들어가서 고르고 하면 시간이 많이 걸린다. 이런 경우에는 Hot Key를 암기하면 빠르게 작업을 진행할 수 있다.

최소한 아래 핫키를 기억하면 개발 시간을 많이 줄일 수 있다.
F5 : 디버깅 시작, 계속 실행
F9 : 중간점 설정하기/해제하기
F10 : 멈춘 상태에서 한 문장씩 실행하기
Alt^D E : 디버깅 멈추기


이전 글 보기

Node.js로 ... 원하는 작가들의 최신 글 리스트 받기

Sort:  

지난 번 올려주신 것도 따라하다가 어려워서 중간에 못하겠던데, 오늘은 더 난해한 것 같아요. ㅠㅠ

헉.. 쉽게 쓴다고 썼는데, 어려우시군요. 직접 개발할 필요없이 예제 프로그램에서 작가만 바꾸고 돌려도 됩니다.

감사합니다. 저한테 정말 많은 도움이 될것같습니다.
설명을 굉장히 잘해주셔서 잘 따라할수 있을것 같습니다.

감사합니다. 헷갈리거나 어려운 부분이 있으면 질문해 주세요.

오호라~ 비쥬얼 스튜디오에 node.js를 물리니 디버깅이 킹왕 편해지는군요. kr-dev 태그도 추가해주세여~~ :D

태그 달았어요.

좋은 정보 감사합니다~
열심히 공부 해보겠습니다~

Coin Marketplace

STEEM 0.04
TRX 0.33
JST 0.083
BTC 64356.29
ETH 1736.31
USDT 1.00
SBD 0.42