이벤트핸들러 2

JavaScript 코드가 실행되지 않을 때 가장 먼저 볼 곳

목차1. 왜 JS가 멈춘 것처럼 보일까2. 가장 먼저 확인할 5가지3. 실제 점검 순서와 복구 방법4. 재발 방지를 위한 개발 습관5. 자주 묻는 질문1. 왜 JS가 멈춘 것처럼 보일까JavaScript가 실행되지 않을 때 가장 답답한 점은 화면만 보면 원인이 전혀 보이지 않는다는 것입니다. 버튼도 보이고 입력창도 있는데, 클릭해도 변화가 없으니 코드 전체가 고장 난 느낌이 들죠. 하지만 대다수 문제는 특정 한 지점에서 스크립트가 끊긴 상태입니다. 즉, 전부 실패한 것이 아니라 한 줄의 에러가 이후 실행을 막는 구조인 경우가 흔합니다.그래서 중요한 건 "무엇이 안 되나"보다 "어디서 실행이 멈추나"를 찾는 것입니다. 콘솔, 스크립트 로드, DOM 시점, 선택자, 캐시를 순서대로 확인하면 생각보다 빠르게 ..

버튼을 눌러도 아무 일도 안 일어날 때 확인할 것

목차1. 버튼 클릭이 먹통처럼 보이는 이유2. 가장 먼저 보는 체크리스트3. 실전 점검 순서와 수정 예시4. 다시 같은 문제를 막는 습관5. 자주 묻는 질문1. 버튼 클릭이 먹통처럼 보이는 이유버튼을 눌렀는데 화면이 조용하면 많은 분이 "코드가 전부 망가졌나?"부터 떠올립니다. 하지만 실제로는 작은 연결 문제인 경우가 더 많습니다. 특히 초보 단계에서는 버튼 자체가 고장 난 것이 아니라, 버튼과 JavaScript 함수가 서로 만나지 못한 상태가 대부분입니다.예를 들어 클릭 이벤트를 등록했는데 스크립트 파일 경로가 틀렸거나, HTML에서 사용한 id 이름과 JavaScript에서 찾는 id가 다르면 아무 일도 일어나지 않습니다. 또 콘솔에 에러가 떠도 화면에서는 조용해 보이기 때문에 문제를 늦게 발견하기..