패스트캠퍼스 환급챌린지 17일차 : 코드팩토리의 백엔드 아카데미 : 한 번에 끝내는 NestJS 패키지 - 기초부터 MSA까지 강의 후기
***본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
디버거 세팅 및 사용
디버거란?
디버거는 코드를 한 줄씩 실행해보고, 변수 값 확인, 함수 흐름 추적, 오류 원인 분석 등을 할 수 있게 해주는 강력한 도구입니다.
디버거를 실행하여, .vscode 폴더와 launch.json 파일이 만들어졌다.
이 파일을 수정해보겠다.
"runtimeExecutable": "pnpm",
이거는 뭘로 실행할거냐? pnpm으로 실행할거다" 라는 뜻
pnpm 실행한 뒤, run=> start:debug를 실행할거다" 라는 뜻
packge.json 파일의 scripts 부분 참고
디버거를 사용해보겠다.
브레이크포인트 설정
- 코드 왼쪽 줄 번호 옆 클릭 → 빨간 점이 생기며 "브레이크포인트" 설정됨
- 이 줄에서 코드 실행이 멈춤
디버깅 중에 하는 일들
▶ Continue | 다음 브레이크포인트까지 실행 |
⏩ Step Over | (breakpoint라인에서)다음 라인으로 이동한다. (}도 포함해서 지나간다.) 다음 라인이 함수일 경우 그 함수 내부로는 이동하지 않고 바로 실행한다. |
🔽 Step Into | step over 와 같이 다음 라인으로 이동한다. 다음 라인이 함수 일경우 그 함수 안으로 들어가서 함수내부의 동작 한줄한줄 지나간다. |
⏫ Step Out | 현재 함수의 나머지 부분을 실행시키고 함수의 리턴이 완료된곳에서 멈춘다. step into로 함수로 들어간 뒤 바로 return으로 넘어가고싶을 때 사용하면 유용하다. |
⛔ Stop | 디버깅 종료 |
🔁 Restart | 디버깅 재시작 |
변수/스택 추적 보기
- 왼쪽 패널에 디버깅 중일 때 Variables, Call Stack, Watch, Breakpoints 창이 자동 표시됩니다.
유용한 항목:
- Variables: 현재 범위의 변수와 값 확인
- Call Stack: 현재 함수 호출 순서
- Watch: 특정 변수 값만 계속 추적
debugging을 할 때 watch에 +버튼으로 표현식을 입력하면 breakpoints에서의 값들을 보여준다.
ex)
function fibonacci(n) {
if (n < 2) return n;
const result = fibonacci(n - 1) + fibonacci(n - 2);
return result;
}
ex. id, price * quantity
watch에 result===5 를 추가하면
result===5: false 에서 result===5가 될 때 result===5 : true 로 바뀐다.
원하는 변수값을 표현식에 입력해도 변수 값이 나온다.
CallStack
콜스택은 인터프리터가 중척으로 함수들이 호출될때 to keep track of its place in script 위한 매커니즘이다. 어떤함수가 현재 실행되고있고, 어떤함수 안에서 어떤함수가 호출돼 있는지 추적할 수 있게 해준다.
스크립트에서 함수가 실행되면 함수를 추가하고 끝나면 콜스택에서 제거합니다.
이 콜스택에 할당량보다 초과해서 들어가게 되면 stack overflow error 발생
callstack 확인하기 편리한 console.log
console.log(new Error().stack);




#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완
https://bit.ly/4hTSJNB