2장 에러를 잘 읽는 방법

효율적으로 에러를 읽는 방법, 에러의 구성 요소와 종류

01. 에러의 구성요소를 알아보자

에러를 술술 읽기 위해서는 에러의 구성 요소를 파악하는 것이 중요하다.

에러의 종류
에러 메시지
스택 트레이스

1. 에러의 종류

에러의 종류는 프로그래밍 언어에 따라 다르지만 종류를 파악하는 것으로 에러의 대략적인 내용을 알 수 있다.

ReferenceError : 참조 에러

존재하지 않는 변수 등을 참조하려고 할 때 발생하는 에러(정의 되어 있지 않은 것 참조할 때)
해결 방안 예측 : 변수가 제대로 정의되어 있는지 확인

let message = "즐거운 디버깅";function showMessageO {  
    console.log(mesage); - s가 하나 빠져 있음
}showMessage();

ReferenceError: mesage is not defined

참조 에러: mesage가 정의되어 있지 않음 그 외의 경우에도, 있다

if (true) {  
    const message = "즐거운 디버깅";
}
function showMessage() {  
    console.log(message); ------ 에러의원인
}
showMessage();

스코프scope（유효 범위）는 if 문의 블록（{ ~ } 내부）으로 한정 된다. 이와 같이 변수가 정의되어 있더라도 스코프가 다르면 참조할 수 없으므로 ReferenceError가 발생한다.

스코프는 변수와 함수를 참조할 수 있는 범위

2. ArgumentCountError

함수의 인수(argument)의 수(count)가 잘못된 것을 의미
해결 방안 예측 : 정의된 함수와 해당 함수를 호출하는 부분 확인

3. SyntaxError : 문법 에러

프로그램의 로직에 문제가 있는 것은 아니므로 로직을 확인할 필요는 없다. 따라서 표기 방식에 문제가 있는 부분을 중점으로 찾으면 된다.

코드의 문법이 잘못되었을 때 발생

function add [a, b] {   
    return a + b;
}；

SyntaxError: Unexpected token '['

문법 에러 : 예상하지 못한 토큰 [

4. TypeError : 타입 에러

값이 부적절한 방법으로 사용할 때 발생
예시로 자바스크립트에서 문자열 길이를 확인할 때 사용하는 length 속성을 문자열이 아닌 null에 사용하려고 할 때 해당 에러가 발생

"hello".length null.length

TypeError: Cannot read properties of null (reading 'length')

5. RangeError : 범위 에러

허용되지 않은 범위의 값을 함수로 전달할 때 발생

이 에러가 발생할 때는 인수의 값을 확인하자

에러의 종류를 알면 어떻게 문제가 발생했는지 알 수 있으므로 어떻게 대처할지 예상할 수 있다.

1) 에러의 종류를 알면 원인과 대책을 예측하기 쉽다.

에러가 발생 시마다 조금씩 지식을 쌓아가자.

2. 에러 메시지

이 부분의 에러를 읽지 않고서는 효율적으로 문제 해결 불가

단어의 의미를 찾아보고 메시지의 의미를 확실히 이해하도록 노력하는 것이 에러를 해결하는 빠른 길

3. 스택 트레이스(stack trace)

스택 트레이스는 간단하게 말하면 에러 발생까지의 흐름을 나타내는 것, 위치를 알려주는 역할

1) 스택 트레이스가 알려주는 것

작업의 흐름과 에러가 발생한 위치를 알려준다.

처리 A => 처리 B => 처리 C(에러 발생) 에러 발생하기 까지의 흐름 => 처리 D

2) 스택 트레이스란?

프로그램 내 함수가 어떤 순서로 호출되는지 표시하는 이력 정보

트레이스(trace) : 자취, 기록
스택(stack) : 쌓이는 것

원래 스택 트레이스는 말 그대로 스택에 쌓인 것들을 보여주기 때문에 함수가 호출되는 반대로 나타난다. 함수 호출 순서대로 상자에 쌓이듯 순서대로 스택에 쌓인다. 이것을 꺼내서 불러오는 게 스택 트레이스

