Debugging Basic : 디버깅 기초 쌓기

INTRO

코딩을 접한 사람이라면 한번 쯤 꼭 들어봤을 만한 단어인 버그, 그리고 디버깅.

나에게도 나름 익숙한 단어이지만, 막상 실제로 버그를 마주치면 어떻게 해결해야 할지 막막하고, 당황스럽기도 했다.

이제는 버그를 마주쳐도 더이상 피하지 않고 해결할 수 있도록 디버깅에 대해서 배우고 정리해 보았다.

What is bug & debugging? [Wikipedia]

버그, 디버깅이라는 용어의 정의와 유래부터 간단히 알아보자.

버그라는 말을 들으면 이런 의문이 생긴다.

bug는 벌레라는 뜻인데, 이게 컴퓨터 프로그래밍에서 왜 쓰이게 되었을까?

그 답을 찾기 위해 1940년으로 거슬러 올라가 보자.

당시 Grace Hopper는 하버드 대학교에서 Mark II 컴퓨터의 relay(계전기)에서 나방이 끼어 작동을 방해하는 것을 발견했다.

Grace Hopper는 이것을 보고 "버그가 있다"라고 했고,

이것을 계기로 bug라는 용어가 널리 사용되어졌다고 한다.

debugging은 바로 이러한 bug를 찾아서 문제를 해결하는 것을 말하는 것이다.

실제 벌레가 컴퓨터 안에 들어가 작동을 방해한 것이 유래라는 게 흥미로웠다.

유튜브로 공부하기

버그와 디버깅의 뜻을 알아보았으니, 이제 본격적으로 이것이 코딩 세계에서는 어떻게 적용되고 어떻게 할 수 있는지 방법을 알아보기 위해 유튜브 영상을 찾아보았다.

https://youtu.be/IwC-BVM2_YQ 코딩의 시작과 끝, 디버깅 | 실력있는 개발자의 필수 무기

많은 영상 중에 나는 엘리님의 영상을 골랐다.

영상의 제목에서 디버깅은 코딩의 시작과 끝이라고 할 정도로, 디버깅이 중요한 것을 알 수 있다.

코드를 잘 짜는 것도 중요하지만 버그는 꼭 마주칠 수밖에 없다고 한다.

피할 수 없는 버그를 어떻게 잡아낼 수 있는지 영상을 통해 알아보자.

1. 디버깅이란?

Debugging : 코드에서 정확하게 어디서 문제가 초래되었는지 범위를 좁혀가면서 버그를 찾아 처리하는 것

프로젝트 개발 단계 또는 이미 배포된 제품에서 문제가 발생할 때, 특정한 이슈나 버그에 직면했을 때 디버깅을 얼마나 정확하게 능숙하게 잘 하느냐로 실력 있는 개발자와 아닌 개발자로 나누어진다.

디버깅에서 가장 중요한 것은 문제를 정의하는 것

디버깅을 할 때는 도구를 잘 활용하는 것도 중요하지만, 가장 중요한 것은 바로 문제를 정의하는 것이다.

문제 정의가 잘 되어야 그에 맞는 적절한 솔루션을 찾을 수 있기 때문이다.

문제를 애매모호하게 정의하거나 문제를 정의하지 않고 무작위로 코드를 수정하면 좋은 결과를 얻기가 힘들고 오히려 더 심각한 문제를 초래할 수도 있다.

디버깅이란

예상하고 원하는 문제나 목표를 정확하게 정의해 놓고

지금 실제로 일어나고 있는 일은 무엇인지, 현재 어떤 순서로 어떻게 버그/이슈가 발생하고 있는지를 파악하고,

현실과 목표 사이의 Gap(차이)을 메꿔 나가는 것.

디버깅은 넓은 범위에서 사용될 수 있다.

디버깅은 비단 오류나 버그를 수정할 때만 사용하는 것은 아니다.

UX/UI, logic/flow, 성능, 비용 등 원하는 것들을 이루기 위해 그 갭을 줄여 나갈 때 사용할 수 있다.

Gap을 줄여 나갈 땐 디버깅 말고도 다양한 방법들이 있다.

• Unit testing
• Integration testing
• Control flow analysis
• Log file analysis / print logs
• interactive debugging (이번 영상으로 배울 것)
• memory dump
• profiling

원하는 것이 무엇인지에 따라서 다양한 방법을 동원해 더 효율적으로 문제를 해결할 수 있다.

2. 디버거 사용법

크롬이나 다른 IDE 등에서도 디버거를 사용할 수 있지만

이 영상에서는 개발자가 많이 쓰는 IDE중 하나인 VS Code의 디버거를 사용하는 방법에 대해서 알려주고 있다.

console.log로 찍어보면서 확인할 수도 있지만 이것은 수동적이다.

Debugger를 사용하면 좀 더 interactive하게 동적으로 값을 변경하고 확인할 수도 있다.

VS Code에서 Run and Debug 탭을 누르면 Debugger를 시작할 수 있다.

의심이 가는 곳, 또는 확인하고 싶은 곳에 breakpoint를 걸어 놓는다.

실행해 보면 설정한 breakpoint에 멈춰 있는 것을 볼 수 있다.

좌측 메뉴 구성

Variables : 지역 변수와 전역 변수에 할당된 값을 알 수 있다.

Watch : 내가 검사하고 싶은 것만 찝어서 관찰할 수 있다.

Call Stack : 함수가 어떤 순서로 실행되었는지 확인할 수 있다.

Loaded Script : 로딩된 모든 스크립트를 알 수 있다.

Breakpoints : 현재 설정된 breakpoint를 알 수 있다. 토글 버튼으로 전부 비활성화 할 수도 있고, 체크버튼으로 일부만 비활성화 할 수도 있다.

조작 버튼

Step over : 한 줄 한 줄씩 확인

Step into : 호출하는 함수 안으로 들어가기

Step out : 더 이상 함수 안을 관찰할 필요가 없어서 함수 밖으로 나감

Restart : 디버거 재시작

Stop : 디버거 중지

Tip! Edit breakpoint

breakpoint에 마우스 우클릭을 하면 'Edit breakpoint'라는 것이 있다.

이것을 클릭해보면 Expression, Hit Count, Log Message라는 것이 또 있다.

이 세 가지를 잘 활용한다면 디버거를 더욱 잘 활용할 수 있다.

특정한 조건일 때만 디버거가 동작할 수 있도록 설정할 수도 있다.

느낀 점

원하는 것이 무엇인지를 명확하게 정의하는 것이 시작이고,

여러 가지 해결책 중 적절한 해결책을 적용해야 하고,

그 해결책을 잘 활용할 수 있다면 원하는 결과에 다가갈 수 있게 된다.

정의가 모호하다면 해결할 수 있는 가능성은 줄어들고, 오히려 일을 그르칠 수도 있다.

이 말이 굉장히 인상깊었다.

디버깅이라는 것은 개발을 할 때 쓰이는 말이지만, 평소에 문제에 부딪쳤을 때에도 이런 식으로 해결할 수도 있겠다는 생각도 해 보았다.

또한 디버깅을 잘 할 수 있도록 많은 수련을 해야겠다고 느꼈다.

아직은 VS Code의 디버거를 사용하는 것이 낯설지만 많이 사용해 보면서 계속 익숙해져야겠다.