보통 버그라고 하면 한마디로 에러, 프로그램이 오작동하는 것이다. 그렇다면 디버깅(Debugging)이란, 이런 버그 즉 오동작되는 현상을 해결하는 것을 말하며 오류들을 찾아내기 위한 테스트 과정을 뜻한다. 카카오톡, 라인 등의 메신저앱에서도 발생하는 버그들을 해결하기 위해 지속적으로 업데이트를 하고 있으며, 게임 앱에서도 원활한 게임진행(?)을 위해 계속 버그를 찾고 프로그램을 수정한다. 이렇게 버그가 없는 프로그램은 거의 없으며 마찬가지로 웹페이지에서도 버그가 발생하기 마련이다.


이번 강의에서는 아주 간단하게 웹페이지에서 고의로 오류를 발생(=버그)시키고, 디버깅을 해보는 과정을 배웠다. 코드 안에서 의도적인 오타를 작성했다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <script charset="utf-8">
    documant.write("hello world");
  </script>
  <?php
  ?>
</body>
</html>
cs


자바스크립트에서는 텍스트 출력을 위한 document.write 명령어가 있다. 위 코드의 여덟번 째 줄의 명령어에 e 를 a 로 고의적인 오타를 작성했다. 원래는 hello world 라는 텍스트가 출력되어야 하지만 명령어에 오류가 있으므로 당연히 출력이 되지 않는데, 크롬에서는 개발자도구의 콘솔에서 오류를 확인할 수 있다.



이렇게 위 스크린샷처럼 친절하게 '3.php'라는 파일의 8번째에 있는 documant라는 명령어는 존재하지 않는다고 알려준다. 그 파일을 찾아 들어가 다시 오류를 수정해주고 새로고침을 하면 텍스트가 잘 출력되는 걸 확인할 수 있다. 여기까지의 과정이 디버깅이다. 어마하게 간단한 예제였지만 프로그램의 오류를 찾아 수정하는 과정 Debugging이었다(너무 단촐...)......

BELATED ARTICLES

more