[JavaScript] 에러 해결하는 방법 (구문 오류, 런타임 오류, 논리 오류)

* 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다.

(섹션 2: 50)

 

 

 

 

---

 

 

 

 

에러는 다양하게 발생할 수 있다. 그중에서 가장 대표적인 에러를 해결할 수 있는 방법을 알아보자.

 

 

 

1. 구문 오류

 

IDE에서 잘못된 부분은 빨간 줄로 표시해주기 때문에 바로 해결할 수 있는 오류이다.

 

 

 

 

 

2. 런타임 에러

 

에러 메시지가 뜨는 경우이다. 이 경우는 비교적 쉽게 해결할 수 있는 편이다.

크롬의 개발자 도구 console 창에 뜨는 에러 메시지를 먼저 읽고 어떤 부분으로 인해 에러가 났는지 찾아보면 된다. 하지만 에러 메시지를 이해하지 못하겠거나 어떻게 해결해야 할지 모르겠을 때는 구글링을 통해 해결 방안을 찾아갈 수 있을 것이다.

 

 

 

▼

 

 

 

 

3. 논리 오류

 

논리가 잘못되어 앱 자체는 작동을 하지만 정상적으로 작동하지 않는 경우이다. 이 경우는 에러메시지도 없어 비교적 오류를 찾기 어려운 경우에 해당한다. 하지만 크롬의 개발자 도구를 사용하면 오류의 해결방안에 대한 도움을 얻을 수 있다.

 

 

1) Console.log()를 통해 해결해보기

크롬의 개발자 도구에서 console창에 console.log() 입력을 통해 어떤 부분에서 문제가 발생하였는지 알아내어 오류를 해결할 수 있다.

 

 

2) 중단점을 사용하여 해결해보기

크롬의 개발자 도구에서 sources 창에 중단점을 사용해보면서 어떤 부분에서 문제가 발생하였는지 알아내어 오류를 해결할 수 있다. 중단점을 지정하면 그 줄에 도착하였을 때 코드 실행을 중지하고 실행 중에 코드와 현재 상태를 살펴볼 수 있다.

 

 

※ 중단점에 대한 추가적인 내용

 

• 조건부 중단점 : 중단점을 표시한 줄에서 마우스 우클릭을 해서 Conditional Breakpoint에 표현식을 적어서 조건부 중단점을 추가한다. ex) getUserNumberInput() > 99 -> 99보다 큰 숫자가 입력되면 일시 정지된다.
• 이벤트 리스너 중단점 : Event Listener Breakpoints에서 탐색할 항목을 체크한 후 디버깅을 하면 그 항목이 발생할 경우에만 일시 정지된다.

 

 

 

예시)

 

앱이 작동되고 에러는 없지만 정상적으로 작동하지 않는 경우

 

 

+ 버튼을 눌렀을 때 문제가 있으므로 add() 함수에 console.log()를 통해 출력해본다.

 

 

console.log() 추가

 

결과

 

출력 값을 보면 0은 파란색이므로 숫자로 입력되었지만 2는 검은색으로 문자열로 처리가 된 것을 볼 수 있다. 그래서 enteredNumber가 잘못되었다는 것을 알 수 있고 enterNumber는 getUserNumberInput() 함수가 대입된 것이므로 그 함수를 보면 리턴 값을 숫자로 변환을 시켜주지 않았음을 찾을 수 있게 된다.

 

 

▼