"진즉에 이걸 알았더라면.."
페어 프로그래밍을 제외하더라도 함께 공부하는 수강생이 있다는 건 매우 큰 장점입니다. 특히 아는 것들을 서로 공유하고 하다보면 예상치 못한 꿀팁들을 얻어갈 때가 많은데요. 오늘은 그렇게 얻게 된 debugger 라는 것에 대해 적어보려고 합니다.
debugger 를 삽입하게 되면 디버깅을 할 수 있게 됩니다. 디버깅은 작성한 코드에 문제가 있는지를 찾아보는 과정이라고 할 수 있는데요. 공식 문서에서는 함수에 삽입해 디버그 기능을 호출하는 방법을 설명하고 있죠. 근데 생각보다 debugger mdn 문서에는 별다른 정보가 없습니다.
대신 개발을 하면서 늘 가까이하게 되는 크롬 개발자 도구(Chrome DevTools) 와 관련한 정보에서 조금 더 자세한 것들을 알 수 있습니다. 다음의 링크를 따라가시면 유튜브 영상으로 준비된 튜토리얼을 시작으로 크롬 개발자 도구에서 디버깅하는 방법에 대한 상세한 설명을 만나보실 수 있습니다.
크롬 개발자 도구는 어떤 코드가 내가 생각한 대로 잘 동작하지 않을 때, 코드가 진행되는 과정을 단계마다 확인해가며 어디에서 잘못 동작하는지를 확인할 수 있게 해주는데요. 맥북 기준으로 command + option + j 를 눌러서 진입할 수 있다고 합니다.
저는 아직 함수를 만드는 정도이기 때문에, 내가 만든 함수가 잘 동작하는지를 보기 위해서 개발자 도구를 종종 사용하는데요. 이 기능을 알기 전에는 매번 현재 변수에는 무엇이 저장되어 있는지, 결과는 어떻게 나오는지, 중간 과정에서 어떻게 변화하는지를 찾아보기 위해 원하는 지점에 console.log 를 삽입해야만 했었습니다.
이 기능을 알기 전에는 불편하더라도 이 방법 밖에 몰라서 다른 접근방법을 고민해보지 못했는데요. 디버그 기능이 있다는 걸 알게 되니 console.log 를 매번 찍어 확인하는 게 얼마나 비효율적이었는지를 돌아보게 되더라구요. 위의 링크를 차근차근 따라가다보면 앞으로의 코딩이 진짜 획기적으로 편해질 거라고 감히 장담해봅니다.
그렇다면 debugger 는 무엇이냐? mdn 공식 문서에서처럼 함수의 가장 첫 줄에 작성해 이를 크롬 개발자 도구에서 돌리게 되면, 함수가 시작되자마자 더 이상 진행하지 않고 디버깅 도구로 전환합니다. 그리고 우리는 한 줄씩, 때로는 코드가 동작하는 한 단위씩 끊어서 현재 상황이 어떻게 진행되는지를 확인할 수 있게 되죠. 코드가 이 단계까지 동작할 때 변수에는 무엇이 담겨져있는지, 결과는 어떻게 출력되는지 세세한 정보를 원하는대로 확인할 수 있습니다.
let a = '1';
let b = '2';
function sum(num1, num2) {
// debugger;
return num1 + num2;
}
sum(a, b); // '12' 라는 결과가 도출위와 같은 함수를 만들었다고 가정해보겠습니다. 숫자를 더해서 그 결과값을 도출해주는 함수인데 문자열이 인자로 들어가 3 이 아닌 '12' 라는 결과를 리턴하고 있죠. 간단한 함수를 그냥 봐도 뭐가 문제인지 알 수 있지만 함수가 복잡해지고 코드가 길어질 수록 문제가 어디에서 발생하는지를 아는 것이 쉽지 않을 겁니다.
이때 위의 debugger; 부분을 주석해제 해서 개발자도구로 돌리면 개발자도구는 debugger 를 만나 멈추게 됩니다. 우리는 여기에서부터 출발해서 차근차근 어디에서 문제가 발생했는지 원인을 분석할 수 있게 되죠.
debugger 를 삽입하지 않아도 원하는 지점을 찾아가 디버깅을 할 수 있지만, 알고리즘을 푼다거나 함수를 짤 때는 debugger 를 삽입해 어떻게 코드가 동작하는지를 살펴보고 공부할 수 있습니다. 내가 짠 코드가 동작하는 과정이 궁금하시다면 꼭 이 기능을 활용해보시기를 바라요!
