디버깅(debugging)
디버깅이란 오류 메시지를 자세히 살펴보는 것으로 오류를 이해하고 찾아서 고치는 과정이다.
이전 글에서 만들었던 프로젝트를 기반으로 디버깅을 해보려 한다.
오류들을 하나씩 살펴보겠다.
1. Duration에 음수 값 대입
duration에 양수의 값만 대입할 때는 아무문제 없는 것처럼 보였으나, 0이나 음수의 값을 대입하자 페이지가 실행되지 않으면서 개발자 도구에 다음과 같은 오류 메시지가 떴다.
위 오류는 Uncaught TypeError로 정의되지 않은 값에 대한 오류이다.
즉, 음수에 대한 동작이 정의되어있지 않다는 의미로 valueEndOfYear 속성을 읽어오는 것에 실패했다는 것이다.
따라서 valueEndOfYear 속성에 접근하는 부분에서부터 오류 수정을 시작해보겠다.
Results (Results.jsx:8:16) 오류 메시지의 의미는 Results 함수가 있는 곳의 8행에서 코드 오류가 발생한다는 의미이다.
가 정의되지 않는 값을 가지고 있는 것으로 예상된다.
results 요소들이 모여있는 곳을 보면 results 배열이 새로운 요소를 받는다는 것을 확인할 수 있다.
그러나 이 동작은 현재 코드에서 for문 안에서만 일어나고 있지만, 첫번째 요소가 정의되지 않았고 찾을 수 없기 때문에 이 for 반복문이 실행이 되지 않는다는 것이 문제이다.
이를 해결하기 위해 results의 길이가 0인지 확인하여 요소가 있는지 없는지 판단하도록 하는 코드를 추가해주겠다.
요소가 없으면 유효하지 않은 입력값이라는 메시지가 뜨도록하는 함수를 작성해주었다.
위의 코드를 작성한 후로는 0이나 음수 값을 입력했을 때 설정한 메시지가 뜨면서 페이지가 실행되었고, 콘솔창에 오류 메시지 또한 사라진 것을 확인할 수 있었다.
2. 코드의 논리적 오류
모든 오류가 오류메시지로 콘솔창에 제공되는 것은 아니다.
예를들어 코드에 논리적인 오류가 있는 경우 오류메시지는 제공되지 않지만 동작을 실행하면 제대로된 실행이 되지않는 상황도 발생할 수 있다.
프로젝트에서 initial investment 값을 다른 값으로 바꾸면 숫자들이 이상하게 폭등하는 것을 볼 수 있었다.
먼저, 앱을 재실행 했을 때는 정상적으로 동작이 실행되는 것을 확인할 수 있으므로 calculationInvestmentResults 함수에서는 오류가 발생하지 않는다는 것을 알 수 있었다.
이 문제가 아니라면 초기에 출력값을 올바르게 받지 않았음을 예측해볼 수 있다.
따라서 기술적으로 사용자 입력값을 가져오는 부분에서 오류가 있을 것이라 예상하고 코드를 살펴보았다.
위의 코드에서 오류를 확인하기 위해 개발자 도구에서 소스 코드를 확인하였다.
중지점을 설정하고 값을 변경하였더니 중지점에서 실행이 멈추는 것을 확인할 수 있었다.
계속 실행 버튼을 통해 다음단계로 넘어가보니 newValue: "1000" 값을 받고 있는 것을 확인하였다.
이는 현재 계산 과정에서 newValue 값을 문자열로 받고 있다는 의미이다.
따라서 수학적인 계산이 제대로 실행되지 않고 있음을 알 수 있었다.
문자열과 숫자의 계산으로 동작이 실행되고 있었기 때문에 비정상적인 값들이 나오게 된 것이었다.
따라서 이를 해결하기 위해 newValue 값이 문자열이 아닌 숫자로 변환되도록 코드를 수정해주었다.
앞에 +를 추가함으로써 간단하게 오류를 해결할 수 있었다.
오류를 수정하고 값을 변경해보았더니 정상적으로 실행되는 것을 볼 수 있었다.
3. 테이블 교체가 아닌 무한 추가되는 오류
값을 변경할 때 계산된 테이블이 화면에 교체되어 보여지는 것이 아닌 계속해서 추가되는 것을 확인하였다.
또한 콘솔창에 오류메시지도 확인하였다.
위의 오류메시지는 Encountered two children, 즉 두 children이 같은 키를 가진다는 의미이다.
코드를 살펴보면 해당 키를 가지는 값을 출력하도록 되어있어 입력값이 수정됨에 따라 테이블이 교체되는 것이 아니라 계속 출력만 되고 있는 것이었다.
이를 해결하기 위해 Strict Mode를 사용하였다.
이는 특정하게 index.jsx 파일에서부터 수정을 시작해야한다. Strict Mode는 리액트에서 import하는 내장 컴포넌트이기 때문이다.
따라서 다음과 같이 코드를 수정해주었다.
Strict Mode 함수의 주요 기능은 모든 컴포넌트 함수를 두번씩 실행한다는 것이다. 그러나 서버에 올린다면 더이상 두번씩 실행하지 않는다.
따라서 재실행을 시켜 두번씩 테이블이 출력되는 것을 확인할 수 있었고 이는 results 배열이 함수 밖에 정의되어 있기 때문이라는 것을 파악할 수 있었다.
즉, 배열이 함수 밖에 있기 때문에 새로운 값을 받을 때 새로운 배열이 생성되지 않는 오류인 것이다.
따라서 정의된 배열을 Results 함수 안으로 옮겨서 언제든 값이 바뀌어 컴포넌트 함수가 실행될때마다 배열이 생성되도록 해주었다.
코드를 수정한 후에는 정상적으로 페이지가 실행되고 오류메시지 또한 사라진 것을 확인할 수 있었다.
이렇게 해서 프로젝트 페이지에 나타나는 오류를 해결해보았다.
'공부 > React' 카테고리의 다른 글
| [React] Refs(참조) 및 Portals(포탈) 활용 (2) | 2024.02.07 |
|---|---|
| [React] 컴포넌트 스타일링 (1) | 2024.01.24 |
| [React] 연습 프로젝트 1 (0) | 2024.01.17 |
| [React] Fragments, Feature, 틱택토 게임 등 (0) | 2024.01.16 |
| [React] 컴포넌트, JSX, Prop(속성), 상태 등 (0) | 2024.01.14 |