자바스크립트에서 차단된 링크 이동 오류

링크가 있다고 가정해 봅시다:

<a href="">link</a>

변수에 링크를 가져옵니다:

let link = document.querySelector('a');

링크에 클릭 이벤트 핸들러를 바인딩하겠습니다. 이때 페이지 새로고침을 방지하기 위해 링크 이동을 취소하겠습니다:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});

예기치 않은 동작으로부터 완전히 안전해진 것 같습니다. 사실은 그렇지 않습니다. 문제는 구문 오류가 발생하면 자바스크립트 코드가 실행되지 않고, 링크 차단이 작동하지 않아 링크로 이동이 수행된다는 점입니다.

이 경우 코드 실행 결과도, 콘솔의 오류도 보지 못할 것입니다. 페이지가 새로고침되기 때문입니다. 의도적으로 코드에 오류를 만들어서 실제로 확인해 보겠습니다:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // 구문 오류
	event.preventDefault();
});

이러한 문제는 특징적인 징후가 있습니다: 링크를 클릭하는 순간 콘솔을 보면 콘솔에 빨간색 오류가 순간적으로 나타났다가 거의 즉시 사라지는 것을 볼 수 있습니다.

물론 오류 메시지를 읽을 시간은 없습니다. 이는 오류 찾기를 상당히 어렵게 만듭니다. 그러나 교묘한 방법이 있습니다. 링크의 href에 #(해시)를 넣어야 합니다. 이 경우 링크 이동이 발생하지 않고 콘솔에 출력된 오류를 볼 수 있습니다:

<a href="#">link</a>