AI랑 같이하는 코딩

1. 왜 JS가 멈춘 것처럼 보일까

JavaScript가 실행되지 않을 때 가장 답답한 점은 화면만 보면 원인이 전혀 보이지 않는다는 것입니다. 버튼도 보이고 입력창도 있는데, 클릭해도 변화가 없으니 코드 전체가 고장 난 느낌이 들죠. 하지만 대다수 문제는 특정 한 지점에서 스크립트가 끊긴 상태입니다. 즉, 전부 실패한 것이 아니라 한 줄의 에러가 이후 실행을 막는 구조인 경우가 흔합니다.

그래서 중요한 건 "무엇이 안 되나"보다 "어디서 실행이 멈추나"를 찾는 것입니다. 콘솔, 스크립트 로드, DOM 시점, 선택자, 캐시를 순서대로 확인하면 생각보다 빠르게 복구할 수 있습니다. 감으로 고치기보다 체크리스트 기반으로 접근하는 것이 시간을 아끼는 핵심입니다.

2. 가장 먼저 확인할 5가지

아래 다섯 가지는 실제로 오류 빈도가 높은 항목입니다. 이 순서대로 보면 원인 탐색 범위를 빠르게 줄일 수 있습니다.

3. 실제 점검 순서와 복구 방법

1) 콘솔을 먼저 열고 첫 에러만 본다

한 번에 여러 에러가 보여도 당황할 필요 없습니다. 대부분 첫 번째 에러가 연쇄적으로 뒤 에러를 만든 결과입니다. 따라서 첫 에러를 해결한 뒤 새로고침하면 나머지는 자동으로 사라지는 경우가 많습니다. 이 방식이 디버깅 시간을 크게 줄여줍니다.

2) "스크립트가 로드되었는지"를 분리해서 확인한다

코드 로직 이전에 파일이 브라우저에 도착했는지부터 확인하세요. 파일이 로드되지 않으면 어떤 함수도 실행되지 않습니다. 개발자도구 Network 탭에서 JS 파일 상태가 200인지 보고, 404면 파일명 대소문자, 폴더 경로, 확장자 누락을 점검합니다.

3) 이벤트 콜백 첫 줄에 로그를 넣는다

예를 들어 클릭 이벤트라면 콜백 첫 줄에 console.log('click ok')를 넣어 실행 진입 여부를 확인합니다. 로그가 찍히면 이벤트 연결은 정상이고, 이후 비즈니스 로직에서 멈춘 것입니다. 로그가 안 찍히면 선택자나 연결 시점 문제를 우선 해결해야 합니다.

4) 외부 라이브러리 의존 순서를 확인한다

jQuery나 차트 라이브러리처럼 의존성이 있는 경우 로드 순서가 바뀌면 "정의되지 않음" 에러가 발생합니다. 플러그인보다 코어 라이브러리를 먼저 불러오는지, 모듈 번들 환경이면 import 경로가 정확한지 확인하세요.

4. 재발 방지를 위한 개발 습관

작업 속도를 높이는 진짜 비결은 디버깅을 잘하는 습관입니다. 첫째, 기능을 붙일 때마다 "콘솔 에러 0개" 상태를 유지하세요. 둘째, 파일명 변경 시 경로까지 동시에 수정하는 체크리스트를 유지하세요. 셋째, 주요 이벤트 핸들러에는 임시 로그를 넣고 기능 확인 후 제거하는 루틴을 만드세요.

추가로 AI에게 코드 수정을 요청할 때는 "안 돼요" 한 줄보다, 에러 원문과 관련 코드 20~40줄을 함께 전달하는 편이 정확도가 훨씬 높습니다. 결국 문제 해결 속도는 정보 품질에 비례합니다. 증상, 콘솔 메시지, 재현 절차를 묶어 전달하면 해결이 빨라집니다.

5. 자주 묻는 질문