Week 4 · 통합 점검과 디버깅 Day 24 / 42

JS 디버깅 — TypeError를 두려워하지 마라

빨간 오류 메시지는 적이 아니라 안내문입니다

오류는 3종류뿐입니다: TypeError(null 접근) / ReferenceError(미정의 변수) / SyntaxError(문법).
Console의 빨간 줄을 클릭하면 문제가 발생한 정확한 코드 위치로 이동합니다.
JS 오류 1개는 그 아래 코드 전체 실행을 중단시킵니다 — 여러 기능이 동시에 먹통이 되는 이유입니다.

오류 3종 구분하기

존재하지 않는 것(null)의 속성에 접근하려 함. "그 요소를 못 찾았다"는 뜻일 때가 많습니다.

한 번도 선언되지 않은 변수를 사용하려 함. 오타일 확률이 높습니다.

문법 자체가 틀림. 괄호나 중괄호 짝이 안 맞을 때 흔합니다.

Day 7에서 배운 querySelector가 요소를 못 찾으면 null을 반환하고, 그 null에 .classList 같은 속성을 붙이려는 순간 TypeError가 납니다.

1Console 빨간 줄번호를 클릭해 문제 코드로 이동

2그 줄의 querySelector 안 선택자를 확인

3Elements 탭에서 그 클래스가 실제로 존재하는지 확인

script 위치가 원인일 수도 있습니다 — script를 <head>에 두면 <body> 요소가 아직 만들어지기 전에 실행되어 무조건 null이 됩니다. Day 7에서 배운 대로 </body> 위나 defer를 쓰세요.

    const btn = document.querySelector('.toggle-btn');

    console.log('btn:', btn); // null이면 여기서 이미 문제 발견

화면에 표시된 텍스트를 JS로 읽고 싶다면 .textContent를 씁니다. 예) document.querySelector('.title').textContent는 실제로 화면에 그려진 제목 텍스트를 가져옵니다.

TypeError/ReferenceError/SyntaxError를 구분해 설명할 수 있다.

일부러 오타를 내서 TypeError를 발생시키고 Console로 원인을 찾는 연습을 3회 반복했다.

안 될 때 확인하세요 오류 메시지는 무서운 게 아니라 "어디가 문제인지 알려주는 안내문"입니다. 빨간 줄을 그대로 복사해서 검색하거나 AI에게 물어보면 됩니다 — 이 오류를 외울 필요는 전혀 없습니다.

스스로 설명해보기 — querySelector가 null을 반환했는데 그 값에 .classList를 붙이면 왜 TypeError가 나는지 설명할 수 있나요?

TypeError

존재하지 않는 값(주로 null)의 속성에 접근하려 할 때 나는 오류

ReferenceError

선언된 적 없는 변수를 사용하려 할 때 나는 오류

.textContent

요소 안의 텍스트 내용을 JS로 읽어오는 속성