Investment Calculator 오류메시지를 보고 디버깅 해보자

 

Investment Calculator 개발 중..

 

 

오류발생

 

정의되지 않은 값의 속성들을 읽어 들이는데 실패함을 알 수 있다.

-> valueEndOfYear 속성을 읽는데 실패...

 

마지막 에러를 보면 

이것이 접근하려고 하는 객체가 정의되지 않는 것 같기에

이 속성과 그 안에 저장되어 있던 값에 접근하는 데에 실패한 것이다.

 

 

코드의 어느 부분부터 찾아 해결해야 할지 좋은 아이디어를 주고 있다.

valueEndOfYear 속성에 접근하는 부분에서 시작해야 한다.

 

Results.jsx

 

여기 코드가 이 속성에 접근하려고 하는 부분이다.

 

 

하지만

이 속성의 사용을 직접 확인할 필요가 없다.

 

대신, 이 맨위에 오류 메시지의 실제 메시지 뒤에 

단순히 이 오류 메시지 밑에 출력인 stack-trace를 얻었다.

 

 

이것은 단순히 이 오류로 이어지는 코드의 실행 목록이다.

 

at Results (Results.jsx:8:16)

=> 오류가 Results 함수에서 오고 있다는 것을 알 수 있다.

 

아까 

 

이 줄의 코드는 원인이 맞다

 

하지만 오류 메시지에서는 undefined라는 값에서 이 속성을 읽는데 실패한 것이 문제라고 한다.

그래서 이 줄의 코드의 실제 문제는 

이 results[0] 년도가 정의되지 않아서이다!

 

그러므로 당연하게도 results들이 모여있는 곳으로 가야 한다.

 

이 results 배열이 초기에는 비어있다.

그 말은 즉, 당연하게도 

해당 배열의 첫 번째 요소에 접근하려는 것은 실패할 것을 의미한다...

 

 

 

결국 문제는 이 calculateInvestmentResults 함수 내에서 

results 배열이 덧붙여지지 않는다는 것이다.

 

 

 

이론적으로 이 results 배열이 새 요소를 받는다는 것을 확인할 수 있다.

investment.jsx

 

하지만 그것은 이 for 반복문 안에서만 일어나는 일이다.

 

문제는 첫 번째 요소가 정의되지 않아 첫 요소가 없는 것이기 때문에

이 for 반복문이 실행되지 않는 것이 문제이다..

 

i가 duration 보다 작은 동안 반복하는 것을 확인할 수 있다.

만약 이 코드가 실행되지 않는다면 가능한 유일한 경우는 

duration이 i보다 작은 경우일 때!

 

 

 

그리고 이런 경우는 당연히

duration에 0이나 -1와 같은 음수를 입력했을 때의 경우이다.

 

이 코드가 duration에 음수의 값이 입력되어 실행되지 않는다면 

여기에 있는 이 코드가 첫 요소가 없기 때문에 실패한다는 것이 문제라는 것을 !

 

 

 

 

그러므로, 이 문제를 해결하기 위해 

여기에 if 조건문을 추가하여 results의 길이가 0인지 확인하여

요소가 없는지 확인한다.

 

 

오류 해결 완!