웹에플리케이션 만들기 – JS, PHP 프로그래밍 5 : 디버깅

이번 시간에는 디버그라는 이야기를 진행을 할 건데요 버그라는 것은 프로그램이 오동작하는 것을 버그라고 합니다

그래서 오동작되는 현상을 해결하는 행위를 디버그라고 부르는데요 디버그하는 방법에 대한 얘기라기보다는 여러분들이 오류가 발생됐을 때 어디에서 오류가 생겼는지를 찾는 방법을 알고 계셔야지 실습을 하는 과정에서 문제가 생겼을 때 도움을 요청할 수 있게 되는 것이기 때문에 디버그수업을 여기쯤에서 넣습니다 새로운 파일을 하나 만들죠 new File 3

PHP 이고요 파일의 내용은 탬플릿을 이렇게 적용을 했고요 잘 따라오셨나요? 여기서부터 시작하겠습니다 우선 자바스크립트부터요

<script></script> 여기에다가 화면에 어떤 정보를 표현할 때 출력할 때 사용하는 documentwrite("hello world") 이런 코드를 여러분이 작성하고 싶었는데 여기에다가 오타를 낸 거에요 원래 여기가 m이어야 하는데 e를 넣어버린거죠? 그럼 이 상태에서 실행을 해보면 아무것도 되지 않습니다 이런 문제를 찾는 거는 대단히 어려운 일이에요 그럴 때는 이 웹브라우저의 도움을 받으시면 됩니다

여기에서 여기 메뉴를 선택하시고 저는 크롬 기준으로 설명을 드립니다 여기에서 도구 더보기를 들어가시면 자바스크립트 콘솔이라는 것이 있어요 얘를 클릭해보세요

그럼 화면이 이렇게 분할되면서 여기에 빨간색으로 강조표시 되는 거 보이시죠? 에러가 있다는 얘기입니다 여기에 docueent는 정의되어 있지 않은 키워드다 라는 뜻이에요 그리고 3PHP 파일에 여덟 번째 행에서 발생한 에러라는 뜻입니다 그러면 여기 여덟 번째 행은

얘거든요? 그리고 여기 있는 doucueent가 정의되어 있지 않는다는 얘기는 쟤가 뭔가 의심스럽다는 것을 우리한테 알려주는 겁니다 그럼 의심하시고 이렇게 m으로 수정하시면 이런 문제를 해결할 수 있게 되죠 그렇죠? 그럼 PHP에서 여러분이 이렇게 PHP코드를 작성하는데 지금보시는 것처럼 닫기를 안한 거에요

이렇게 닫기를 해야 되잖아요? 닫으면 이렇게 잘 되는데 닫기를 안하면 아예 아무것도 출력이 안 됩니다 코드가 몇 개 없으면 그나마 찾을 만한데 코드가 길어진 상태에서 찾으려면 굉장히 어려워져요 그런 경우는 어떻게 하면 되냐면

여기서 오픈 파일을 하셔서 winampstack > apache2 > logs라는 디렉토리가 있습니다 저 디렉토리에 errorlog라는 파일을 열어보세요 그럼 이렇게 긴 내용이 나옵니다

그러면 이 내용 중에서 제일 밑으로 내려가 보시면 가장 최근에 추가된 에러메시지가 제일 밑에 나옵니다 이 에러에 보시면 에러를 같이 보시죠 제일 끝에 있는 에러가 발생했다고 나오는 것이고요 그리고 syntax는 문법에러라는 뜻이에요

문법상에 에러가 있으며 '<'라는 기호가 기대되는데 이 위치에 있는 이 경로에 있는 3PHP에 11번째 라인에서 ‘<’ 기호가 있어야 하는데 없다 라는 에러에요 우리에게 도움을 주기 위한 정보죠 얘를 클릭해보면 11번째라인

즉 여기에 이 라인에 뭔가 꺽세가 닫히는기호가 없다 라는 그런 뜻이겠죠? 정확하게는 여기에 있는 얘가 기대하지 않은 뭐랄까요? 기호가 나왔다 라는 뜻이겠죠? 그래서 여기에다가 이렇게 추가를 해주면 에러가 해결이 됩니다 한번 보죠? 에러가 해결되어서 잘 출력되는 것을 볼 수가 있죠 이렇게 해서 에러를 찾는 방법에 대해서 살펴봤고요 좀 더 자세한 디버깅 방법론은 여기서는 우리 수업의 범위를 넘어 섭니다

아무튼 문제가 생기면 방금 보셨던 그런 방법들을 통해서 해결하시면 되고요 또 누군가에게 저런 문제에 대해서 질문할 때는 꼭 저런 로그같은 것들을 여러분들이 에러메시지를 확인하고 그것을 바탕으로 해서 질문을 하셔야지 문제를 해결할 수가 있습니다