First Step

디버깅 Debugging

Debugging

Underbar(Underscore.js 라이브러리)를 진행하면서 디버깅(debugging)을 학습합시다. 디버깅은 프로그래밍을 하는데 있어서 굉장히 중요한 스킬입니다. 디버깅을 프로그램이 동작하지 않을 때 문제를 해결하는 일을 말합니다. 조금 더 쉽게 말하면 문제발견문제해결을 의미합니다. 디버깅을 통해 현재 발생한 문제를 해결할 수 있고, 미래에 나타날지도 모르는 문제를 사전에 발견하고 해결이 가능합니다. 디버깅은 완성도가 높은 결과물을 위해 프로그래밍 개발 과정은 물론, 완성된 이후에도 지속해서 해야하는 과정입니다.

모든 Modern브라우저는 디버거(debugger) 기능을 가지고 있는데, 디버거는 쉽게 디버깅을 할 수 있게 도와주는 도구입니다. 디버거를 통해 편리하게 디버깅 작업을 할 수 있습니다. 또한 우리가 사용하는 코드에디터를 통해서도 디버깅이 가능합니다. 디버거를 사용하지 않더라도 자바스크립트에서는 우리가 흔히 사용하는 console.log를 통해 디버깅 작업을 할 수 있습니다. 디버깅 방법은 여러가지 입니다. 모든 상황에 맞는 만병통치약같은 디버깅은 없으며, 사용하는 프로그래밍 언어와 디버깅을 해야하는 상황에 따라 적절한 디버깅 방법을 사용하는 것이 중요합니다. 본 과정을 통해 디버깅의 개념을 알고, 디버깅(특히 자바스크립트의 디버깅)에 익숙해지도록 합시다!

Error의 종류

자바스크립트에서 Error는 구문(Syntax)에러, 논리(Logic)에러 크게 2종류가 있습니다. 구문에러는 구문에러라는 말보다 Syntax Error라고 영어를 그대로 사용합니다. 코드 상에 문법적인 문제로 프로그램 작동이 안되거나 작동 중간에 프로그램이 중지됩니다. SyntaxError가 발생하면 Uncaught SyntaxError : Unexpected token ..., *Uncaught TypeError: Cannot read ...*같은 SyntaxError가 들어간 문장의 오류메세지를 확인할 수 있습니다. 에러메세지의 의미만 파악이 가능하다면 쉽게 수정할 수 있습니다. 논리에러는 문법상 문제는 없지만 코드의 의미, 논리자체가 잘못된 경우 나타나는 에러입니다. 즉, 프로그램은 정상적으로 실행되지만 원하는 결과가 나오지 않은 경우를 말합니다. 구문에러처럼 에러 메세지가 직접적으로 표시되지 않기 때문에 어느부분이 틀렸는지 스스로 찾아야 합니다. 때문에 논리문제 해결을 위해서는 디버깅이 필수적입니다. 디버깅으 통해 논리문제의 오류를 찾아낼 수 있습니다. (출처: MDN)

로그(Log)

Log의 사전적으로 '기록'이라는 의미를 가지고 있습니다. 프로그래밍 언어에도 log라는 기능이 있는데, 프로그램의 특정 위치에서 출력된 정보를 담고 있습니다. 때문에 프로그래밍 중간중간에 Log를 출력하는 코드를 작성해 놓으면, 특정 위치에서 프로그램이 어떻게 작동하고 있는지 확인이 가능하고, 문제해결에도 유용하게 사용할 수 있습니다. 자바스크립트에서는 console.log를 통해 로그를 확인할 수 있습니다. console.log를 사용해서 출력되는 값을 확인해서 문제를 파악하고, 문제를 해결할 수 있습니다. 예를들어 프로그램을 실행했는데 로그 메세지가 나타나지 않으면 나머지 코드들이 실행되지 않았다는 것을 알 수 있습니다. 또한 프로그램이 실행 중일 때 특정 상황에 있는 변수의 값을 출력해 확인할 수 있습니다. 이를 통해 문제에 대한 단서를 찾아낼 수 있고, 문제를 해결할 수 있습니다.(출처: 다시시작하는 프로그래밍)

debugger

프로그래밍 코드 내부에 debugger문을 사용해서 프로그램 실행을 일시 중단할 수 있습니다. debugger문을 사용해 코드내에 중단점을 설정하고, 중단한 시점에서 코드가 어떤 흐름으로 진행되는지 차근차근 확인이 가능합니다.

debugger




Discover DevTools, Chapters 1-5

Debugging JavaScript