초보적인 오류와 디버깅

디버깅

• 코드 실행 중에 일어난 오류를 찾아 수정하는 것을 디버깅이라고 한다.
• f12를 눌러 개발자 도구의 console 창을 이용하여 코드 실행 중 일어난 오류와 그 위치를 파악 할 수 있다.
• 기본적으로 어떠한 문제가 발생했는지에 대한 설명과 더불어 파일의 이름과 함께 문제가 되는 줄의 위치까지 표시한다.

기준 코드

<!--html-->
<div id="test">test</div>

//JS
document.getElementById('test').innerHTML = "hello";

• id 값으로 html의 test 요소를 가져와 내용을 수정하는 간단한 코드

초보 때 볼 수 있는 가장 흔한 오류 2가지

document.getElementById('tets').innerHTML = "hello";
//내가 찾고자 하는 id 혹은 class 이름이 오타가 난 경우

• innerHTML을 null 의 속성(property)으로 지정할 수 없다.
• index.html 의 12번째 줄(:12)에서 문제가 발생했다.

• 즉, 내가 선택한 셀렉터가 null이 되었으므로, innerHTML 의 셀렉터 내용에 문제가 있다는 것을 알 수 있다.
• 12번줄에 가서 셀렉터의 내용을 잘 읽어보면 오류를 발견 할 수 있을 것!

document.getElementByid('test').innerHTML = "hello";
//Id 부분에 소문자로 오타가 난 경우

• document.getElementByid 는 함수가 아니다.
• index.html 의 12번째 줄(:12)에서 문제가 발생했다.

• 셀렉터로 사용되는 document.getElementById('id') 는 함수이다.
  (자세히는 일종의 객체에 속한 method)
• 오타가 나면서 document라는 객체에 속한 getElementById 라는 함수를 불러 올 수 없게 되었기 때문에, 이는 함수가 아니라는 오류가 발생함.
• 결국 우리가 객체에 속한 함수를 불러오기 위한 key 값이 틀린 것이므로 오타를 확인하면 오류를 확인할 수 있다!