즉, 마지막에 호출 된 것이 스택 트레이스 가장 윗줄에 표시 된 다는 것!(프로그래밍 언어에 따라 다름 보통 자바랑 자바스크립트는 그럼)

3) 스택 트레이스의 구체적인 예

<!DOCTYPE html><html lang="ko">  <head>    < meta charset="UTF-8" />    <title>Sainple</title>  </head><body>  <h1>Stack trace</h1>  <script>    fn1();    function fn1() {      fn2();    }    function fn2() {      fn3();     }    function fn3() { //에러가 숨어 있음      console.log(nickname);    }  </script></body></html>

스택 트레이스의 첫 번째 행에는 최종적으로 에러가 발생한 장소인 함수 f3의 정보가 표시된다. sample.html:19:21 은 에러가 발생한 파일명과 에러가 발생한 위치의 행과 열의 번호를 표시

4) 먼저 최종 지점을 확인하자.

스택 트레이스는 최종 지점에서 에러가 발생한 것이므로 먼저 해당 부분을 살펴보는 것이 효율적이다.

대부분의 에디터에는 행과 문자의 수를 지정하면 해당 위치로 점프하는 기능을 제공하기 때문에 스택 트레이스에 나와 있는 행과 번째를 입력하면 찾기가 편하며, 작업을 좀 더 효율적으로 진행할 수 있다. 참고로 행의 첫 번째부터 문자를 셀 때 공백도 하나의 문자로 인식

모든 행을 읽으려고 하지 말고, 최종 지점의 첫 번째 행부터 읽으면 문제를 쉽게 파악할 수 있다.

5) 최종 지점만으로는 해결할 수 없을 때

function hello(user) {  console.log(`안녕하세요 ${user.nickname} 님');}
hello(userl);hello(user2); —1 에러의 원인이 되는 위치가 여러 곳 존재hello(user3);

에러의 원인

Uncaught TypeError: Cannot read properties of null (reading `nickname`)  at hello (sample.html: 15:35)  at sample.html:20:7

이 문제를 해결하기 위해서는 hello 함수에 전달하는 인수인 user가 null이 되는 것에 대처해야 한다. 즉, 스택 트레이스를 모르면 useri, user2, user3을 모두 확인해야 한다. 그러나, 스택 트레이스는 에러의 원인이 되는 위치를 알 수 있는데, 두 번째 행을 살펴보면 20:7이 표시되어 있으므로, 이 위치에서 호출하는 hello 함수가 원인이 되는 것을 알 수 있다.

스택 트레이스를 따라가면 효율적으로 원인을 찾을 수 있다.

4. 스택 트레이스의 흐름은 프로그래밍 언어마다 다를까?

많은 프로그래밍 언어는 스택 트레이스가 아래부터 위로 이동한다 따라서 제일 위쪽을 보면 에러의 위치를 특정할 수 있다. 그러나 파이썬은 이와 반대로 줄력한다. 파이썬에서 에러의 원인을 찾기 위해서는 스택 트레 이스의 가장 아래를 확인해야 한다

Previous1장 에러가 왜 무서울까?Next3장 효율적으로 에러의 원인 찾기

Last updated 1 year ago

hashtag01. 에러의 구성요소를 알아보자

hashtag1. 에러의 종류

hashtag1) 에러의 종류를 알면 원인과 대책을 예측하기 쉽다.

hashtag2. 에러 메시지

hashtag3. 스택 트레이스(stack trace)

hashtag1) 스택 트레이스가 알려주는 것

hashtag2) 스택 트레이스란?

hashtag3) 스택 트레이스의 구체적인 예

hashtag4) 먼저 최종 지점을 확인하자.

hashtag5) 최종 지점만으로는 해결할 수 없을 때

hashtag4. 스택 트레이스의 흐름은 프로그래밍 언어마다 다를까?